Assalamu'alaikum sobat blogger. Pada kesempatan kali ini aku akan menyebarkan Tutorial Blog yaitu Cara Membuat Daftar Isi Otomatis dengan jQuery di Blog.
Daftar Isi atau yang sering kita sebut sebagai sitemap ialah sebuah halaman yang menampilkan seluruh konten blog kita, tak terlepas dari seo, kabarnya sitemap menyerupai ini juga sanggup mempermudah search engine untuk menemukan keberadaan seluruh konten kita pada dikala spider meng-crawl blog kita. Diluar meningkatkan efektifitas SEO, widget daftar isi ini juga sanggup menyuguhkan dan menampilkan seluruh postingan yang pernah dipublikasikan kepada pengunjung, pasalnya terkadang kalau seseorang menyukai topik suatu blog, maka dia akan terus gencar untuk berburu postingan di blog tersebut, dan dia akan bersifat curious atau ingin mengetahui semua artikel yang setopik dan sejalan dengan minatnya.
Lihat Screenshot dibawah :
Tertarik ? Oke deh, eksklusif saja Cara Membuat Daftar Isi Accordion :1. Login ke Blogger.
2. Pilih Laman.
3. Klik Laman Baru > Laman Kosong.
<div dir="ltr" style="text-align: left;" trbidi="on">Keterangan :
<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/AVvXsEiTsHnhMBtVefW4OUNgiEqHHiE0UHp4F7_UhGxjsCmQVxkqQUud3duhwXrJb41qvRwbdscSbT8FSa7gKvEZLuva7wODEIfpzgirIpw8g1mObxRKz7dHWlxJPfTFQC_qVXrQKwVZUCbPTvI/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/AVvXsEgD4k09js1nVd7KaJFdbmgDDG8Yl9DVEyiQUtaK7C9yADA6iqP6k19o0qzrMUWg8GLA9d1b5HM1JecgBjRau74wbH0VFOC-zpQurNjEl3hYoJnkRaIuUKlITQcwOf3JogfahjI4FiXncnA/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/AVvXsEjdb1JPK8Kpo-1neYo2ZmWmwqPYgNt-NhquqRLZh4c8oZvgHVin2e5d3JzrlkETQe2QZRlf3Yg0Jeb8KEPv05DzQ47AyCblwXSzzr-BSQGq_T4_ZX2ekMSmZB8jcQJqx2ckd8utDGquX4A/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/j4vascript"></script>
<script src="https://farhanshare-blogspot-com.googlecode.com/files/sitemap%20%281%29.js" type="text/j4vascript"></script><script src="http://www.nandarious.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
</div>
- ganti instruksi yang berwarna merah dengan URL blog anda.
- Jika di blog ada sudah mempunyai jquery, instruksi yg berwarna biru jangan ditulis.
Demikian gosip terbaru perihal cara menciptakan daftar isi otomatis dengan jquery di blog. Semoga bermanfaat :)
Sumber http://nandarious.blogspot.com
EmoticonEmoticon