บทความนี้ก็เป็น 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 เป็นต้น
ปล. หากท่านใดหาโค้ดไม่เจอโปรดสอบถาม และแจ้งบล็อกของท่านเอาไว้ผมสามารถช่วยแนะนำให้ได้ด้วยความยินดีครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น