Imej Rollover
Sila lihat Demo
1.Log in ke Blogger Dashboard--->Design/Layout--->Edit HTML
2.Cari kod ]]></b:skin>
3.Copy dan paste kod dibawah ni SEBELUM/DI ATAS kod ]]></b:skin>
<style type='text/css'>
*{ padding:0; margin:0;} body{ font:100% normal Arial, Helvetica, sans-serif;}
.rollover_img { width: 280px; height: 150px; background-image: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCZlePksGwiIBKZvYnZZ47dNaEk0teNMIMGW3qn2VR9WnRk49A2NoQuE0XqJBWkTzfIWxgNdv3TVoIAD7xUTqzpvTiQeASrUapWfvb6SF-UGG-vEU5S9A6x7if1y2SsuUnVV_QwEM9MPfN/s1600/Tree-tree-nature-0094aa4db7_big.jpg); background-position: top; -moz-border-radius:10px; -webkit-border-radius:10px; border:10px solid #ccc; font:13px normal Arial, Helvetica, sans-serif; line-height:18px; float:left; margin:0 10px 10px 0; }
.rollover_img a { color: #fff; width: 280px; height: 150px; display: block; text-decoration: none; }
.rollover_img a:hover { background:#000; opacity:.60; filter:alpha(opacity=60); }
.rollover_img a span { display: none; width: 280px; padding:5px; }
.rollover_img a:hover span { display: block; }
</style>
*{ padding:0; margin:0;} body{ font:100% normal Arial, Helvetica, sans-serif;}
.rollover_img { width: 280px; height: 150px; background-image: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCZlePksGwiIBKZvYnZZ47dNaEk0teNMIMGW3qn2VR9WnRk49A2NoQuE0XqJBWkTzfIWxgNdv3TVoIAD7xUTqzpvTiQeASrUapWfvb6SF-UGG-vEU5S9A6x7if1y2SsuUnVV_QwEM9MPfN/s1600/Tree-tree-nature-0094aa4db7_big.jpg); background-position: top; -moz-border-radius:10px; -webkit-border-radius:10px; border:10px solid #ccc; font:13px normal Arial, Helvetica, sans-serif; line-height:18px; float:left; margin:0 10px 10px 0; }
.rollover_img a { color: #fff; width: 280px; height: 150px; display: block; text-decoration: none; }
.rollover_img a:hover { background:#000; opacity:.60; filter:alpha(opacity=60); }
.rollover_img a span { display: none; width: 280px; padding:5px; }
.rollover_img a:hover span { display: block; }
</style>
*korang boleh ubah kod merah dengan kod gambar yang korang nak
4.Save template
Ok,sekarang apabila korang nak buat imej rollover ni semasa di edit pos/HTML/Javascript,tulis macam ni:
<div class="rollover_img">
<a title="Demo" href="#"> <span>You see nothing but I see something.Nothing I see is something you saw.Nothing is everything. </span> </a></div>Kod pink hanya sekadar tajuk,nak tulis boleh tak tulis pun boleh.Kod ungu adalah apa yang korang nak tulis.Kod hijau adalah yang terpenting sekali,jangan tersalah tulis
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.