Author : UnknownTidak ada komentar
Kali ini kita akan coba membuat daftar isi otomatis pada satu kategori tertentu. Untuk lebih jelasnya, coba sobat lihat daftar isi di sidebar paling atas di blog ini.
Trik seperti ini sebenarnya bisa sobat lakukan secara manual dengan cara memasukkan secara manual link - link artikel sobat , namun seperti biasa, waktu sobat mungkin akan sedikit terkuras. Untunglah jika sobat hanya memiliki sedikit artikel.. bagaimana jika banyak?? wah. bisa pegel ni jarinya.. hehe
Widget ini di lengkapi scroll yang berfungsi menghemat halaman sobat, jadi jangan perlu takut kalau - kalau tidak muat lamannya karna kebanyakan artikel. Bagi sobat yang tertarik untuk membuat daftar isi otomatis pada label tertentu silahkan ikuti tutorial berikut.
Cara Membuat Daftar Isi Otomatis Untuk Label Tertentu :
1. Log in ke akun blog sobat.
2. Klik Design --> Lay Out --> Add Gadget --> HTML/Javascript
3. Masukkan kode berikut ke dalam kotak yang di sediakan dan berikan judul sesuka hati sobat.
<script style="text/javascript">function showrecentposts(json){for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}document.write('<li><a href="'+posturl+'">'+posttitle+'</a>'+'<br>')}}</script>
<ul><script style="text/javascript">var numposts=8;var numchars=100;</script></ul>
<ul><script style="text/javascript">
var numposts=100;
var numchars=100;
</script>
<script src="http://blog-ook.blogspot.com/feeds/posts/default/-/Life%20Style?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
<ul><script style="text/javascript">var numposts=8;var numchars=100;</script></ul>
<ul><script style="text/javascript">
var numposts=100;
var numchars=100;
</script>
<script src="http://blog-ook.blogspot.com/feeds/posts/default/-/Life%20Style?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
Keterangan :
- var numposts=100; menunjukkan jumlah postingan yang akan tampil, bisa diganti dengan jumlah yang sobat mau.
- <ul> dan diakhiri dengan </ul> : adalah Bullet atau Gambar List , sobat bisa menggantinya menjadi Number List dengan kode <ol> dan diakhiri dengan </ul>
- Ganti http://blog-ook.blogspot.com dengan Url blog sobat.
- Ganti Life%20Style dengan label yang sobat inginkan. Perhatikan penulisan labelnya. sesuaikan dengan yang tertera, jika satu huruf saja salah penulisannya, makan daftar isinya tak akan muncul. %20 adalah Spasi jadi ganti spasi dengan kode %20.
Contoh lainnya:
<div style="overflow:auto; width:auto; height:100px; padding:5px;border:1px solid #e6e4e3; font-size:15px;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://tateluproject.googlecode.com/files/label-post.js'></script>
<ol>
<script src="http://blog-ook.blogspot.com/feeds/posts/default/-/Life%20Style?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://tateluproject.googlecode.com/files/label-post.js'></script>
<ol>
<script src="http://blog-ook.blogspot.com/feeds/posts/default/-/Life%20Style?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>
Keterangan :
Untuk menampilkan daftar isi lebih dari satu label, misalnya untuk label Android dan Antivirus , maka kode yang harus sobat pakai adalah seperti berikut.
<div style="overflow:auto; width:auto; height:100px; padding:5px;border:1px solid #e6e4e3; font-size:15px;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://tateluproject.googlecode.com/files/label-post.js'></script>
<h3>Android</h3>
<ol>
<script src="http://kangdansen.blogspot.com/feeds/posts/default/-/BLOG?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
<br/>
<h3>Antivirus</h3>
<ol>
<script src="http://kangdansen.blogspot.com/feeds/posts/default/-/SEO%20BLOG?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://tateluproject.googlecode.com/files/label-post.js'></script>
<h3>Android</h3>
<ol>
<script src="http://kangdansen.blogspot.com/feeds/posts/default/-/BLOG?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
<br/>
<h3>Antivirus</h3>
<ol>
<script src="http://kangdansen.blogspot.com/feeds/posts/default/-/SEO%20BLOG?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>
tambahan :
- Sesuaikan tulisan yang berwarna biru dengan label yang sobat gunakan.
Sumber : http://bagas2090.blogspot.com/2012/02/cara-membuat-daftar-isi-di-sidebar.html
http://www.webdadan.com/2012/02/cara-membuat-daftar-isi-per-label.html
Artikel Terkait
Posted On : Sabtu, 16 Juni 2012Time : 00.07
