Widget Sitemap Keren Terbaru Untuk Blogger

Menambahkan Sitemap atau Daftar Isi di blog ini sangat dianjurkan untuk semua blogger baik baru atau lama. Sitemap ini membantu pembaca untuk menavigasi blog kita dengan mudah dan juga membantu blog kita dengan menurunkan tingkat bouncing nya (jumlah kunjungan yang hanya terdiri dari satu tampilan halaman). Dan hari ini saya akan menunjukkan kepada anda sebuah widget sitemap keren yang dinamakan Responsif Sitemap Widget.


Responsif Sitemap Widget

Widget ini diberi kode oleh Chandeep dari BlogTipsnTricks. Widget sitemap ini responsif dan dapat digunakan dalam setiap template blogger tanpa masalah besar. Widget tampak menarik dan tentunya keren. Anda bisa melihat contohnya dengan klik link demo dibawah ini.

DEMO 

Untuk menambahkan widget Sitemap ini ke dalam blog cukup ikuti petunjuk di bawah ini.

Login ke Blog → Laman → Laman Baru → Laman Kosong → HTML dan paste kode di bawah ini dalam editor posting.

<script src="http://files.allbloggertricks.com/Scripts/sitemap.js" type="text/javascript"></script>
<script src="http://mirzabasri.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<br />
<div style="display: none;">
<a href="http://mirzabasri.blogspot.com/">Tips Dan Trik Blogger</a></div>
<style type="text/css">
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #555; color: #fff; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }
</style>

Sekarang anda dapat menerapkan Sitemap keren di blog anda. Sitemap ini pasti akan membantu pembaca blog anda untuk menavigasi situs anda lebih mudah.

Semoga Bermanfaat.