4 วิธีในการปรับแต่ง Widget Style บน Blogger

สอนทำบล็อก วิธีทำ blogger บทความนี้ผมจะสอนให้ปรับแต่ง Style ของ widget บน Blogger ที่คุณต้องการให้มีลักษณะเฉพาะเจาะจง และต่างจาก Style ของ Widget อื่น ๆ

เทคนิคในการปรับแต่งนี้ผมได้เคยนำเสนอไปบ้างแล้วในบทความ  วิธีทำให้ Widget บน Sidebar มีสไตล์แตกต่างกัน  แต่ในบทความนี้จะทำให้ชัดเจนกว่าเดิม และปรับใช้ได้ง่ายขึ้น

ก่อนอื่นเลยคุณจะต้องทำการ backup แม่แบบเอาไว้เสียก่อน และควรทำทุกครั้งที่จะเข้าไปปรับแต่ง HTML


สมมติว่าในที่นี้ผมต้องการปรับแต่ง Widget ที่ชื่อว่าผู้ติดตาม

แต่ง blogspot

ขั้นแรกให้ Log in เข้าไปที่ blogger >> การออกแบบ >>  แก้ไข HTML (ยังไม่ต้องขยายแม่แบบเครื่องมือ) จากนั้นค้นหา id ของ Widget ที่คุณต้องการปรับแต่งโดยกดปุ่ม Ctrl พร้อมกับปุ่ม F ที่ Keyboard ของคุณแล้วใช้คำค้นว่า b:widget ซึ่งผลที่พบก็จะเป็นดังภาพ

วิธีแต่งบล็อก

คุณอาจจะพบ id ของ widget หลายๆ ชื่อ แต่ให้ค้นไปจนกว่าจะพบชื่อของ Widget ที่คุณต้องการปรับแต่ง ในที่นี้ผมต้องการปรับแต่ง Gadget ผู้ติดตาม ซึ่งถูกระบุด้วย id Followers1 เมื่อทราบ id ของ Widget ที่ต้องการปรับแต่งแล้ว ให้ดำเนินการต่อดังนี้



1. การแทนที่ Title ของ Widget ด้วยรูปภาพ
ในที่นี้ผมจะแทนที่ Title ของ Gadget ผู้ติดตามด้วย ซึ่งทราบแล้วว่ามี ไอดีเป็น Followers1 และภาพที่ได้เตรียมเอาไว้คือ

วิธีทำ blogspot

คุณสามารถใช้รูปใดก็ได้ตามต้องการ แต่ไม่ควรมีความสูงมากนัก เพราะนี่เป็นเพียง Header เท่านั้น (ควรสูงประมาณ 20-50px) เมื่อเตรียมภาพแล้วให้ทำการฝากไฟล์รูปภาพก่อนครับ ในที่นี้ URL ของภาพที่ผมเตรียมเอาไว้คือ
http://upic.me/i/l3/members.png
ต่อไปค้นหาโค้ด ]]></b:skin> แล้วทำการวางโค้ดต่อไปนี้ลงไปก่อนหน้าแล้วบันทึกแม่แบบ
#Followers1 h2{background:url(http://upic.me/i/l3/members.png) 0px 0px no-repeat;height:32px;text-indent:-999999px;overflow: hidden;}
คุณสามารถปรับแต่งตัวเลข 0px 0px เพื่อระบุตำแหน่งของรูปภาพได้ โดยตัวเลขตัวแรกคือระยะจากทางซ้ายมือ และตัวเลขตัวที่ 2 คือระยะจากด้านบน  ส่วนตัวเลข 32px คือความสูงของ title ของ widget คุณสามารถปรับแต่งได้เช่นกัน

เมื่อทำตามขั้นตอนแล้วบันทึก  ผลลัพธ์ที่ได้ก็จะมีภาพแทนที่ title ของ Widget Followers1  ดังที่เราต้องการ

Blogger Widget




2. การแทรก Icon เข้าไปใน Title ของ Widget

สำหรับการแทรก icon เข้าไปใน Title ของ Widget ทำได้คลายกับการแทนที่ Title ด้วยรูปภาพ นั่นคือคุณจะต้องเตรียมภาพที่เป็น icon ที่จะทำการแทรกลงไปเสียก่อน เช่นในที่นี้ผมได้เตรียม Icon ไว้ดังภาพ

Customize Blogger Widget
จากนั้นเข้าไปที่ การออกแบบ >>  แก้ไข HTML
ค้นหาโค้ด ]]></b:skin> แล้วทำการวางโค้ดต่อไปนี้ลงไปก่อนหน้า และบันทึกแม่แบบ 
#Followers1 h2{background:url(http://upic.me/i/4u/iconecomment32.png) 0px 0px no-repeat;height:32px;padding:5px 0px 0px 38px;} 

คุณสามารถปรับแต่งค่า padding:5px 0px 0px 38px;  ได้ตามความเหมาะสม โดยตัวเลข 4 ค่านี้หมายถึงระยะจากขอบนับจาก บน ขวา ล่าง และซ้าย ซึ่งเมื่อปรับแต่งแล้วผลที่ได้จะทำให้ widget ที่เราปรับแต่งจะมี Icon ที่เราได้กำหนดให้แทรกอยู่ใน Title ดังภาพด้านล่าง

สอนสร้างบล็อก



3. การใส่พื้นหลังให้กับ Widget ที่ต้องการ

