Membuat Daftar Isi Dengan Jquery Diblogspot

Membuat Daftar Isi Dengan Jquery Diblogspot
Apa perlunya daftar isi di blog ?

Atau apa manfaatnya memasang daftar isi pada blog? Mungkin anda punya pertanyaan seperti ini. Anda tidak sendiri. Memang blogger tidak menyediakan fasilitas ini secara langsung melalui dasbor anda. Mungkin nanti mereka harus menyiapkan widget daftar isi agar setiap pemilik blogger bisa menambahkan daftar isi pada blog blogger mereka dengan cepat.

Daftar isi pada blog blogger mempunyai banyak keuntungan, baik bagi anda sebagai pemilik blog maupun bagi orang yang mengunjungi blog anda. Tidak mengherankan banyak orang yang ingin memasang daftar isi pada blog mereka, tetapi belum tahu caranya bagaimana. Nah, pada lensa ini anda akan bisa melihat bagaimana caranya memasang daftar isi pada blog blogger anda. Silakan menyimak. Dan terima kasih telah berkunjung.

Membuat Daftar Isi Dengan Jquery Diblogspot - Seperti yang anda ketahui, Daftar Isi sangat berperan penting dalam blog. Daftar isi bisa memudahkan pengunjung untuk menemukan artikel yang dicarinya pada suatu blog. Ok deh gan, Kali ini saya mau share lagi Tentang Daftar Isi Otomatis Dengan Efek Jquery. Daftar isi ini sangat menawan dan cantik sekali, mampu memikat hati para blogger. liat gan screenshootnya. Lumayan cantik bukan ? itulah efek efek yang mampu diciptakan Jquery,dan bukan itu saja saya juga memposting cara membuat daftar isi yang lain yang dibuat oleh Abu Farhan.Agan bisa coba mana yang cocok untuk agan.ok mari kita mulai saja dipraktekin mantranya berikut :

Login ke Blogger
Kemudian Cari Rancangan - Edit Html - expand widget template.
Kemudian letakkan kode berikut diatas 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/AVvXsEhntDzlxOFjD7DigAgQ34kU7wN3dmUTVibZliIqD4cQJ9qGFXJs_XTD4EAJwNDT04qQgtHeUpSUhe7UGDCY_zCjfN0hI6iRVyIwR_-dl8FQFk3mUQ3R8fUnsFjXWh_CcXl_2wExPlVlLlA/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/AVvXsEh7ZJfRCa8n-NdQrduH5eJODKQ7dPkXvGzpeQ4WAZovhvlzaaD4wEIe5tmFmSflEupxoeGthyphenhyphenMVfbPW_TC5EWQvc-Xs6wC1yFGieKE3bw9b57S8KxIu30FBcEPQQZgMvhE-UJdVLfH0djg/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/AVvXsEjSbYdaCHHTDcM4pUz16f5key_EW8TvuAoVkujyfj4FAz6wugG5lbcHgXPQnj_pRUYRC2Y0bm9hwNVxZ_zqDCd9nvEFNKbDRuNC5yjvK5Hor0Ms4KRyTPDiWKga6SxLtn55h2ax4bp-UbU/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);
}

Jika sudah , tahap berikutnya adalah Meletakkan kode berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Kemudian Save Template.
Selanjutnya meletakkan Widgetnya di Sidebar :
Langsung klik Tata Letak - Add Widget - Html/Javascript
Kemudian Copy paste kode berikut :

<script type="text/javascript" src="http://cayun-code.googlecode.com/files/Acc1.js"></script>
<script src="http://tanpa-isi.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Nb :
Ganti tulisan yang berwarna biru dengan alamat blog sobat.
Kemudian Save.

Semoga Cara Membuat Daftar Isi Otomatis Dengan Jquery Diblogspot bermanfaat.