Flashing Link Animation: Panduan BoGGeR Cara Membuat Teks Link Animasi

Tutorial Blogger spesial : Cara termudah membuat flashing link yang "ditanggung" kompatible dengan semua browser yang ada adalah seperti berikut :

1. Login ke Blogger.
2. Lakukan pengamanan template terlebih dahulu (Lihat di Special Tutorials)
3. Simpan KODE CSS di atas KODE ]]></b:skin>
4. Gunakan xHTML saat posting dilakukan.

Contoh bentuk Flashing Link Animation :

Red Background


Blue Background


Lime Background


Green Background


Yellow Background


Colorfull Background

KODE CSS - Flashing Link Animation :

<style type="text/css">
.RedFL{background:transparent url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/bg-effects/flash-link-effect/images/th_bgsGR_RedFlashingLink.gif);padding:0 3px;border-top:1px dotted orange;border-bottom:1px dotted orange;}
.BlueFL{background:transparent url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/bg-effects/flash-link-effect/images/th_bgsGR_BlueFlashingLink.gif);padding:0 3px;text-decoration:none;font-weight:bold;color:black;border-top:1px dotted orange;border-bottom:1px dotted orange;}
.LimeFL{background:transparent url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/bg-effects/flash-link-effect/images/th_bgsGR_LimeFlashingLink.gif);padding:0 3px;text-decoration:none;font-weight:bold;color:black;border-top:1px dotted orange;border-bottom:1px dotted orange;}
.GreenFL{background:transparent url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/bg-effects/flash-link-effect/images/th_bgsGR_GreenFlashingLink.gif);padding:0 3px;text-decoration:none;font-weight:bold;color:black;border-top:1px dotted orange;border-bottom:1px dotted orange;}
.YellowFL{background:transparent url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/bg-effects/flash-link-effect/images/bgsGR_YellowFlashingLink.gif);padding:0 3px;text-decoration:none;font-weight:bold;color:black;border-top:1px dotted orange;border-bottom:1px dotted orange;}
.ColorfullFL{background:transparent url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/bg-effects/flash-link-effect/images/th_bgsGR_ColorfullFlashingLink.gif);padding:0 3px;text-decoration:none;font-weight:bold;color:black;border-top:1px dotted orange;border-bottom:1px dotted orange;}
.RedFL{background:transparent url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/bg-effects/flash-link-effect/images/th_bgsGR_RedFlashingLink.gif);padding:0 3px;text-decoration:none;font-weight:bold;color:black;border-top:1px dotted orange;border-bottom:1px dotted orange;}
.RedFL:hover, .BlueFL:hover, .LimeFL:hover, .GreenFL:hover, .YellowFL:hover, .ColorfullFL:hover{text-decoration:none; background:#222;color:#FF0000;}
li{line-height:30px;}
</style>

xHTML - Flashing Link Animation :

<a class="RedFL" href="http://gubhugreyot.blogspot.com">Red Background</a>
<a class="BlueFL" href="http://gubhugreyot.blogspot.com">Blue Background</a>
<a class="LimeFL" href="http://gubhugreyot.blogspot.com">Lime Background</a>
<a class="GreenFL" href="http://gubhugreyot.blogspot.com">Green Background</a>
<a class="YellowFL" href="http://gubhugreyot.blogspot.com">Yellow Background</a>
<a class="ColorfullFL" href="http://gubhugreyot.blogspot.com">Colorfull Background</a>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

» Happy Blogging - gubhugreyot «