Membuat Text Shadows Hover Link

Syalom..., Saat ini saya mau share tentang cara membuat Text Shadows Hoverlink.

Pada trik text shadows yang akan saya berikan ini cukup bagus dan cool abis, karena bisa diterapkan di text link di blog. langsung saja lihat demonya dibawah ini.

Demo (silahkan arahkan mouse Anda ke tulisan dibawah ini) :


DEMO
DS'09 Multi Media


DEMO
DS'09 Multi Media 


Kemudian bagaiamana membuatnya? berikut adalah penjelasannya.

Untuk membuat text shadows hover sebenarnya sangat mudah sekali, karena hanya menggunakkan CSS dan menerapkannya di kode HTML di Blog, berikut ini adalah CSS yang saya gunakan pada contoh diatas.

a .myshadows3, a .myshadows4  {
color: #DF0101;
text-decoration: none;
font-size : 20px;
text-shadow: 1px 1px #000, 2px 2px #0000FF, 3px 3px #0000FF, 4px 4px #0000FF, 5px 5px #0000FF, 6px 6px #0000FF, 7px 7px #0000FF, 8px 8px #0000FF;
}
a:hover .myshadows3 {
color: #DF0101;
text-decoration: none;
font-size : 40px;
line-height: 0.8em;
text-shadow: 1px 1px #FFFFFF, 2px 2px #FFFFFF, 3px 3px #FFFFFF, 4px 4px #FFFFFF, 5px 5px #FFFFFF, 6px 6px #FFFFFF, 7px 7px #FFFFFF, 8px 8px #FFFFFF, 9px 9px #FFFFFF, 10px 10px #FFFFFF, 11px 11px #FFFFFF;
}
a:hover .myshadows4 {
color: #000000;
text-decoration: none;
font-size : 40px;
line-height: 0.8em;
text-shadow: 1px 1px #FFFFFF, 2px 2px #FFFFFF, 3px 3px #FFFFFF, 4px 4px #FFFFFF, 5px 5px #FFFFFF, 6px 6px #FFFFFF, 7px 7px #FFFFFF, 8px 8px #FFFFFF, 9px 9px #FFFFFF, 10px 10px #FFFFFF, 11px 11px #FFFFFF;
}
a:hover .myshadows {
color: #DF0101;
text-decoration:
none;font-size : 20px;
text-shadow: 1px 1px #FFFFFF, 2px 2px #FFFFFF, 3px 3px #FFFFFF, 4px 4px #FFFFFF, 5px 5px #FFFFFF, 6px 6px #FFFFFF, 7px 7px #FFFFFF, 8px 8px #FFFFFF, 9px 9px #FFFFFF, 10px 10px #FFFFFF, 11px 11px #FFFFFF;
}
a:hover .myshadows2 {
color: #DF0101;
text-decoration:
none; font-size : 20px;
text-shadow: 1px 1px #FFFFFF, 2px 2px #FFFFFF, 3px 3px #FFFFFF, 4px 4px #FFFFFF, 5px 5px #FFFFFF, 6px 6px #FFFFFF, 7px 7px #FFFFFF, 8px 8px #FFFFFF, 9px 9px #FFFFFF, 10px 10px #FFFFFF, 11px 11px #F90;
}

Keterangan untuk kode yang saya beri warna merah adalah kode CSS untuk menerapkan text shadows. Kode diatas merupakkan kode yang diulang - ulang jadi shadows yang dihasilkan menjadi satu dan menghasilkan efek yang cukup menarik. 

Setelah CSS kemudian kode HTML untuk menerapkannya, seperti yang saya terapkan pada contoh berikut kodenya :

<a href="#">
<span class="myshadows"> DEMO  </span>
<span class="myshadows2"> Reportase El-Shadai</span>
</a>
<a href="#">
<span class="myshadows3"> DEMO  </span>
<span class="myshadows4"> Reportase El-Shadai  </span>
</a>

Untuk menerpakan kita cuma menambah kode untuk memanggil CSS seperti yang saya beri warna biru merupakkan kode pada CSS.

Berikut ini saya berikan tutorial untuk menerapkan di semua link blog Anda. Masuk ke akun Blogger Anda, kemudian ke design > Edit HTML > centang kotak kecil Expand Widget Templates disamping, masukkan kode berikut ini diatas kode ]]></b:skin>

a {
color:#4FCDFF;
position:relative;
text-decoration: none;
text-shadow:1px 1px #004F6F, 2px 2px #004F6F, 3px 3px #004F6F;
}
a:hover {
color:#4FCDFF;
left:-3px;
text-shadow:1px 1px #004F6F, 2px 2px #004F6F, 3px 3px #004F6F, 4px 4px #004F6F, 

5px 5px #004F6F, 6px 6px #004F6F;
top:-3px;
}

Note : Hapus kode CSS link sebelumnya atau yang asli di template Anda baru masukkan kode tersebut.

Kemudian Klik Save Template lihat hasilnya.

Jika hanya untuk link khusus bisa mnggunakan kode CSS yang mirip yang saya gunkkan diatas kode pertama tadi dan menggukan kode HTML yang saya jelaskan tadi. Untuk kode CSS bisa Anda ganti sesuai selera dan menyesuaikan warnanya. Kalau masih kurang jelas atau ingin mengoreksi bisa memberikan komentarnya, terimakasih.