บทความนี้ก็เป็น trick ง่าย ๆ ในการใส่ลูกเล่นให้กับ LinK ต่าง ๆ ในบทความ หรือในบล็อกของคุณ

สำหรับตัวอย่างสามารถดูได้จากลิงค์ด้านล่าง





วิธีติดตั้ง

Log in เข้าไปที่ blogger และไปที่ แผงควบคุม >>รูปแบบ >> แก้ไข HTML



กรณีที่ 1 ถ้าต้องการให้ LINK ของทั้งบล็อกมีพื้นหลัง

1.1 CSS ที่กำหนดแท็ก a หรือลักษณะลิงค์ต่างๆ ของบล็อก จะมีลักษณะคล้ายกับโค้ดต่อไปนี้


ตัวอย่างโค้ดที่กำหนดลักษณะของ Link ใน Blogger
a{color:#6F0000;text-decoration:none;text-shadow:0.5px 0.5px 0.5px #ffffff}

หรือบางบล็อกอาจจะเป็น
a:link {
color:$linkcolor;
text-decoration:none;
}


หรือ
a, a:visited {
color: #B2265D;
text-decoration: none;
}


ซึ่งแต่ละ Template ก็จะแตกต่างกันไป แบบไม่ตายตัว



1.2 การใส่ background ให้กับแท็ก a ทำโดย

ค้นหาโค้ด ]]> และวางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว

a[href^="http://"] {
background: url(http://upic.me/i/dr/linkbg.gif) center right no-repeat;
padding-right: 15px;
}


บันทึกแม่แบบก็จบขั้นตอนครับ


หมายเหตุ โค้ด [href^="http://"] ที่เติมเข้าไปจะทำให้ Link ที่ขึ้นต้นด้วย http:// มีพื้นหลังทั้งหมด
ถ้าหากต้องการให้ Link ที่ขึ้นต้นด้วย http://www มีพื้นหลัง ก็ให้แก้โค้ดเป็น [href^="http://www"] ซึ่งจะทำให้ Link ที่มีพื้นหลังเป็น Link ที่ขึ้นต้นด้วย http://www เท่านั้น




กรณีที่ 2 หากต้องการให้ Link มีพื้นหลังเฉพาะในส่วนบทความเท่านั้น

ก่อนอื่นเราจะต้องหาโค้ดให้พบก่อนว่า โค้ด CSS ที่กำหนดลักษณะในส่วนของบทความในบล็อกของเรานั้นเป็นอย่างไร

ซึ่งสมมติว่าเราพบว่าโค้ด CSS ที่กำหนดลักษณะในส่วนของบทความในบล็อกของเราเป็น

.post {
background: #FFFFFF;
margin: 0px 0px 10px 0px;
padding: 10px 10px 10px 10px;
border: 1px solid #C0C0C0;
}



ก็ให้เติมชุดโค้ดต่อไปนี้ลงไปก่อนหน้าโค้ด ]]> เหมือนในกรณีที่ 1

.post a[href^=http://www] {
background: url(http://upic.me/i/dr/linkbg.gif) center right no-repeat;
padding-right: 15px;
}



หมายเหตุ สำหรับบาง template ก็อาจจะพบโค้ด CSS ที่กำหนดลักษณะในส่วนของบทความคล้ายกับโค้ดต่อไปนี้

.post-content หรือ .post-body หรือ .post-box หรือ .entry เป็นต้น


ปล. หากท่านใดหาโค้ดไม่เจอโปรดสอบถาม และแจ้งบล็อกของท่านเอาไว้ผมสามารถช่วยแนะนำให้ได้ด้วยความยินดีครับ

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

 
Top