Kode Script Halaman Sitemap Blogger Keren dan Responsive

Cara Membuat Sitemap Otomatis dan Responsive di Blogspot

Perlu Anda ketahui, yang akan Saya bahas di sini adalah membuat halaman sitemap atau lebih tepatnya mungkin halaman daftar isi blog. Bukan sitemap yang di submite pada webmaster, jadi Anda harus bisa membedakan ya.

Jika yang Anda cari sitemap untuk webmaster bisa baca artikel Saya yang ini: Cara Membuat Sitemap XML Blogger

Oke Saya anggap sudah paham, sekarang kita kembali ke topik utama dari artikel ini. Yaitu membuat halaman sitemap/daftar isi blog yang keren dan juga responsive seperti yang ada di blog Anboi.com ini, apabila Anda ingin lihat bisa klik Di Sini.

Bagaimana Anda sudah lihat, keren bukan?

Setiap isinya dibagi-bagi berdasarkan label dari masing-masing artikel, membuatnya lebih rapi dan orang akan lebih mudah dalam mencari artikel yang akan mereka baca.

Setiap artikel yang baru dan belum lama dibuat akan ditandai dengan kata "New!", dan sitemap ini juga otomatis akan bertambah sendiri isinya setiap kali Anda membuat artikel.

Dan yang paling Saya suka adalah tampilannya, menurut Saya ini keren banget lebih modern berbeda dengan halaman sitemap yang model dulu-dulu.

Tertarik membuatnya di blog Anda? Jika ya, bisa lihat caranya dibawah ini.

Cara Membuat Sitemap Blog Otomatis dan Responsive

Untuk membuat halaman sitemap atau daftar isi ini pertama Anda harus masuk ke menu Halaman pada dashboard blog Anda, kemudian pilih Halaman Baru.

Isi judul halaman, bebas mau Anda isi apa aja. Kalau Saya biasa mengisinya dengan "Daftar Isi Blog", agar orang awam bisa lebih memahaminya. Daripada memberi judul "Sitemap" orang yang gak paham blog pasti kan gak tau, dan akhirnya mengabaikan begitu saja.

Setelah memberi judul halaman, selanjutnya Anda copy dan paste kode script di bawah ini di kolom isi halaman tersebut. Namun sebelumnya Anda ubah dulu tampilannya dari Compose ke HTML.

Cara Membuat Halaman Sitemap Blog


Jika sudah silahkan Anda ambil kode scriptnya di bawah ini:

<style type="text/css"> #toc{width:99%;margin:5px auto;border:1px solid #2d2d2d; -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);} .labl{color:#FF5F00;font-weight:bold;margin:0 -5px; padding:1px 0 2px 11px;background: #2d2d2d; border:1px solid #2d2d2d; border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb; -moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;} .labl a{color:#fff;} .labl:first-letter{text-transform:uppercase;} .new{color:#2d2d2d;font-weight:bold;font-style:italic;} .postname{font-weight:normal;background:#fff;margin-left: 35px;} .postname li{border-bottom: #ddd 1px dotted;margin-right:5px} </style>
<br />
<div id="toc">
<script src="https://cdn.rawgit.com/penaindigo/Pena-Indigo-Code/a134f9de/sitemappenaindigo.js" type="text/javascript"></script> <script src="https://www.anboi.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Pada kode script di atas, yang Saya beri tanda merah silahkan Anda ganti dengan nama domain blog Anda. Setelah script terpasang silahkan Anda klik Publikasikan dan lihat hasilnya.

Akhir Kata:

Itulah tadi cara membuat halaman sitemap atau daftar isi blog otomatis terbaru yang responsive. Cara yang mudah dan simpel tapi hasilnya keren banget. Oke itu saja, semoga artikel ini bisa membantu dan bermanfaat untuk Anda.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel