membuat widget daftar isi bentuk scroll page per label (part II )

Cara membuat widget scrolling per label di side bar anda, itulah yang akan kita bahas untuk kesempatan kali ini. Mungkin anda sering menemui masalah yaitu anda ingin menampilkan artikel-artikel hanya pada satu label saja. Dan mungkin yang anda lakukan adalah membuat satu-persatu link dari judul-judul artikel tersebut, seperti dalam posting saya terdahulu ( baca membuat daftar isi bentuk scroll page ) sepertinya cara ini kurang efektif dan terbilang ribet. Anda harus membuat link judul artikel setiap kali anda mempunyai artikel baru. Hal ini sangat memakan waktu anda. Padahal ada tutorial untuk menampilkan widget daftar isi dalam satu artikel saja

Dengan memanfaatkan script yang sederhana kita dapat membuat widget ini. Keuntungan menggunakan widget ini adalah kita tidak perlu membuat link judul artikel satu per satu. Karena widget ini akan memuat judul artikel otomatis tanpa kita membuat linknya satu per satu. Cukup praktis bukan,..?. Widget ini tidak hanya menampilkan 1 label, kita dapat memilihnya label yang ingin kita tampilkan. Yang membedakkan hanya artikel terbaru letaknya diatas, tidak dibawah. Namun, itu tidak menjadi suatu masalah, yang pasti menggunakan widget ini banyak untungnya daripada ruginya. Nah, bila anda tertarik untuk memasang widget ini di blog anda, ikuti saja tutorial dibawah ini.

Langkah-langkahnya sebagai berikut :

1. Seperti biasanya, anda harus login ke akun blogger anda
2. Lalu, anda akan masuk ke menu Dashboard / Dasbor
3. Setelah itu, langsung saja menuju ke menu Design / Rancangan.
4. Lalu, anda akan masuk ke menu Page Element / Elemen Laman.
5. Kemudian, klik link Add a Gadget / Tambah Gadget pada menu Edit Layout / Edit Tata Letak.
6. Lalu piliha add HTML/JavaScript
7. Saya mempunyai 2 kode contoh dibawah:

jika anda ingin memasukan satu label saja masukan kode dibawah ini  :

<div style="padding-right: 23px; padding-left: 0px; padding-bottom: 10px; overflow: auto; width: 147px; padding-top: 10px; height:170px" 1px="1px" solid="solid">

 <ul>

<script style="text/javascript">

var numposts = 100;

var standardstyling = true;

</script>

<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>

<ul>

<script src="http://www.vikytaufik.blogspot.com/feeds/posts/default/-/tips%20and%20trick?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>

</ul>

</ul></div>

Nah, kalau tutorial diatas untuk menampilkan daftar isi hanya dalam 1 label, kalau tutorial yang ini untuk menampilkan dalam 1 label lebih. Sebagai contoh, saya akan menampilkan artikel dari label Steak, Fried Chicken, dan Mie Goreng Jawa

<div style="padding-right: 23px; padding-left: 0px; padding-bottom: 10px; overflow: auto; width: 147px; padding-top: 10px; height:170px" 1px="1px" solid="solid">

 <ul>

<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>

<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>

<h3>Steak</h3>
<ul>
<script src="http://www.mrizki-form.co.cc/feeds/posts/default/-/Steak?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
<br/>

<h3>Fried Chicken</h3>
<ul>
<script src="http://www.mrizki-form.co.cc/feeds/posts/default/-/Fried%20Chicken?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
<br/>

<h3>Mie goreng Jawa</h3>
<ul>
<script src="http://www.mrizki-form.co.cc/feeds/posts/default/-/Mie%20goreng%20Jawa?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>

Keterangan  :

Ganti yang berwarna merah dengan ukuran box yang di kehendaki

Ganti yang berwarna biru dengan URL blog anda,

Ganti yang berwarna hijau dengan judul label anda kehendaki ( perlu diingat untuk mengunakan %20 jika label menggunakan spasi )

selamat mencoba,semoga berguna,...

jangan lupa comment ya,...

salam SSSS,..