√ Cara Menciptakan Daftar Isi Dengan Jquery Di Blog

Daftar isi pada blog sangat penting sekali sebab sanggup memudahkan pengunjung untuk mengetahui atau mencari artikel keseluruhan pada sebuah blog. Pada kesempatan ini kita akan membahas cara menciptakan daftar isi dengan efek Jquery di blog.

Kelebihan daftar isi dengan Jquery ini yaitu pada tampilannya yang cukup menarik. Jika Anda ingin memasangnya di blog ikuti dan simak langkah-langkahnya berikut ini :

1. Login akun blogger Anda.
2. Pilih Template > Edit HTML > centang 'Expand Template Widget'.
3. Letakkan isyarat berikut diatas isyarat ]]></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/AVvXsEghoHy2TSzgrKrkCZm_1A8ynxjf4pzFJulXShms36Cd1p7VyXp-PhtIfgdPujrL_ln84q6tt-ZsE-n7n4pn8vtq-OVSYI1U9sBH19lHuKg_GhVJN4XtRQ6GOLJqMLxsgUffyCJ7L-6Q5LI/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/AVvXsEikC9ykHE2aErB23cT5l_ZIg8dbRmqcZOOE1rEfiMhoovbvt_DjCqp8UPDgnH5D2xzWfpqHIAymO8EyhjXtk5Qyo8wKMijqsjWjw1a-d1C05NdNqGMSP4FZcPt8wGKs-xUFW2lP-RvDF1k/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/AVvXsEjJTIYfxpNko-ScfQ8-QK8VAnje7GaqDtej41VkTRN9sFcTdyYqTjl-0tumwIHIzXsPkGVIaxq5KbZbMIgIfylh7Gwybmy6m4ou6WjAOGQpncCZY3bxZrkwwdo4nud0K5xBWRL8qfMI_0c/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);
}

4. Kemudian letakkan juga isyarat berikut diatas isyarat </head>

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

5. Setelah itu Simpan template.
6. Langkah selanjutnya yaitu memasang daftar isi di blog, letakkan isyarat dibawah ini pada HTML/JavaScript atau posting blog Anda pada mode HTML.

<script type="text/j4vascript" src="http://id-pemula-j4vascript.googlecode.com/files/Dafsis.js"></script> <script src="aciknadzirah.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Keterangan:
Ganti isyarat yang berwarna merah diatas dengan alamat URL blog Anda.

Nah, kini blog Anda sudah terpasang daftar isi dengan efek Jquery yang menarik.
Jika isyarat diatas tidak berfungsi lagi pada blog, Anda sanggup mencoba Cara Terbaru Membuat Daftar Isi pada Blog. Semoga bermanfaat!

Sumber http://id-pemula.blogspot.com