Membuat tampilan link berubah saat icon mouse diarahkan pada teks link

Merubah tampilan pada blog tidak terbatas hanya pada warna, icon, kolom komentar, guest book dll tapi juga bisa kita lakukan pada teks link, dengan sedikit penambahan kode script kita bisa merubah teks link / teks menjadi lebih besar atau dengan garis bawah pada saat icon mouse kita arahkan pada link tersebut.

caranya adalah sebagai berikut :
  • Login ke akun Blogger kamu.
  • Dari halaman dashboard, pilih Edit HTML.
  • Pada halaman Edit HTML, centang "Expand Template Widget", cari kode dibawah ini  ( tekan F3 untuk memudahkan mencari kode )
Untuk Judul Posting 

.post-title a:hover {
color:#cc0000;
 
Untuk teks link secara keseluruhan
 
body {
background: #0B3861;
background-image: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/headerimage-1.jpg);
background-attachment: none;
background-repeat: repeat-x;
background-position: none;
margin : 0;
padding : 0;
font : x-small Verdana, Arial;
text-align : center;
color : #BDBDBD;
font-size : small;
font-size : small;
}
a:link {
color : SkyBlue;
text-decoration : none;
}
a:hover {
color : #990000;

kode warna merah, menunjukan bahwa teks link tersebut akan berubah saat mouse icon diarahkan pada teks link tersebut ( warna, ukuran atau variasi lain yang di maksud )
pasang salah satu kode dibawah ini tepat dibawah kode diatas :

text-transform:uppercase;

text-transform:lowercase;

text-transform:capitalize;

Hasilnya :


contoh teks link uppercase

contoh teks link lowercase

contoh teks link capitalize


atau

text-decoration:underline;

text-decoration:overline;

text-decoration:line-through;

text-decoration:blink;

hasilnya :


contoh teks link overline

contoh teks link line-through
contoh teks link underline
contoh teks link blink

Note: The "blink" value is not supported in IE, Chrome, or Safari.


semoga bermanfaat..
selamat mencoba...!!
Labels: