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.







September 9th, 2010 at 14:11
Infonya membantu sekali mas,, Link Back ya
September 10th, 2010 at 01:06
Thanks mas ariawijaya, blog ku jadi lumayan berkat baca-baca disini.
tetap semangat dan tularkan ilmu pada sesama
Salam
Triwahyu Bambang A
October 22nd, 2010 at 15:20
Thx mas infonya.
November 20th, 2010 at 20:27
ok sob terimakasi ilmunya,bisabuat gwe bwlajar eh..
November 27th, 2010 at 01:19
Mas Script Buat Daftar Isi RSS Scrollbox
Punya Ga ?
Ko Aku Cari 2 Berbayar Semua
Ada Yang Gratisan Tapi Ga Masuk/Kliatan Daftar isinya
Tolong Bantu ya
Komen Ja Di Blogku
Ato Ga email Ja Iam_sevent_dayz@yahoo.co.id
December 11th, 2010 at 15:15
thanks gan…salam sejahtera
February 24th, 2011 at 10:07
info bagus… cuma sy mau tanya, bagaimana kalo gesernya kesamping? bukan ketas dan kebawah?
March 7th, 2011 at 15:34
thanks infonya gan,,,salam
June 15th, 2011 at 16:01
ini dy yg sy cari2. thx bro ;)
June 25th, 2011 at 15:56
salam…terima kasih infonya sungguh berguna