Virtual Science Headline Animator

Virtual Science

Search

Saturday, February 12, 2011

Cara Membuat Scroll Widget/Sidebar

Cukup sederhana.. Salah satunya adalah menambahkan script script php atau html. Fungsinya adalah  untuk meminimalisir pemakaian sidebar agara kelihatan lebih rapi, tidak terlalu ramai atau memperpendek sebuah widget yang isinya banyak yang bikin pusing orang melihatnya…. Untuk yang ahli PHP dan JavaScript pasti sudah hafal diluar kepala… 


Berikut scriptnya :
<div><div style=”width:150px;height:320px;overflow:auto;border:1px solid #cccccc;background-color:# ffffff;text-align:center;padding:5px;”>
Anda bisa memodifikasi untuk ukuran width (warna merah) untuk lebar widget, height (warna biru) untuk tinggi widget, border (warna ungu) untuk garis tepi widget, background-color (warna pink) untuk mengganti warna background/latar widget dan seterusnya. Untuk warna background, kodenya anda bisa lihat disini.
Cara Pemakaiannya, anda cukup menambahkan script ini diatas script/isi utama widget text sidebar anda. Misalnya untuk Link Exchange di blog saya seperti ini :
<div><div style=”width:150px;height:320px;overflow:auto;border:1px solid #cccccc;background-color:# ffffff;text-align:center;padding:5px;”>
<p align=”center”><a href=”http://belajar-program.co.cc/target=”_blank”>Belajar Ilmu Pemrograman</a></p>
<p align=”center”><a href=”http://www.bulang.co.cc/target=”_blank”> Bulaeng Group</a></p>
<p align=”center”><a href=”http://jackysan.wordpress.com/target=”_blank”>Jackysan Masih Belajar</a></p>
<p align=”center”><a href=”http://www.wisatasekotong.co.cc/target=”_blank”>Wisata Sekotong</a></p>
<p align=”center”><a href=”http://www.sastralokal.co.cc/target=”_blank”>Kumpulan Sastra Lokal</a></p>
Bisa juga menggunakan script ini untuk membuatnya bergulung / scroll otomatis :
<div><marquee direction=”up” width=”105″ onmouseover=”this.stop()” scrollamount=”2″ onmouseout=”this.start()” height=”200″ align=”left”>
Isi 1
Isi 2
Isi 3
Isi 4
Isi 5
dst…
</marquee></div>
Tulisan “UP” yg berwarna merah bisa anda ganti menjadi “LEFT”  untuk gerakan ke kiri.
Untuk blog wordpress (http://namablog.wordpress.com), ada script untuk membuat sebuah widget Daftar Isi blog dengan bentuk scroll. Copy Paste script berikut ke widget text blog anda :
<div style=”overflow:auto;border:1px solid #cccccc;width:200px;height:310px;text-align:left;”>[archives]</div>
Silahkan ganti teks yang warna merah sesuai selera dan ukuran widget/sidebar blog anda.
Tampilannya bisa anda lihat DISINI.


Sumber :Iklankodeq

No comments:

Post a Comment