Cara Membuat Site Map Atau Daftar Isi

Jumpa lagi di Tutorial Blog dari Raja_Dihati, kali ini kita akan membahas tentang Site Map Blog atau bisa juga di sebut dengan Daftar Isi Blog dengan tampilan keren dan dinamis, oke site map ataupun daftar isi yang elegan ini sudah saya modif dengan tambahan JavaScript didalamnya. Pastinya mudah donk cara membuatnya soalnya saya sendiri tidak suka cara yang rumit ataupun panjang-panjang. Udah siap langsung ke TKP gan. berikut langsung kita bahas sampai tuntas hehehehehe..

DEMO

Pertama dan utama sekali hehehe kayak pidato aja.

1. Login dulu ke akun blog sobat gak login mau gimana bikinnya ya kan..?
2. Langsung saja kayak membuat postingan seperti biasa
3. Terus pas kita di halaman Entri Post
4. Klik HTML bukan yang COMPOSE ingat ya...!!!
5. Siap itu pastekan kode berikut ini pada halaman HTML tadi

<style type="text/css">
#dafis-acc{ font-family:"Arial", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#fff;padding:2px 0;}
.dafis-label{background:#161616; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 0px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: greenyellow; text-shadow: 0 1px 1px rgba(0,0,0,.3); border-top:2px solid #404040;}
.dafis-label:hover{ color:greenyellow;opacity:0.4; }
.dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important;}
.dafis-daf ol li{line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left;}
.dafis-daf ol li a{ text-decoration: none !important; color:#fff !important; display:block; padding-left:10px; }
.dafis-daf ol li a:hover{ background:#333; border-left: 5px #FF0000 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3);}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/webbadry/home/sitemap-badry-keren.js" type="text/javascript"> </script>
<script src="http://badry7.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"> </script>

Terakhir tinggal Klik PUBLIKASIKAN, dan lihat hasilnya

Mudah-mudahan agan semua pada suka, dan jangan lupa untuk tinggalkan komentar jika ada yang dirasa ragu atau apa saja yang mau di tanyakan, insyaallah saya akan cepat membantu agan semua.

• Tambahan : Jika ingin menyebar luaskan artikel ini mohon di buat link sumbernya dan tinggalkan komentar anda. 

Oke oke okey sampai di sini aja Tutorial Blog kali ini tentang Cara Membuat Site Map Atau Daftar Isi yang keren, elegan, ringan dan mudah cara pasangnya, Lain kali saya akan buat lagi yang lebih menarik lagi, salam blogger. Wassalam