Membuat daftar isi pada blog bertujuan agar pengunjung dengan mudah melihat artikel yang mereka suka.Membuat daftar isi yang menarik juga sangat disukai pengunjung blog, apalagi daftar isi tampilan nya sangat elegan dan keren.
Dengan animasi scroll kebawah yang akan mempermudah pencarian dan tidak memakan tempat pada halaman postingan . Daftar isi otomatis akan menampilkan posting blog terbaru tanpa perlu repot repot mengeditnya lagi.
<style type='text/css'>
#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/AVvXsEgpzsZWALyVwRgnJ_0k-Tg7jnFBS4FHqtcZ1VvUVshpefdrWINmqi4cs3JSkd2vFymSaHHZfKDG-eN83m0a7HmgoJw6h_-TgpbjRcUxSH5CpA-0wXepK0IzVvGjOejrzfa9MXZ9qwaKbkw/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/AVvXsEgwX8Lt7OgNAH5NM8WRMojZSsrM7S5QMNN8sj4nTQrsqAfH1tfm6an1RSQ80qhdmqQ07g_OO-1eJ5hwCWM43JWM-hWcQ4auXJ8Zhqkhni7iCis-6P6vIovaDm9EguKQzyT8Jodc_PH664w/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/AVvXsEgUmXcc2z2NlnMWLc9OML3SYC_8y_HV-AQIhNzq_5QRMyn-KhDgSGOgEPLb4YqILJPhl1ECVa98VOEUBseZoTckiHEL1i4A1FqN2V9nbCmncO_Y6Fni2ZDdSZLJJDpjtiTj_ji23cKZxyU/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); }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script>
<script src="http://ikepolsa.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
Dengan animasi scroll kebawah yang akan mempermudah pencarian dan tidak memakan tempat pada halaman postingan . Daftar isi otomatis akan menampilkan posting blog terbaru tanpa perlu repot repot mengeditnya lagi.
cara membuat daftar isi JQuery :
1.Login ke blogspot
2. Buatlah Entri Baru / postingan baru dan dengan label misalnya SERBA-SERBI BLOG
3. Pilih menu HTML , lalu copy paste kode dibawah ini. jika sudah carilah URL http://ikepolsa.blogspot.com/ lalu ganti dengan URL blog kamu<style type='text/css'>
#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/AVvXsEgpzsZWALyVwRgnJ_0k-Tg7jnFBS4FHqtcZ1VvUVshpefdrWINmqi4cs3JSkd2vFymSaHHZfKDG-eN83m0a7HmgoJw6h_-TgpbjRcUxSH5CpA-0wXepK0IzVvGjOejrzfa9MXZ9qwaKbkw/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/AVvXsEgwX8Lt7OgNAH5NM8WRMojZSsrM7S5QMNN8sj4nTQrsqAfH1tfm6an1RSQ80qhdmqQ07g_OO-1eJ5hwCWM43JWM-hWcQ4auXJ8Zhqkhni7iCis-6P6vIovaDm9EguKQzyT8Jodc_PH664w/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/AVvXsEgUmXcc2z2NlnMWLc9OML3SYC_8y_HV-AQIhNzq_5QRMyn-KhDgSGOgEPLb4YqILJPhl1ECVa98VOEUBseZoTckiHEL1i4A1FqN2V9nbCmncO_Y6Fni2ZDdSZLJJDpjtiTj_ji23cKZxyU/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); }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script>
<script src="http://ikepolsa.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
RSS Feed
Twitter
15.09.00
Unknown

Posted in
0 komentar:
Posting Komentar