Home / Blog / Membuat Daftar Isi Otomatis Di Blog

Membuat Daftar Isi Otomatis Di Blog

Posted by Naufal Ammar Selasa, 26 Maret 2013 0 komentar

Daftar isi sangat penting bagi keberadaaan sebuah blog atau web. Karena daftar isi pada website/blog berfungsi sebagai alat navigasi bagi pemilik maupun pengunjung untuk menjelajahi isi dari website/blog. Setelah sebelumnya saya sudah membahas tentang caramembuat daftar isi manual dan otomatis, kali ini saya akan berikan satu lagi cara membuat daftar isi, tapi kali ini beda karena menggunakan jQuery dan hasilnya nanti akan lebih keren.

Selain itu daftar isi yang saya bahas disini juga menggunakan efek animasi accordion, hal ini dimaksudkan agar daftar isi blog ini terasa lebih ringkas dan tidak terlalu panjang sekaligus mudah dan rapi untuk blog serta artikel yang disusun berdasarkan Label/Kategori. Sehingga serasa seperti blog anda seperti blog profesional.

Baiklah, saya akan langsung saja pada langkah-langkah pembuatannya :

Langkah Pertama

Login dulu ke blogger anda
Pada dasbor masuk ke Rancangan lalu pilih Edit HTML.
Setelah itu cari kode berikut ini ]]></b:skin>
Kemudian copas kode dibawah ini dan taruh diatasnya
#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/AVvXsEibdkOKwHHH58nbCTwSDD6XXnxHAsIkeWHzM_ytSluDD5opF13tORgIZ5Ey96diNvaTLaWXMnPWgECbaNZJvbbDrSkPCPmMKWApsWdLZq2JRYjWNp672B8_YVYyBk45rNvNKii1zMZUHoQ/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/AVvXsEgdIXLkb_pMjasqZINMRlq4b_PkOpTk9X7pIEHjd_hV6Pue_RlG5wlEwsSx7-N7Gi84Y0Vq6I1ZX97dooHom55gfl6U5e1YFkMzVOqXmgiz80xqaPWtjDOKBX3DaIBdKBgIAYF9y-wbOS8/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/AVvXsEiYu59oDv6p5wQ0dMouVYOOJMHV936bak4PKdAqK6uVXB3FcbtnQbN20YEQ-aiojRd8zqciyNwDRipL_7QAuh-WsoFhz_ltt4YkDnkpq_SD_WjnLVxWIRCTswW8XlKSOjk3CYOnCY4SPoQ/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);
}
Selenjutnya cari kode </head>, lalu letakkan kode dibawah ini diatas kode </head>.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

Nb : Jika sebelumnya sobat telah memasang scipt jQuery ini lewati saja langkah diatas

Kemudian Klik Simpan Template.

Langkah Kedua

Buatlah sebuah posting blog dengan judul terserah (Misalnya : Daftar Isi Blog Lengkap Atau Table Of Content )

Selanjutnya Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.

<script type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/daftarisimasko

lis.js"></script><script src="http://namablogsobat.blogspot.com/feeds/posts/summary?max-results=1000

&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Ubah namablogsobat dengan url blog anda
Selanjutnya Klik Publish Post.

Itu tadi tutorial kali ini. Semoga bermanfaat.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Membuat Daftar Isi Otomatis Di Blog
Ditulis oleh Naufal Ammar
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://nsfreehack.blogspot.com/2013/03/membuat-daftar-isi-otomatis-di-blog.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

WARNING !

Komentar Anda Tidak Boleh Mengandung Unsur :

1. Penghinaan Atau Pelecehan Pada Blog Ini.
2. Spaming ( Komentar SPAM )
3. Link Aktif,dsb

Mohon Maaf Jika Anda Melanggar Peraturan Maka Komentar Anda Tidak Akan Ditamplikan