Cara Membuat Daftar Isi Per Label dengan Sroll Box
Untuk membuat daftar isi per label
dengan scroll box di sidebar blog, kita dapat menggunakan
dua cara. Cara yang pertama adalah dengan membuatnya secara manual.
Sedangkan cara yang kedua kita bisa menggunakan sebuah script.
Setiap cara memiliki kelebihan dan kekurangannya masing-masing.
Bila kita membuat daftar isi
secara manual, maka kita harus memasukkan link dari judul-judul posting
satu per satu. Hal ini akan membutuhkan banyak waktu untuk
mengerjakannya jika link judul posting yang harus dimasukkan sudah cukup
banyak. Namun, dengan cara manual ini tidak begitu memperlambat loading
blog.
Sedangkan jika kita menggunakan sebuah
script, maka waktu yang
diperlukan akan lebih singkat. Namun, pemasangan
script ini
berpotensi memperlambat
loading blog.
Script ini saya
dapat dari
Blog Viky dengan perubahan di bagian
scroll box-nya.
Dengan
script ini kita dapat membuat daftar isi berdasarkan satu
label saja atau beberapa label sekaligus.
Script ini akan
menempatkan posting terbaru pada urutan teratas.
Untuk membuat daftar isi
berdasarkan satu label tertentu saja, silakan perhatikan
langkah-langkahnya di bawah ini.
1. Setelah Sobat masuk di Blogger, klik Rancangan
> Elemen Laman > Tambah Gadget.
Kemudian pilih HTML/JavaScript.
2. Berikan judul, lalu copy
kode di bawah ini dan paste di Konten.
<div style="overflow:auto; width:auto; height:100px;
padding:5px; border:1px solid #e6e4e3;">
<ol>
<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>
<ol>
<script src="http://www.klikmunadi.blogspot.com/feeds/posts/default/-/Jejaring%20Sosial?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>
- width:auto;
menunjukkan lebar scroll box akan mengikuti lebar sidebar.
- height:100px;
menunjukkan tinggi scroll box setinggi 100
piksel. Silakan diganti angkanya untuk mengubah tingginya.
- border:1px
solid #e6e4e3;
menunjukkan garis keliling (border) scroll box bergaya solid setebal 1 piksel berwarna #e6e4e3. Silakan
disesuaikan dengan keadaan template Sobat.
- <ol>
menunjukkan numbered list, kalau ingin menjadi bullet list
silakan diganti dengan <ul>.
- Ganti klikmunadi.blogspot.com
dengan alamat blog Sobat.
- Ganti Jejaring%20Sosial dengan
label yang Sobat inginkan. Penulisan label harus sesuai dengan yang
tertera di blog. Perhatikan huruf besar-kecilnya dan spasi diganti
dengan %20.
3. Klik tombol
SIMPAN.
4. Pindahkan elemen tadi ke tempat yang Sobat inginkan.
5. Klik tombol
SIMPAN.
Script di atas hasilnya akan menjadi seperti di bawah ini.
Jika ingin menampilkan lebih dari satu label, silakan ditambahkan
script
untuk labelnya. Misalnya saya akan menampilkan label
Alexa dan
Link
maka script-nya akan menjadi seperti di bawah ini.
<div style="overflow:auto; width:auto; height:100px;
padding:5px; border:1px solid #e6e4e3;">
<ol>
<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>Alexa</h3>
<ol>
<script
src="http://www.klikmunadi.blogspot.com/feeds/posts/default/-/Alexa?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
<br/>
<h3>
Link</h3>
<ol>
<script
src="http://www.klikmunadi.blogspot.com/feeds/posts/default/-/Link?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>
Hasilnya menjadi seperti di bawah ini.
Cara di atas merupakan cara yang menggunakan
script. Jika Sobat
tertarik untuk menggunakan cara manual seperti yang saya terapkan pada
blog ini, silakan simak langkah-langkahnya di bawah ini. Sebelum
mengikuti cara ini, silakan Sobat
memasang widget daftar isi karya Abu Farhan seperti
yang terpasang di blog ini.
1. Buka daftar isi blog Sobat.
2. Blok posting-posting dari label mana yang akan di ambil. Misalnya
saya mengambil label Jejaring Sosial juga seperti contoh menggunakan
script.
Setelah diblok, lalu klik kanan dan pilih
Lihat Kode Sumber Teks
yang Dipilih. (Saya menggunakan Firefox 5.0)
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.
<ol><li><a
href="http://klikmunadi.blogspot.com/2011/06/cara-buat-facebook-page-dan-pasang-like.html">Cara
Buat Facebook Page dan Pasang Like Box di Blog</a></li>
<li><a
href="http://klikmunadi.blogspot.com/2011/05/cara-membuat-akun-facebook.html">Cara
Membuat Akun Facebook</a></li>
<li><a
href="http://klikmunadi.blogspot.com/2011/06/cara-membuat-akun-twitter.html">Cara
Membuat Akun Twitter</a></li>
<li><a
href="http://klikmunadi.blogspot.com/2011/06/cara-membuat-akun-di-salingsapacom.html">Cara
Membuat Akun di SalingSapa.com</a></li>
<li><a
href="http://klikmunadi.blogspot.com/2011/07/cara-menghapus-sebuah-halaman-facebook.html">Cara
Menghapus Sebuah Halaman Facebook</a></li>
<li><a
href="http://klikmunadi.blogspot.com/2011/02/salingsapacom-situs-jejaring-sosial.html">Salingsapa.com,
Situs Jejaring Sosial Islami</a></li></ol>
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://klikmunadi.blogspot.com/2011/06/cara-buat-facebook-page-dan-pasang-like.html">Cara
Buat Facebook Page dan Pasang Like Box di Blog</a></li>
<li><a
href="http://klikmunadi.blogspot.com/2011/05/cara-membuat-akun-facebook.html">Cara
Membuat Akun Facebook</a></li>
<li><a
href="http://klikmunadi.blogspot.com/2011/06/cara-membuat-akun-twitter.html">Cara
Membuat Akun Twitter</a></li>
<li><a
href="http://klikmunadi.blogspot.com/2011/06/cara-membuat-akun-di-salingsapacom.html">Cara
Membuat Akun di SalingSapa.com</a></li>
<li><a
href="http://klikmunadi.blogspot.com/2011/07/cara-menghapus-sebuah-halaman-facebook.html">Cara
Menghapus Sebuah Halaman Facebook</a></li>
<li><a
href="http://klikmunadi.blogspot.com/2011/02/salingsapacom-situs-jejaring-sosial.html">Salingsapa.com,
Situs Jejaring Sosial Islami</a></li></ol>
</div>
9. Klik tombol
SIMPAN.
10. Pindahkan elemen ke tempat yang Sobat inginkan.
11. Klik tombol
SIMPAN.
Hasilnya menjadi seperti di bawah ini.
