Membuat Sitemap (Daftar Isi) Blog dengan Tampilan Keren

Blog atau situs yang baik adalah yang bisa memberi gambaran utuh dan penuh kepada pengunjung atau pembacanya. Blog dikatakan baik juga karena pelayanan yang memuaskan kepada pengunjungnya. Ibaratnya, pengunjung sebagai tamu adalah raja yang musti dilayani dengan memuaskan.

Jika sahabat berniat untuk membuat blog atau situsnya ramai, maka jangan pernah menyepelekan pelayanan kepada pengunjung. Sekali, sahabat mengecewakan pengunjung, maka secara otomatis pengunjung itu pun langsung meninggalkan blog sahabat. Istilahnya, hanya bounch atau datang lalu pergi.

BACA:

• Tips Mudah Agar Blog Ramai Pengunjung
• Trik agar Pengunjung tetap Ramai walau Jarang Update

Berbeda halnya jika situs atau blog sahabat memberi kepuasan, maka ada kemungkinan besar pengunjung tersebut berkunjung balik. Terlebih jika blog atau situs sahabat memberikan gambaran utuh atas pengunjungnya.

Salah satu cara menarik dan memberi gambaran utuh atau isi blog atau situs sahabat adalah dengan memberinya daftar isi. Oleh karenanya, hal yang paling prinsip sebelum merias blog adalah melengkapinya dengan daftar isi.

Cara Membuat Daftar Isi Blog dengan Tampilan Keren

OK, setelah sahabat mengetahui pentingnya membuat daftar isi, maka sekarang sudah saatnya melaju pada cara membuat sitemap atau daftar isi yang tampilannya keren, seperti pada gambar di atas? Langsung saja praktekkan cara ini pada blog sahabat semua. 

Sahabat cukup copy kode di bawah ini dan letakkan pada halaman (page) sahabat. Ingat, kode ini ditulis di HTML, bukan Compose. Selanjutnya, ganti tulisan yang berwarna merah di bawah ini dengan alamat blog sahabat semua.

Biar tidak bingung, perhatikan saja langkah-langkah di bawah ini:

1. Login ke dashboar blog sahabat.
2. Klik laman, kemudian buat laman baru.
3. Setelah tampak laman baru, maka silahkan copy kode javascript di bawah ini ke dalam HTML. Ingat, HTML, BUKAN Compose ya.
4. Silahkan ganti huruf yang berwarna merah di bawah dengan alamat blog sahabat.  

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfw6dbu6auKv2A3wk4ou0qOlqemfIpLJ1brs899sJSlZUQJzXM0TA5zP5np_cDgaJ1LQVLb5Pjr1pYph7GIMTYd0gHq4HlnA4b_kXzTp6Pk9XjOIAsQkpJIZ8qgzZ624KXwobWUqthwc8/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBfpnnp42zDMRBTOc2mRH6n1HREagAsuORCxg3DY0W0Of7XhONoHRJwRRE9kUzx2vHZpR9aKTgnMIxHBtw8CRa8by8JzCJTbfDwe1cLp0Lmv_9jp4yHlLhyifjoEv4__hgGS9gHx-4zgg/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ezOoLhG3ViQrsLhSsEDLl9nlemF96zeTceseX4BzX-DjelsGovbeN4cKuchUqar7PApzV7aUDTQL3oR0RdIije5i9Yfjjh-PPQWTFIU6gG0b6gZvVopwXsOisxLtOj7p1jJiec5UY7k/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>
<script src="https://farhanshare-blogspot-com.googlecode.com/files/sitemap%20%281%29.js" type="text/javascript"></script><script src="http://ngonline06.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

Jika sahabat sudah melakukan langkah-langkah di atas dengan baik, maka secara otomatis sekarang sahabat sudah memiliki daftar isi dengan tampilan yang keren. SELAMAT ya, sekarang blog sahabat sudah tampil keren, terlebih daftar isinya. Semoga pengunjung di blog sahabat menjadi betah dan tertarik.

CATATAN:

• Daftar isi biasanya diletakkan pada sebuah halaman statis. Namun jika sahabat ingin membuatnya bukan di halaman, maksudnya seperti postingan-postingan lainnya, sahabat bisa juga membuatnya. Caranya pun sama, tinggal sahabat membuat postingan baru dan tulislah kode di atas pada postingan di tempat HTML, bukan di Compose.
• Selain daftar isi, halaman blog juga dilengkapi dengan halaman lain, semisal About, Contact Us, Disclaimer, dan Privacy Policy. Untuk halaman-halaman tersebut, sahabat bisa melihat contohnya pada media Ngonline06. Tepatnya di bagian atas blog. Silahkan sesuaikan menurut kebutuhan.

Oya sebagai alternatif lain, jika sahabat ingin membuat daftar isi dengan tampilan sederhana dan loading cepat, sahabat bisa mengunjungi Cara Membuat Daftar Isi pada Blog dengan Loading Cepat.