ใส่ Effect ภาพให้มีชีวิตด้วย CSS แบบง่ายๆ

การทำให้รูปภาพในบล็อกของเราดูมีสไตล์ มีด้วยกันหลายวิธีครับ แต่ในที่นี่จะสอนวิธีง่ายๆ โดยใช้ CSS โค้ด ซึ่งผลลัพธ์ที่ได้ออกมาจะทำให้รูปภาพมีชีวิตเหมือินตัวอย่างด้านล่างครับ


a1


วิธีการติดตั้ง

1. ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML  >> ขยายแม่แบบเครื่องมือ   

2. ค้นหาคำว่า </head>  (กด Ctrl + F ช่วยค้นหา) แล้ววางโค๊ดต่อไปนี้วางไว้ด้านบน

<style type="text/css">
a.hackublog img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.hackublog:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>



หรือค้นหา ]]></b:skin> แล้วแทนที่ด้วย

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

]]></b:skin>


บันทึกแม่แบบได้เลยครับ

3. ทุกครั้งที่ใส่โค้ดรูปให้ทำการเพิ่มโค๊ด class=hackublog   หลังจากใส่รูปภาพในเนื้อหาดังนี้


<a class=hackublog href="http://hackublog.blogspot.com" target="_blank" alt="ใสคำอธิบายรูป(ไม่ใส่ก็ได้ครับ)"><img src="ใส่ลิงค์ของรูปครับ"/></a>

เท่านี้รูปภาพก็จะดูมีชีวิตขึ้นมากแล้วครับผม

ตอนนี้มีความคิดเห็น : 3 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ถ้าอยากเอาออกต้องทำไงคะ คือมันติดมากับtemplates

  1. @LARKDESIGN

    ถ้าเป็น template ที่คุณใช้ให้เข้าไปแก้ไข HTML และแก้โค้ดต่อไปนี้
    1.
    img{border:0;max-width:100%}
    แก้เป็น
    img{border:0}

    2. ลบโค้ดต่อไปนี้ทิ้งไป
    .cover img:hover {
    opacity:0.99
    }
    .cover img {
    -moz-border-radius:2px;
    -moz-box-shadow:1px 1px 5px #787878;
    -webkit-border-radius: 2px;
    background:none repeat scroll 0 0 #E4E4E4;
    border:1px solid #FFFFFF;
    display:inline;
    margin:0 0 10px;
    padding:5px;
    opacity:0.69;
    }

  1. ได้แล้วค่ะ ขอบคุนมากๆเลย

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel