Kita akan membuat widget link list ini mempunyai efek text yang berjalan ke atas. Untuk hasil akhirnya bisa dilihat seperti pada widget "My Friends" di sidebar blog saya ini.
Nah langsung saja memulai modifikasinya. Tapi sebelum itu tentu harus menambahkan widget link list terlebih dulu pada blog kita.
* Buka dashboard blogger.
* Layout -> Page Elements.
* Klik "add a gadget".
* Pilih "Link List".
* Isi dengan beberapa link blog teman.
* klik save
Setelah selesai menambahkan widget, saatnya kita mulai memodifikasi. Berikut langkah-langkahnya :
1. Buka dashboard blogger.
2. Layout -> Edit HTML ( *Untuk jaga-jaga sebaiknya back up dulu template blogmu ).
3. Centang " Expand Widget Templates "
4. Cari kode di bawah ini.
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
5. Setelah ketemu, ganti kode di atas dengan kode di bawah ini.
<marquee align='center' direction='up' height='200' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='95%'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='new'><data:link.name/></a></li>
</b:loop>
</ul>
</marquee>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='new'><data:link.name/></a></li>
</b:loop>
</ul>
</marquee>
Catatan :
- Kode yang berwarna merah adalah kode yang ditambahkan pada kode asli.
- Marquee adalah kode yang membuat efek teks berjalan.
- direction='up' : merupakan arah kemana efek tersebut bergerak, misal jika ganti "up" menjadi "down" maka arahnya akan menuju ke bawah. Bisa juga diganti dengan "left" atau "right".
- height='200' : adalah tinggi kotak widget. Bisa diganti sesuai selera.
- onmouseout='this.start()' onmouseover='this.stop()' : adalah events saat cursor mouse berada di atas daftar link maka efek berjalan akan berhenti namun jika kita memindahkan cursor ke tempat lain maka teks akan berjalan seperti semula.
- target='new' : digunakan untuk membuat tab baru pada browser ketika link di klik. Sehingga, pengunjung tidak meninggalkan halaman blog kamu saat mengeklik link di blogroll.
6. Jangan lupa save untuk melihat perubahannya. Selesai
Gimana mudah bukan untuk membuat blogroll ?. Dengan cara di atas kita tidak usah repot saat ingin menambahkan link baru ke dalam blogroll .
Terima kasih buat tutorial-jitu yang memberi saya inspirasi untuk posting artikel ini.
0 komentar:
Posting Komentar