Site Map atau biasa disebut daftar isi berperan cukup penting untuk pengunjung, perannya yaitu untuk merangkum semua artikel yang ada di blog kita disebuah halaman khusus yang telah kita buat, dan site map yang satu ini bersifat responsive dan otomatis, maksud dari responsive adalah bisa menyesuaikan lebar dan tinggi sesuai dengan browser, sedangkan maksud dari otomatis adalah jika kita membuat artikel baru maka akan muncul dengan sendirinya artikel baru tadi didalam sitemap, asalkan menggunakan Label. Berikut tampilan dari sitemapnya :
Nah bagaimana ? keren dan juga responsive kan ? jika agan tertarik silahkan langsung pasang di blog kesayangan agan, caranya tidak sulit kok, cukup memasukkan sejumlah script kedalam artikel atau halaman statis yang ingin agan buat jadi daftar isi, berikut caranya :
1. Masuk Blogger, kemudian ke bagian Laman > Laman Baru.
2. Sekarang masukkan judul untuk halamannya, disini saya memasukkan judul " Site Map " lalu klik mode HTML dan lalu paste script sitemap dibawah ini tepat didalamnya
<script src="https://googledrive.com/host/0B-P4_Fs3S76ydURacVd6TlJyWW8" type='text/javascript'></script>ganti link blog agan-tutorial dengan link blog agan
<script src="http://agan-tutorial.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&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>
3. Hasilnya kurang lebih seperti gambar dibawah ini, dan langkah terakhir klik Publikasikan
Sumber script : www.blogtipsntricks.com
Post a Comment