Cara Menambahkan Fitur Login Authentication Firebase di Blogger

 

Widget Sitemap

Di Blogger sebenarnya sudah tersedia widget Archive yang berfungsi untuk menampilkan arsip seluruh artikel berdasarkan tanggal publikasi. Namun, karena widget ini memiliki opsi kustomisasi yang terbatas, pengaturan tata letaknya sering kali kurang estetis. Oleh karena itu, untuk membuatnya lebih rapi, kali ini saya akan membagikan panduan khusus. 

Demo

Adapun keuntungan Cara Menambahkan Widget Sitemap di Blogger ini adalah agar blog tampil lebih profesional dari sebelumnya. Selain itu, pengunjung juga bisa melihat dan mencari semua artikel blog kita dengan mudah. Tentunya itu akan menambah nilai plus untuk blog jika pengunjung membuka artikel tertentu pada widget sitemap ini. 

 Pertama, buka Blogger > Laman > Buat Laman baru > Tambahkan kode di bawah ini pada tab HTML postingan laman

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKgdM7KdoRlIQZxaJ4ghVjwC5dD32vj31F4yrOmrk8Oj7jdkpnLSNPYddA2AA3-eUCgCunAxLdYJUx4YmlLIB9KdKkiBpqtM7OJkGjeyu16pFZ1IhygVV2YG7bddrITVQ1d39-iIsuZHHQ/s1600/Sitemap+Arlina+Code.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Sitemap Arlina Code" class="lazyload" style="border: none;" data-original-height="444" data-original-width="1200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKgdM7KdoRlIQZxaJ4ghVjwC5dD32vj31F4yrOmrk8Oj7jdkpnLSNPYddA2AA3-eUCgCunAxLdYJUx4YmlLIB9KdKkiBpqtM7OJkGjeyu16pFZ1IhygVV2YG7bddrITVQ1d39-iIsuZHHQ/s1600/Sitemap+Arlina+Code.png" title="Sitemap" /></a></div>

<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=99999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1{display:none}#bp_toc{color:#000;margin:0 auto;max-height:686px;overflow:hidden;overflow-y:auto}span.toc-note{margin:0 auto 25px auto;text-align:center;line-height:normal;display:table;position:relative;overflow:hidden;font-size:14px;padding:10px 20px;background:#007bff;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:100%;color:#fff;border-radius:99em;font-weight:500;transition:all .3s}span.toc-note:hover{background-size:200%}.toc-header-col1{padding:10px;background-color:#f5f5f5;width:250px}.toc-header-col2{padding:10px;background-color:#f5f5f5;width:75px}.toc-header-col3{padding:10px;background-color:#fff;width:125px}#bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:1px solid rgba(0,0,0,0.05);background:#fff}#bp_toc td.toc-header-col1{}#bp_toc td.toc-header-col2{}#bp_toc td.toc-header-col3{}.post td{background:transparent}#bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:1px solid rgba(0,0,0,0.05)}#bp_toc td a{background:transparent;color:#222;float:none;border-radius:0;padding:0;font-size:100%;display:initial;box-shadow:none}#bp_toc td a:hover{color:#0984e3}.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited{font-size:13px;text-decoration:none;color:#aaa;font-weight:500;letter-spacing:0.5px}.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none}.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px 5px;font-size:90%}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{color:#000}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#3498db}#bp_toc table{width:100%;margin:0 auto;counter-reset:rowNumber}.toc-entry-col1{counter-increment:rowNumber}#bp_toc table tr td.toc-entry-col1:first-child::before{content:counter(rowNumber);display:inline-block;min-width:38px;margin-right:.7em;background:#fc5c65;color:#fff;border-radius:99em;font-weight:500;text-align:center;font-size:12px;padding:0;line-height:1.7}
#bp_toc td.toc-entry-col1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}
#bp_toc::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}#bp_toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}#bp_toc::-webkit-scrollbar-track{background-color:transparent}#bp_toc::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)}
@media screen and (max-width:768px) {
#bp_toc td.toc-entry-col1{white-space:normal;overflow:visible;text-overflow:initial;max-width:100%}#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3,#bp_toc table tr td.toc-entry-col1:first-child::before{display:none}}
</style>

Kemudian klik Publikasikan laman. 

Dengan menambahkan widget Sitemap di Blogger, blog Anda akan terlihat lebih profesional dibanding sebelumnya. Selain itu, pengunjung dapat dengan mudah melihat dan mencari semua artikel yang tersedia di blog Anda. Hal ini tentu memberikan nilai tambah, karena pengunjung dapat langsung mengakses artikel yang mereka butuhkan melalui widget sitemap tersebut. Mari kita mulai dengan langkah-langkah sederhana yang akan saya bagikan dalam panduan ini!

Selamat Mencoba..

Related Posts