Download koleksi Free Software di sini: Freeware atau di sini: Software Download

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.

Bookmark and Share

Tulisan terkait :
  1. Membuat Marquee Blogroll pada Blogspot
  2. Membuat Shortcut Back to Top pada Blogspot
  3. Membuat Daftar Isi atau Table Of Contents (TOC) pada Blogspot
  4. Membuat “Read more …” pada Blogspot
  5. Menambahkan Gadget pada Header Blogspot

:, , , , ,

16 komentar:

16 Responses to “Membuat Scrollbox pada Blogspot”

Pages: « 1 [2] Show All

  1. 11
    Victor Says:

    @ 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.

  2. 12
    kesit Says:

    ta cobanya bos, kebetulan saya memang butuh scroll box nya buat efisiensi tempat.

  3. 13
    Membuat Marquee Blogroll pada Blogspot | Trik Koneksi Internet dan Blogging | Ariawijaya.com Says:

    [...] 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 [...]

  4. 14
    gak mutu Says:

    sudah lama mencari tutorial ini …. akhirnya ketemu disini …. makasi … .

  5. 15
    asmanu Says:

    Bos salam kenalya…tutorialnya berguna banget nih buat pemula seperti saya,and mohon ijin ikutan buat scrollbox, makasih ya.

  6. 16
    ryo Says:

    makasih ya

Pages: « 1 [2] Show All

Leave a Reply


Join My Community at MyBloglog! Internet Blogs - BlogCatalog Blog Directory

Tag on Ariawijaya

Apple Axis bandwidth bandwidth monitor blog blogging Blogspot bluetooth Broom budaya CA-53 CDMA Dial-Up DKU-2 DKU-5 DNS driver modem eBuddy Facebook Firefox Fren Flash Unlimited Flexi Google GSM Haier Haier C700 Haier D1200P GSM IM3 internet keyword koneksi internet internet CDMA internet GSM MacBook Pro MacOS X mempercepat internet Mobi Mobile-8 modem modem hape modem ponsel modem usb Nokia 2865 Nokia 3110c Nokia 3220 Nokia 3230 Nokia 3500c Nokia 6230 Nokia 6270 Nokia 6585 Nokia E61 Nokia E71 Nokia E90 Nokia N70 Nokia N82 Nimbuzz Nokia Nokia PC Suite Opera Opera Mini optimasi koneksi internet optimalisasi Firefox optimalisasi modem pingtest sejarah Smart SEO Software Komputer Sony Ericsson SE G502 SE K750i SE K800 SE Z520i SE Z550i Starone tarif internet Telkomsel traffic Three trik Blogspot trik koneksi internet trik Wordpress WIFI Wordpress XL Yahoo Yogyakarta ZTE ZTE C261 ZTE MG880 ZTE S100

Creative Commons License
Ariawijaya.com by Victor Aria Wijaya is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
Based on a work at Ariawijaya.com.
Permissions beyond the scope of this license may be available at http://ariawijaya.com/about/.