Cara Membuat Scrollbox pada Blogger

Informasi seputar blogging kali ini adalah cara membuat scrollbox pada Blogspot. Fungsi dari scrollbox ini sendiri sebenarnya sudah ada dalam gadget standar blogspot, yaitu Links, dimana kita bisa menambahkan link dari url blog teman atau url lainnya. Kelemahan dari gadget ini menurut saya adalah jika kita mempunyai daftar link yang banyak, maka otomatis dalam tampilan di blog juga akan memanjang ke bawah, malah kadang pada batas dimana list artikel kita sudah habis, daftar link kita belum habis.
Kita memang bisa memotongnya dengan membatasi jumlah link yang tampil, tapi karena dibatasi ini maka tidak semua link terlihat.

Fungsi dari scrollbox ini sendiri sebenernya sama dengan gadget Links yaitu membatasi, hanya saja yang dibatasi bukan jumlah linknya tapi ukuran (tinggi) dari daftar link kita, sebagai gantinya, akan diberikan scroll tersendiri dari daftar ini. Untuk lebih jelasnya langsung saja kita mulai, pertama kita masuk ke panel kontrol blog dan masuk ke tab Layout dan sub tab Page Elements.

Kemudian tentukan dimana kita akan menempatkan scrollbox ini, biasanya diletakkan pada bagian sidebar. Setelah itu tambahkan gadget HTML/JavaScript pada bagian yang kita pilih.

Langkah berikutnya masukkan script berikut ini pada gadget HTML/Javascript.

view sourceprint?




Keterangan untuk script di atas adala sebagai berikut. Height itu menunjukkan tinggi dari scrollbox yang kita buat, dan width adalah lebarnya (untuk lebar samakan dengan lebar dari sidebar yang kita pilih). Link 1, Link 2, Link 3 dan seterusnya adalah nama dari Link dan alamat url link 1, 2, 3, dan seterusnya adalah url tujuan. Untuk lebih jelasnya tentang fungsi link, bisa membaca artikel tentang Hyperlink. Dan hasilnya akan tampak seperti scrollbox saya yang di atas.
Anda bisa mengkopi contoh kode htmlnya seperti berikut:

<br /> <br /> <div style="text-align: left;"><div style="overflow:auto; height:170px; width:300px;border:1.5px solid #cccccc"></div><div style="text-align: left;"><ul></div><div style="text-align: left;"><li><a href="http://blogpakdani.blogspot.com/2010/05/present-simple.html"target="_blank">1. Unit 1 Present Simple</a></li></div><div style="text-align: left;"><li><a href="http://blogpakdani.blogspot.com/2010/05/present-progressive-i-am-doing.html"target="_blank">2. Unit 2 Present Progressive</a></li></div><div style="text-align: left;"><li><a href="http://blogpakdani.blogspot.com/2010/05/present-simple-or-present-progressive.html"target="_blank">3. Unit 3 Present Simpel or Progressive</a></li></div><div style="text-align: left;"><li><a href="http://blogpakdani.blogspot.com/2010/05/subject.html"target="_blank">4. Subject</a></li></div><div style="text-align: left;"><li><a href="http://blogpakdani.blogspot.com/2010/05/verb.html"target="_blank">5. Verb</a></li></div><div style="text-align: left;"><li><a href="http://blogpakdani.blogspot.com/2010/05/complement.html"target="_blank">6. Complement</a></li></div><div style="text-align: left;"><li><a href="http://blogpakdani.blogspot.com/2010/05/modifier.html"target="_blank">7. Modifier</a></li></div><div style="text-align: left;"><li><a href="http://blogpakdani.blogspot.com/2010/05/list-of-irregular-verbs.html"target="_blank">8. Irregular Verbs</a></li></div><div style="text-align: left;"><li><a href="http://blogpakdani.blogspot.com/2010/05/present-tense-i-am-doing-i-do-with.html"target="_blank">9. Unit 4 Present Tense-Future Meaning</a></li></div><div style="text-align: left;"><li><a href="http://blogpakdani.blogspot.com/2010/06/going-to-i-am-going-to.html"target="_blank">10. Unit 5 Going to (do)</a></li></div><div style="text-align: left;"><li><a href="http://blogpakdani.blogspot.com/2010/06/will.html"target="_blank">11. Unit 6 Will</a></li></div><div style="text-align: left;"><li><a href="http://blogpakdani.blogspot.com/2010/06/will-2.html"target="_blank">12. Unit 7 Will (2)</a></li></div><div style="text-align: left;"><li><a href="http://blogpakdani.blogspot.com/2010/06/will-or-going-to.html"target="_blank">13. Unit 8 Will or going to?</a></li></div><div style="text-align: left;"><li><a href="http://blogpakdani.blogspot.com/2010/06/unit-9-when-and-if-sentences.html"target="_blank">14. Unit 9 When and If sentences</a></li></div><div style="text-align: left;"><li><a href="http://blogpakdani.blogspot.com/2010/06/unit-10-will-be-doing-and-will-have.html"target="_blank">15. Unit 10 Will be doing and Will have done</a></li></div><div style="text-align: left;"></ul></div><div style="text-align: left;"></div></div><div style="text-align: left;">

Selamat mencoba sobat

.::Related Posts: