Cara Membuat Daftar Isi atau Sitemap yang Responsive

Menambahkan Sitemap atau Daftar Isi di blog ini sangat dianjurkan untuk semua blogger baik baru atau lama. Peta Situs ini membantu pembaca untuk menavigasi blog dengan mudah dan juga membantu blog kita dengan menurunkan tingkat bouncing nya ( jumlah kunjungan yang terdiri dari hanya satu tampilan halaman ). Dari teman saya sangat baik + Chandeep J telah bekerja di widget Sitemap untuk membuatnya lebih menarik dengan diberinama Responsif Sitemap Widget untuk Blogger

Responsif Sitemap Widget untuk Blogger

Widget ini diberi kode oleh Chandeep dari BlogTipsnTricks . Widget sitemap ini responsif dan dapat digunakan lebih atau kurang dalam setiap template blogger tanpa masalah besar . Widget terlihat menarik dan eye catching juga. Sebuah demo kerja langsung dapat dilihat dengan mengklik tombol di bawah ini :

LIVE DEMO - Cara Membuat Daftar Isi atau Sitemap yang Responsive

<script src="https://googledrive.com/host/0B-qFC4Ni6GSKQnE2b0o5V25tcnc" type="text/javascript"></script>
<script src="URL Blog Anda/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<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>

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

Pergi ke Blog Judul → Page → New → Halaman Halaman Kosong → HTML dan paste kode di bawah ini diberikan dalam editor posting . Lalu ganti tulisan warna merah dengan URL Blog Anda.