Cara Membuat Scroll Box Pada Widget Sidebar

Label:
Seringkali saat aku mengunjungi suatu blog, blog tersebut menampilkan beberapa widget yang panjang kebawah. Sampai-sampai nye-croll nya cape sendiri dech.tersenyum lebartersenyum lebar Padahal pasti sang pemilik blog menampilkan widget tersebut agar dilihat pengunjung yang datang ke blog nya dong. Nah sebagai newbi seperti aku ini, tentu aku ga mau juga dong buat blog ku seperti itu yang menurut pendapat pribadiku kurang efektif (ini pendapatku loch…..)waduh!. Akhirnya kucari bagaimana agar suatu blog efektif dan tampilan widgetnya tidak terlalu panjang, dan jawabannya kudapat dengan memasang fungsi scroll pada widget yang tampilannya terlalu panjang.

Oh yah hampir lupa nich, adapun contoh beberapa widget yang cenderung berjejer ke bawah/memanjang misalnya adalah: arsip blog, label, feedjit, shout box dan lain-lain. Di bawah ini adalah salah satu contoh tampilan widget feedjit:



Okay sekarang sudah tahu kan maksud tulisan ku yang diatas, sekarang kita langsung aja gimana cara buat scroll box yang kumaksud.

1. Masuk ke blog sobat, dari halaman dasbor pilih Rancangan.


2. Kemudian klik Edit pada widget yang akan sobat beri scroll box.


3. Kemudian sisipkanlah kode dibawah ini kedalam widget tersebut, yang berwarna biru diawal dan warna merah diakhir.

<div style="overflow:auto; width:100%px; height:400px; padding:0px; border:1px solid #999999;">

</div>


4. Contoh detilnya seperti di bawah ini:

<div style="overflow:auto; width:100%px; height:400px; padding:0px; border:1px solid #999999;">
<center><script type="text/javascript" src="http://feedjit.com/serve/?vv=531&amp;tft=3&amp;dd=0&amp;wid=08439e9cd9b93dce&amp;pid=0&amp;proid=0&amp;bc=FFFFFF&amp;tc=000000&amp;brd1=012B6B&amp;lnk=135D9E&amp;hc=FFFFFF&amp;hfc=2853A8&amp;btn=D8E6DA&amp;ww=200"></script><noscript><a href="http://feedjit.com/">Feedjit Live Blog Stats</a></noscript></center>
</div>


Catatan:
* height:400px = tinggi kotak scroll
* padding:0px = jarak isi widget dari kiri dan atas
* border:1px = ukuran garis pinggir kotak
* #999999 = kode warna

5. Jika sudah, klik simpan


6. Hasilnya akan seperti dibawah ini:


hebat
Berhasil kan sobat? Semoga bermanfaat.tepuk tangan
Catatan:
Untuk membuat feedjit/live traffic feed seperti contoh gambar diatas dapat sobat klik disini.


Sumber: http://www.blogernas.co.cc

2 komentar:

Erianto Anas mengatakan...

Wah..selamat mas Hadi!
Sudah berhasil dan juga sudah langsung diposting tutorialnya. Saya juga ikut senang krn sumbernya mas Hadi cantumkan. Makasi ya!

Hadi Kurniawan mengatakan...

Sama2 mas, saya juga makasih buat tutorialnya dari mas Anas, sungguh sederhana tapi hasilnya memuaskan.

Posting Komentar

 
BLOG HADI © 2010 | Designed by Blogger Hacks | Blogger Template by ColorizeTemplates