Sunday, October 04, 2009

Cara Membuat Blogroll Scrolling Otomatis & Blogroll Scrolling Manual

  

Saat ini sedang tren Blogroll di blogspot, kalau kalian blog walking maka akan ditemui ada blogger yang memasang gadget blogroll ini untuk menarik pengunjung/ pembaca, good trick.

Walaupun sebenarnya Blogroll ini ada beberapa kekuranganya terutama yang mengunakan metode scrolling Otomatis, yaitu : 

1. Ketika anda memiliki banyak link text/banner yang ditambahkan ke dalam Blogroll, yang posisi link/ banner terletak dibawah akan lama terlihat.

2. Bila sudah kebanyakan banner di blogroll akan berpengaruh pada loading blog.


Berikut ini 2 metode Blogroll yang sering kita temukan pada blogspot.

1. Blogroll Scrolling Otomatis.

Dari bawah bergerak ke atas, ada juga juga yang dari kanan bergerak ke kiri atau sebaliknya


LINK BANNER
wong284

LINK TEXT
A
Nama Blog 1
Nama Blog 2
B
Nama Blog 3
Nama Blog 4
C
Nama Blog 5
Nama Blog 6
--- END ---

Ini kodenya.

<marquee direction="up" onmouseover="this.stop()" width="300" onmouseout="this.start()" scrollamount="2" height="100"> <br/> <center> <br/><b>LINK BANNER</b><br /> <br/> <a href="#"><img alt="ecaknyo" width="150" src="http://images.cooltext.com/953583.gif" height="15" /></a> <br/><br /> LINK TEXT<br /><br /> A <br /> <a href="#">Nama Blog 1</a><br /> <a href="#">Nama Blog 2</a><br /> B <br /> <a href="#">Nama Blog 3</a><br /> <a href="#">Nama Blog 4</a><br /> C <br/> <a href="#">Nama Blog 5</a><br /> <a href="#">Nama Blog 6</a><br /> <b>--- END ---</b> </center>


Keterangan.

Scroll Amount : Atur nilai ini untuk membuat gerakan scrolling menjadi cepat atau lambat, semakin besar nilainya maka semakin cepat gerakan scrolling nya
# : URL blog.
Alt : Isi saja dengan nama blog.
Img src : URL image banner
Width : Menentukan lebar banner.
Height : Menentukan tinggi banner.


Cara membuatnya sbb :

1. Login blogger > Tata letak.

2. Add Gadget > Html / Javascripts > Copy paste kode di atas dan simpan.

3. Reload blog, kemudian lihat tampilannya di blog anda.


Contoh kode html banner + link.

 <a> href="URL Blog"><img src="URL Logo Blog" alt="Judul/Nama Blog" width="150" height="15"/></a>


Contoh kode html link text.

 <a> href="URL Blog">Judul/ Nama Blog</a>




2. Blogroll Scrolling Manual.


Kodenya.

<br /> <b>LINK BANNER</b> <br /> <a href="http://images.cooltext.com/953583.gif"><img src="URL Logo Blog" alt="Judul/Nama Blog" height="15" width="150" /></a> <br /> <br /> LINK TEXT <br /> A <br /> <a href="URL Blog">Nama blog 1</a> <br /> <a href="URL Blog">Nama blog 2</a> <br /> <br /> B <br /> <a href="URL Blog">Nama blog 3</a> <br /> <a href="URL Blog">Nama blog 4</a> <br /> <br /> C <br /> <a href="URL Blog">Nama blog 5</a> <br /> <a href="URL Blog">Nama blog 6</a> <br /> <br /> <b>--- END ---</b> </center>


Cara pengerjaannya sama seperti yang sudah saya jelaskan sebelumnya.
Tips. Silahkan modifikasi blogroll sesuai keinginan anda.


Selamat Mencoba!.