Membuat Responsive Sitemap di Blog

Sitemap adalah daftar isi pada suatu blog, seperti halnya sebuah buku, blog juga memiliki daftar isi. Semua artikel yang pernah anda tulis ...

Sitemap adalah daftar isi pada suatu blog, seperti halnya sebuah buku, blog juga memiliki daftar isi. Semua artikel yang pernah anda tulis akan muncul di Sitemap yang anda buat. OK jika sobat tertarik untuk memasang Responsive Sitemap keren ini, silakan ikuti langkah-langkahnya berikut.

1. Login ke akun Blogger sobat.

2. Pada halaman dashboard, masuklah lah ke bagian Laman/Page.

3. Login ke blogger --> Laman --> Laman Baru --> Laman Kosong

4. Copy dan Paste Script di bawah ini (Pilih yang HTML bukan Compose)

Sebelum Memasang sitemap ini silahkan lihat Demo tampilan Sitemap

<script src="https://googledrive.com/host/0B-P4_Fs3S76ydURacVd6TlJyWW8" type='text/javascript'></script>
<script src="http://Masdabang.blogspot.com/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>

Ganti Masdabang dengan nama blog sobat.
 

5. Klik Publish