Membuat Scrollbox pada Blogspot
Oleh Victor | Jul. 17, 2009 | Blogging, Tutorial & Trik Blogspot
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.
<div style="overflow:auto; height:250px; width:220px"> <ul> <li><a href="http://alamat url link 1/" target="_blank">Link 1</a></li> <li><a href="http://alamat url link 2/" target="_blank">Link 2</a></li> <li><a href="http://alamat url link 3/" target="_blank">Link 3</a></li> <li><a href="http://alamat url link 4/" target="_blank">Link 4</a></li> <li><a href="http://alamat url link 5/" target="_blank">Link 5</a></li> <li><a href="http://alamat url link 6/" target="_blank">Link 6</a></li> <li><a href="http://alamat url link 7/" target="_blank">Link 7</a></li> <li><a href="http://alamat url link 8/" target="_blank">Link 8</a></li> <li><a href="http://alamat url link 9/" target="_blank">Link 9</a></li> <li><a href="http://alamat url link 10/" target="_blank">Link 10</a></li> <li><a href="http://alamat url link 11/" target="_blank">Link 11</a></li> <li><a href="http://alamat url link 12/" target="_blank">Link 12</a></li> <li><a href="http://alamat url link 13/" target="_blank">Link 13</a></li> <li><a href="http://alamat url link 14/" target="_blank">Link 14</a></li> <li><a href="http://alamat url link 15/" target="_blank">Link 15</a></li> </ul> </div>

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.
Setelah itu kita simpan template dan lihat hasilnya pada halaman blog.

Sebagai contoh penggunaan ScrollBox ini dapat dilihat pada blog Money Online, pada bagian My Links di situ menggunakan script di atas.

Demikian tutorial sederhana ini, semoga bermanfaat. Selamat mencoba.
Tulisan terkait :
|
|










November 23rd, 2009 at 19:34
@ Gaul,
Sebenernya tutorial sederhana di atas sudah cukup jelas, tinggal copy script dan mengganti tulisan Link 1, 2, dst dengan judul link yang diinginkan, sedangkan untuk link tujuannya sendiri tinggal dicopykan mengganti http://alamat url link 1/ dan seterusnya.
November 30th, 2009 at 11:03
ta cobanya bos, kebetulan saya memang butuh scroll box nya buat efisiensi tempat.
December 6th, 2009 at 20:10
[...] dari atas ke bawah). Blogroll ini sendiri pernah saya bahas sebelumnya pada tulisan tentang membuat scrollbox, hanya saja dalam tulisan terdahulu scroll dilakukan secara manual dengan scroll bar di samping [...]
December 27th, 2009 at 04:22
sudah lama mencari tutorial ini …. akhirnya ketemu disini …. makasi … .
January 4th, 2010 at 21:11
Bos salam kenalya…tutorialnya berguna banget nih buat pemula seperti saya,and mohon ijin ikutan buat scrollbox, makasih ya.
February 19th, 2010 at 15:21
makasih ya