เข้าไปที่ การออกแบบ >>  แก้ไข HTML
ค้นหาโค้ด ]]></b:skin> แล้วทำการวางโค้ดที่กำหนดพื้นหลังลงไปก่อนหน้าโค้ด ]]></b:skin> และบันทึกแม่แบบ 

ถ้าต้องการกำหนดพื้นหลังด้วยสีใช้โค้ด
#Followers1{background:#FF9AE6;}/*ในที่นี้เป็นสีชมพู*/
คุณสามารถปรับแต่งสีได้ตามใจโดยใช้เครื่องมือ Hex Color Finder

แต่ถ้าคุณต้องการใช้ภาพเป็นพื้นหลัง เช่นในที่นี้ผมใช้ภาพขนาดเล็กดังที่เห็นด้านล่างมาทำเป็น Background

ทำ blog

โค้ดที่ใช้ในการกำหนด Background กรณีนี้เป็น
#Followers1{background:#EEEDF2 url(http://upic.me/i/49/widgetbg.jpg) 0px 0px repeat-x;}
ผลที่ได้จะเป็นดังนี้

วิธีทำบล็อก และการปรับแต่งบล็อก

หมายเหตุ ถึงแม้ภาพพื้นหลังจะเป็นภาพขนาดเล็กแต่มีการสั่งให้ปรากฎซ้ำในแนวนอน repeat-x ภาพจึงพอดีกับ Widget นอกจากนี้ถึงแม้ภาพจะไม่ได้ปรากฎซ้ำในแนวตั้งแต่ส่วนที่ไม่มีภาพพื้นหลังก็จะมีสี เทา (รหัสสี #EEEDF2 ) ปรากฎแทน จึงทำให้ดูแล้วพื้นหลังเต็ม Widget พอดี

คุณสามารถศึกษาการใช้โค้ด Background เพิ่มเติมได้ที่
http://w3schools.com/css/css_background.asp





4. การจัดการ Layout ของแต่ละ Widget ที่ต้องการ

ถ้าคุณต้องการให้เนื้อหาในบทความมีระยะห่างจากขอบมากขึ้น ให้ใช้โค้ด
#Followers1{padding:5px;}
ผลลัพธ์
วิธีแต่ง blogspot


หรืออาจจะใช้โค้ด
#Followers1{padding:1px 5px 5px 20px;}
ผลลัพธ์
สร้าง blospot

ส่วนตำแหน่งในการวางโค้ดทำเช่นเดียวกับข้อ 1 - 3
ส่วนถ้าต้องการให้ widget นี้มีระยะห่างจาก element อื่น ๆ หรือ widget อื่น ๆ ก็ทำได้โดยการเพิ่มค่า margin เข้าไป เช่น

#Followers1{padding:1px 5px 5px 20px;margin:0 0 20px 0;}
ผลที่ได้
แต่งบล็อก



สำหรับการปรับแต่ง 4 รูปแบบการปรับแต่ง Widget Style ที่นำเสนอนี้เป็นเพียงแนวทางในการปรับแต่ง เมื่ออ่านแล้วลองปรับแต่งดูด้วยตัวเองอีกครั้งครับ ซึ่งถ้าหากปรับแต่งแล้วพบปัญหาใด สามารถสอบถามได้ที่บทความนี้หรือเข้าไปถามใน Forums ได้เลย  และเช่นเคยหากคุณคิดว่าบทความนี้เป็นประโยชน์ก็ฝากช่วยบอกต่อ ๆ กันไปด้วยนะครับ ขอบคุณครับ

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

  1. ขอนุญาต เซฟ ขอมูลลงเครื่องครับ จะได้มาอ่านทีหลัง แล้วมีเป็นหนังสือฃายมั๊ยครับ

  1. @ Vinayak-Vanich : บันทึกได้เลยครับ ไม่มีปัญหา แต่ถ้าจะนำไปเผยแพร่ต่อ วานให้เครดิตกันด้วยนะครับ เพราะว่าผมจดทะเบียนลิขสิทธิ์บล็อกนี้แล้วครับ

  1. ในการปรับแต่ง style ของ widget ส่วนล่าง ต้องใช้โค้ดอะไรคับ
    คือว่าผมอยากแบ่ง widget แต่ละอัน ออกเป็น 3 ส่วน บน กลาง และ ล่าง อะคับ
    เพราะที่ผมทำตามบทความนี้ มันสามารถปรับแต่งได้เฉพาะ บน กับ กลาง อะคับ

  1. คุณHackublogครับ ผมลองปรับหน้าตาของwidgetแล้ว แต่ไม่รู้วิธีปรับสีของ date header แยกกับ widget header ครับ รบกวนขอคำแนะนำด้วยครับ ขอบคุณครับ
    บงกช

    HealthAtWill.blogspot.com

  1. @ คุณบงกช : เพิ่ม CSS นี้เข้าไปครับ

    .date-header{
    background:#1E5F19;
    padding:5px;
    }

    ตรง background:#1E5F19; อาจจะใช้โค้ดสีอื่น ๆ ก็ได้ครับ

  1. หลังจากคลำหามานาน...ไม่ได้สักที ตอนนี้ได้แล้ว..ขอบคุณมากครับ

  1. ขอบคุณมากครับ ช่วยให้มีความรู้มากเลยครับ
    www.adv.li/1bta
    pooysb.blogspot.com

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

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

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