ใส่ Background ให้กับ Link ใน Blogger


สอนทำ blogger


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

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

hackublog (แบบแรกมีพื้นหลัง)

hackublog (แบบที่สองไม่ปรากฎพื้นหลัง)



วิธีติดตั้ง

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 ทำโดย

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

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;
  }



ก็ให้เติมชุดโค้ดต่อไปนี้ลงไปก่อนหน้าโค้ด ]]></b:skin> เหมือนในกรณีที่ 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 เป็นต้น


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

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

  1. ไม่เข้าใจครับ

    กรณีที่ 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;
    }
    งง

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

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

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