Cara Membuat Link Blogroll Berjalan

Posted by widha utawi idha Posted on Thursday, May 21, 2009 with 20 comments

Link blogroll biasa di panggil link teman alias alamat web/blog teman. Bagi teman yang sudah pada tukaran link pasti dah punya link blogrol duonx, bagi yang belum segera buat text area untuk sarana tukaran link. Agar link blogroll kita tampil lebih menarik coba saja link blogrollnya dibikin animasi berjalan/bergerak. Cara Membuat Link Blogroll Berjalan cukup mudah kok yaitu pakai merkuri, kalo dulu kan saya pernah membuat postingan tentang merkuri untuk membuat text berjalan sekarang saya mencoba menerapkanya dalam link blogroll.
Langsung saja disimak:

1.Link berjalan dari samping

Untuk link yang berjalan dari samping gunakan kode HTML sbb:

<marqueeonmouseout="this.start()"direction="left"align="center" scrollamount="2"height="100px"onmouseover="this.stop()"width="100%">LINK ANDA ATAU LINK


TEMAN</marquee>

2.Link bergerak dari bawah/atas

Untuk link berjalan dari bawah/atas gunakan kode HTML sbb:

<marqueedirection="up"onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2"style="border:1pxsolid #000; padding:5px;text-align:center;"width="150px"height="150px">LINK ANDA ATAU LINK TEMAN</marquee>

Berikut keterangan dari kode HTML diatas :

onmouseout="this.start()" --> text akan bergerak jika pointer tidak diarahkan ke text
direction="left" --> text akan bergerak ke atas. Bisa diganti dengan down, left, atau right.
align="center" --> text rata tengah
scrollamount="2" --> kecepatan bergerak (makin besar angka berarti makin cepat)
height="100px" --> batas vertikal marquee.
onmouseover="this.stop()" --> marquee akan berhenti ketika mouse diarahkan ke zona marquee tersebut.
width="200px" --> batas horizontal marquee.

Contoh link berjalan dari kiri adalah sebagai berikut:
INFO LOWONGAN TERBARU

Untuk tampilan punyak saya yang ada dihalaman blog ini adalah dengan kode seperti ini:

<marquee direction="up"onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2"style="border:5pxsolidcc0000; padding:5px;text-align: center;"width="150px"height="150px"><ahref="http://tutorialpenting.blogspot.com/"target="_blank">BELAJAR BARENG</a><ahref="http://khursusbisnisonline.blogspot.com/"target="_blank">Khursus Bisnis Online</a><ahref="http://infolowonganmu.blogspot.com/"target="_blank">INFOLOWONGANMU</a><ahref="http://tentangwonganteng.blogspot.com/"target="_blank">TENTANG wong_anTeng</a><ahref="http://doyanarziz.wordpress.com/">USIR SEPI ALA LASKAR PEMIMPI</a></marquee>

Tampilanya Nampak seperti ini:

BELAJAR BARENG
Khursus Bisnis Online
INFOLOWONGANMU
TENTANG wong_anTeng
USIR SEPI ALA LASKAR PEMIMPI

Bagi teman-teman yang mau berteman dengan saya silahkan dikopi kode saya ini:

<marqueedirection="up"onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2"style="border:5pxsolidcc0000; padding:5px;text-align:center;"width="150px"height="150px"><ahref="http://tutorialpenting.blogspot.com/"target="_blank">BELAJAR BARENG</a><ahref="http://khursusbisnisonline.blogspot.com/"target="_blank">Khursus Bisnis Online</a><ahref="http://infolowonganmu.blogspot.com/"target="_blank">INFOLOWONGANMU</a><ahref="http://tentangwonganteng.blogspot.com/"target="_blank">TENTANG wong_anTeng</a><ahref="http://doyanarziz.wordpress.com/">USIR SEPI ALA LASKAR PEMIMPI</a></marquee>

kemudian pasang di sidebar blog anda dengan cara masuk ke dasbor anda kemudian pilih menu template/tataletak kemudian pilih menu page element lalu add new page element kemudian pilih html/javascript, lalu paste kode diatas. OK Selamat Mencoba Membuat Link Blogroll dengan sentuhan merkuri yang menimbulkan efek animasi. Sukses untuk semua…….

Yuk…mari….
Yok….ndang yok……

Salam hormat dariku,