Membuat Daftar isi Per Label dengan Scroll Box 3


Pada posting kemarin kita belajar membuat daftar isi per label dengan scroll box di sidebar menggunakan sebuah script. Jika Sobat tertarik untuk menggunakan cara amanual, silakan simak langkah-langkahnya di bawah ini.
1. Buka daftar isi blog Sobat.

2. Blok posting-posting dari label mana yang akan di ambil. Misalnya saya mengambil label Download, juga seperti contoh menggunakan script. Setelah diblok, lalu klik kanan dan pilih Lihat Kode Sumber Teks yang Dipilih. 

<ol><li>
<a href="http://khazaam-khazaam.blogspot.com/ 
2011/12/bird-funny-burung-cantik-di-dekstop.html">
Bird Funny, Burung dekstop</a></li>
<li><a href="http://khazaam-khazaam.blogspot.com/
2011/12/conversi-file-pdf-ke-word.html">
Conversi File PDF ke WORD</a></li>
<li><a href="http://khazaam-khazaam.blogspot.com/
2011/12/mengembalikan-file-terhidden-dengan.html">
Hidden file Tool 2.0</a></li>
<li><a href="http://khazaam-khazaam.blogspot.com/
2011/12/bagi-temen-teman-yang-suka-m.html">
Karaoke dengan VanBasco's</a></li>
<li><a href="http://khazaam-khazaam.blogspot.com/
2012/01/memperbaiki-kualitas-mp3.html">
Memperbaiki Kualitas MP3 dengan Quality Modifier</a></li>
<li><a href="http://khazaam-khazaam.blogspot.com/
2011/11/mengembalikan-file-yang-terhidden.html">
Mengembalikan file yang terhidden</a></li>
<li><a href="http://khazaam-khazaam.blogspot.com/
2012/02/software-hanso-player.html">
Software Hanso Player</a>
- <strong><em><span style="color: rgb(255, 0, 0);">New !!
</span> </em></strong></li></ol>
3. Copy semua teks yang muncul di jendela Sumber DOM yang Dipilih.

4. Masuk ke akun Blogger Sobat.

5. Klik Rancangan > Elemen Laman > Tambah Gadget.

6. Pilih HTML/JavaScript.

7. Beri judul, paste kode tadi di Konten. Silakan diedit dan hapus kata-kata yang tidak diperlukan (seperti kata "New" dan lain-lain) sehingga susunannya akan menjadi seperti di bawah ini.

8. Kemudian berikan kode untuk scroll box-nya, sehingga hasilnya akan menjadi seperti ini.
<div style="overflow:auto; width:auto; height:100px;
padding:5px; border:1px solid #e6e4e3;">
 
<ol><li>
<a href="http://khazaam-khazaam.blogspot.com/ 
2011/12/bird-funny-burung-cantik-di-dekstop.html">
Bird Funny, Burung dekstop</a></li>
<li><a href="http://khazaam-khazaam.blogspot.com/
2011/12/conversi-file-pdf-ke-word.html">
Conversi File PDF ke WORD</a></li>
<li><a href="http://khazaam-khazaam.blogspot.com/
2011/12/mengembalikan-file-terhidden-dengan.html">
Hidden file Tool 2.0</a></li>
<li><a href="http://khazaam-khazaam.blogspot.com/
2011/12/bagi-temen-teman-yang-suka-m.html">
Karaoke dengan VanBasco's</a></li>
<li><a href="http://khazaam-khazaam.blogspot.com/
2012/01/memperbaiki-kualitas-mp3.html">
Memperbaiki Kualitas MP3 dengan Quality Modifier</a></li>
<li><a href="http://khazaam-khazaam.blogspot.com/
2011/11/mengembalikan-file-yang-terhidden.html">
Mengembalikan file yang terhidden</a></li>
<li><a href="http://khazaam-khazaam.blogspot.com/
2012/02/software-hanso-player.html">
Software Hanso Player</a>
- <strong><em><span style="color: rgb(255, 0, 0);">New !!
</span> </em></strong></li></ol>
</div>
 
Hasilnya menjadi seperti di bawah ini.
Semoga Bermanfaat.
Terima Kasih Untuk Semua Pengunjung/Pembaca KhaZaAm. Semoga Bermanfaat
Diposting oleh
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)