Gambar Samar Ketika Disorot Mouse
Ada ada saja trik untuk membuat blog tampil lebih menarik. Salah satunya adalah dengan cara membuat samar gambar saat mouse berada di atasnya (disorot)
Hanya dua langkah sederhana saja:
1. Langkah pertama
-Login ke blogger, langsung ke tata letak (tata letak sekarang berubah menjadi design/rancangan) lalu EDIT HTML
-Cari kode ]]></b:skin>
-Copy kode berwarna biru di bawah ini dan paste di atas kode ]]></b:skin>
-Save Template
2. Langkah Kedua
-Siapkan Gambar yang telah diberi link ke suatu tempat (dalam bentuk kode HTML)
contohnya:
Maka terlihat seperti di bawah ini:
Hanya dua langkah sederhana saja:
1. Langkah pertama
-Login ke blogger, langsung ke tata letak (tata letak sekarang berubah menjadi design/rancangan) lalu EDIT HTML
-Cari kode ]]></b:skin>
-Copy kode berwarna biru di bawah ini dan paste di atas kode ]]></b:skin>
.linkopacity img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.linkopacity:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}
.linkopacity:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}
-Save Template
2. Langkah Kedua
-Siapkan Gambar yang telah diberi link ke suatu tempat (dalam bentuk kode HTML)
contohnya:
<img src="http://i0006.photobucket.com/albums/0006/pbhomepage/Emo/th_2-1.jpg"></a>
Maka terlihat seperti di bawah ini:
Jika ingin menerapkan effect ini tambahkan kode berikut <a href="#nogo" class="linkopacity">
didepannya, sehingga menjadi seperti ini:
contohnya menjadi sepertti inii: didepannya, sehingga menjadi seperti ini:
ok ne tip y...
BalasHapustp ada otomotis ga, coal y law tiap posting harus masukkin kode itu..
ditunggu jwbn y..
yg ditambahkan hanya kode pada gambarnya tu saja :) ut post selanjutanya
BalasHapussementara kode biru d atas tidak usah lagi
TERIMAKASIH ILMUNYA
BalasHapussemoga bermanfaat
BalasHapusKalo sebaliknya bagaimana?
BalasHapustidak disorot samar kalo disorot jadi jelas..
makasih...
.linkopacity img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}
BalasHapus.linkopacity:hover img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
kodenya dibalik saja menjadi seperti di atas
Akhirnya ketemu juga trik ini..., makasih banyak sob..
BalasHapusnice inpohh...