<marquee>Cara Membuat Daftar Isi Otomatis keren Pada Blog Dengan JQuery </marquee>

Pengen punya daftar isi blog yang keren ?, Pastinya maudong mau yeah mau yeah mau yeah...!. Kali ini Palma_Hutabarat Akan Shere lagi tet...

Pengen punya daftar isi blog yang keren ?, Pastinya maudong mau yeah mau yeah mau yeah...!. Kali ini Palma_Hutabarat Akan Shere lagi tetang cata Memasang Daftar Isi Otomatis di Halaman Blog sedikit berbeda dengan Daftar Isi Blog Otomatis Yang sebelumnya, Daftar Isi Blog Otomatis kali ini sangat keren Seperti contoh gambar yang ada di bawah ini :

Demonya bisa anda cek di daftar ini blog ini : pada daftar isi BLOG saya

Sebelum masuk langkah lankahnya kita tinjau sekilas Manfaat daftar isi pada blog. Daftar ini pada blog bukan hanya sekedar hiyasan saja tetapi masih memiliki manfaat lain untuk orang yang mengunjungi blog anda ataupun untuk SEO Blog. Bagi orang yang mengunjungi halaman blog anda akan diberikan kemudahan untuk mencari artikel yang mereka butuhkan dengan demikian berpengaruh pada SEO blog anda sebagai sarana Untuk meningkatkan Page View blog anda.

Yup's langsung saja ke langkah-langkahnya :

Lankah 1 : Obtimasi Kode CSS

Tetap seperti biasa, Silahkan Masuk Keakun Blog anda
Pilih Template

Klik Tombol Edit HTML

Klik Tombol Next/Lanjutkan

Cari Kode ]]></b:skin> (Gunakan tombol ctrl + f untuk memudahkan pencarian kode)

Copy kode berikut dan letakan di Atas kode ]]></b:skin>

#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/AVvXsEi-1FHmurPgc56HB_TEymMISTz6yCP3Bd_h1ryfsK1jWCgUxFVnlT5TXvK_qZtQImjLYKtv1b4OvH8VFGfN6RnDEsyIiXdGkiYdjw9BYxSdcHc_9IxXTB2Vi_zn4tpf6DSVng_FRBXjxtA/s320/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/AVvXsEjekU7plO1P1H22QZR4ajnFO62YuNUjElrauhJY5hBg8hOA6GEeYL-qYihMtxnyHWRGGQIMOwVKtXC70LAvBOF9M4hUkXMxm7R3as-_h-GIu6QVWWWlfLIu19wpMluY2Tv-ochpn2-NjUo/s1600/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/AVvXsEh03tIrqm3KC2L8ZUWptLdnbrzCwcO3u72vUkCJjATw0Rje6I6QIQW1OeZgLLAMUs6Y6jZYAv5c6WJnR2RGgu7Qp1JRSC78nJW581T2KaUVEdg7AKyThi5ED6qlD-0t_OHeveZug3YCbws/s320/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);
}

Sekarang Cari Kode </head>

Copy dan paste kode berikut Diatas Kode </head>

<script src='http://dapurtutorial8.googlecode.com/files/Scriptdaftarisi1.js' type='text/javascript'/>

Jika Sudah Klik Tombol Simpan Template

Anda Dapat Menampilkan daftar ini baik di postingan seperti pada Blog ini ataupun di kolom Sidebar blog anda.

Lankah 2 : Menampilkan daftar isi pada postingan

Buat Entri Baru atau postingan baru
Pilih mode Entri Pada Bagian HTML

Copy kode berikut

<script type="text/javascript" src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt"></script>
<script src="http:// www.palmahutabarat.co.cc /feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

Ket :

merah

Paste Kode tersebut di halaman Entri Pada Mode HTML tadi

Klik Tombol Publikasikan

Lankah 3 : Menapilkan daftar isi kolom sidebar

Pilih Tata Letak

Klik Tambah Gadget/Widget

Pilih HTML JavaScript

Copy Kode Berikut

<script type="text/javascript" src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt"></script>
<script src="http://www.palmahutabarat.co.cc/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

Ket :

merah

Paste kode Pada box HTML/JavaScript tadi

Klik Simpan
Selesai

Demikian tutorial kali ini tetang cara membuat daftar isi blog otomatis keren dengan JQuery semoga bermanfaat. jangan lupa berikan tanggapan anda tetang daftar isi otomatis ini dan silahkan ajukan pertanyaan anda jika anda kesulitan untuk memasang daftar isi blog otomatis ini.