ใส่ Effect ให้กับภาพ หรือ Image Hover Effect

Image Hover Effect รูปจะจาง ๆ และมันจะชัดเจนมากขึ้นเมื่อทำการเลื่อนเมาส์ไปที่ตำแหน่งของรูปภาพ

ขั้นตอนการทำมีดังต่อไปนี้

ขั้นตอนที่ 1 ไปที่ รูปแบบ|แก้ไข HTML

ขั้นตอนที่ 2 ใส่ code นี้หลัง </head> แล้ววางโค๊ดต่อไปนี้วางไว้ด้านบน

<style type="text/css">

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

</style>

ขั้นตอนที่ 3 ทำการบันทึกแม่แบบ

ขั้นตอนที่ 4 ไปที่การสร้างบทความใหม่

ขั้นตอนที่ 5 หลังจากใส่รูปภาพในเนื้อหาแล้ว ให้ copy code ข้างล่างทับ ของเดิม

   เช่น ของเดิมเป็น

               <a alt=""><img...........>

           ส่วนที่ต้อง copy ทับแทนคือ <a alt....> เท่านั้น

<a alt="Blogger Widgets" class="linkopacity" href="http://one2blogger.blogspot.com/" target="_blank">

.

.

<img border="0" height="320" r6="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu8KVo5WsmqSpc9fMKavJZwOuP88JEzy8FhJcITjkUU95t71-liDhneI2ndwDZI1kaHow27TTxwOXVSsB0zSdM7cEUJ_3u4VeliqRMhoEiUKxaRtHWJMUY0MNBwm2rpBTycXZEUjzR_uk/s320/519354.jpg" width="247" /></a></div>

เสร็จแล้วครับ