ขั้นตอนการทำมีดังต่อไปนี้
ขั้นตอนที่ 1 ไปที่ รูปแบบ|แก้ไข HTML แล้วเลือกขยายแม่แบบเครื่องมือ (Layout|Edit HTML -> check the "Expand Widget Templates" check box)
ขั้นตอนที่ 2 ค้นหาคำว่า </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 ให้ทำการเพิ่มโค๊ดหลังจากใส่รูปภาพในเนื้อหาดังนี้
โค๊ดปรกติ
<a href="http://blogger-assistant.blogspot.com" target="_blank" alt="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtQl3-70RX2xZFMQjMgd5arD4N8X_QVOEfWKHh6s5XDsB5cQisHyWdXhsJy9Z-rbBSAf6ZBNzOo4ff3gV7s42RaKrwOGKsb3WKhlHyqC4-jy23AnJuN1xc0UuXeHt9S3LVynZQYq4Od1K5/s200/%E0%B9%80%E0%B8%82%E0%B8%A1%E0%B8%99%E0%B8%B4%E0%B8%88+%E0%B8%88%E0%B8%B2%E0%B8%A1%E0%B8%B4%E0%B8%81%E0%B8%A3%E0%B8%93%E0%B9%8C%28%E0%B9%81%E0%B8%9E%E0%B8%99%E0%B9%80%E0%B8%84%E0%B9%89%E0%B8%81%29.jpg"/></a>
*โค๊ดสีชมพูคือที่อยู่ของรูปภาพ
โค๊ดที่ต้องเพิ่ม class=linkopacity จะได้เป็น
<a class=linkopacity href="http://blogger-assistant.blogspot.com" target="_blank" alt="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtQl3-70RX2xZFMQjMgd5arD4N8X_QVOEfWKHh6s5XDsB5cQisHyWdXhsJy9Z-rbBSAf6ZBNzOo4ff3gV7s42RaKrwOGKsb3WKhlHyqC4-jy23AnJuN1xc0UuXeHt9S3LVynZQYq4Od1K5/s200/%E0%B9%80%E0%B8%82%E0%B8%A1%E0%B8%99%E0%B8%B4%E0%B8%88+%E0%B8%88%E0%B8%B2%E0%B8%A1%E0%B8%B4%E0%B8%81%E0%B8%A3%E0%B8%93%E0%B9%8C%28%E0%B9%81%E0%B8%9E%E0%B8%99%E0%B9%80%E0%B8%84%E0%B9%89%E0%B8%81%29.jpg"/></a>
ขั้นตอนที่ 6 ทำการบันทึกบทความ แล้วดูที่หน้าเพ็จ จะเห็นว่าฟังก์ชั่น Image Hover ทำงานแล้ว
บทความ
0 ความคิดเห็น:
แสดงความคิดเห็น