Cara Membuat Widget Daftar Isi Responsive-Sitemap atau daftar isi ini sangat berperan cukup penting untuk pengunjung sebuah blog, perannya yaitu untuk merangkum semua artikel yang ada di blog kita disebuah halaman khusus yang telah kita buat, dan sitemap 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><script src="http://adoteidrmarcoaureliocunha.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>
ganti link blog adoteidrmarcoaureliocunha dengan link blog agan
3. Hasilnya kurang lebih seperti gambar dibawah ini, dan langkah terakhir klik Publikasikan
Sekian artikel Cara Membuat Widget Daftar Isi Responsive, Semoga Bermanfaat.
