วิธีใส่ Style สวย ๆ ให้กับ Label Gagdget บน Blogger

บทความนี้ผมจะสอนให้ปรับแต่ง Label Gadget (Gadget ป้ายกำกับ) บน Blogger ให้มี Style ที่สวยงามตามที่คุณต้องการ ซึ่งถ้าคุณได้ติดตามอ่านบทความในบล็อกนี้เป็นประจำก็จะเห็นว่าผมได้เคยนำเสนอการปรับแต่งป้ายกำกับไปแล้ว 2 แบบคือ ปรับแต่ง Label Gadget ให้เป็นแบบ Flash Animation และ เปลี่ยน Label Gadget ให้เป็นเมนูแบบ Dropdown ส่วนในบทความนี้ก็จะนำเสนอการปรับแต่งให้เป็นแบบ Tag Cloud และใส่สีสันตามใจคุณได้ด้วย

ผลลัพธ์ที่ได้จากการปรับแต่ง Label Gadget ด้วยวิธีในบทความนี้คุณสามารถดูได้จากภาพ  หรือดูจาก Label Gadget ที่บล็อกของผม

สอนทำบล็อก วิธีปรับแต่ง Label gadget บน blogger
วิธีปรับแต่ง Label Gadget บน Blogger


ขั้นที่ 1 หากคุณยังไม่ได้ติดตั้ง Gadget ป้ายกำกับ ก็จะต้องติดตั้งบนบล็อกเสียก่อนโดย (ถ้ามีแล้วไม่ต้องติดตั้งใหม่)


Log in Blogger เข้าไปที่  >> ไปที่แผงควบคุม >> รูปแบบ >> องค์ประกอบของหน้า

วิธีทำ blogger และวิธีแต่ง blogspot

จากนั้นเพิ่ม Gadget ป้ายกำกับในส่วนที่ต้องการ

วิธีสร้าง blogspot วิธีแต่ง blogger

และตั้งค่าต่าง ๆ ตามภาพด้านล่าง (เพื่อความสวยงาม)

สอนทำ blogger และสอนทำ blogspot

ขั้นที่ 2 เมื่อบันทึกการติดตั้ง Gadget ในขั้นที่ 1 แล้ว  ไปที่  >> ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML

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

/* Styles Label Gadget By www.hackublog.com */
#Label1{font-family:Arial,Helvetica,sans-serif;font-variant:small-caps;font-weight:bold;text-shadow:0.5px 0.5px 0.5px #fff}
.label-size-1 a {color:#FF0000;}
.label-size-2 a {color:#FF4300;}
.label-size-3 a {color:#520000;}
.label-size-4 a {color:#396F87;}
.label-size-5 a {color:#545454;}
#Label1 a:hover{ text-decoration:underline;color:#000 }

แนวทางการปรับแต่ง CSS Style

2.1 Label1 เป็น id ของ Gadget ป้ายกำกับ คุณสามารถใส่ Background ลักษณะอักษร เส้นขอบเพิ่มเติมได้ตามใจ แต่คุณจะต้องมีพื้นฐาน CSS จึงจะปรับแต่งได้ดีครับ (ในที่นี้ผมได้ปรับแต่งไว้แล้วสามารถใช้ได้เลย)

 สอนปรับแต่ง blogger template

2.2 โค้ด
.label-size-1 a {color:#FF0000;} 
เป็นการกำหนดสีของ Label ที่มีขนาดเล็กที่สุดในที่นี้ผมใช้โค้ดสี #FF0000 ซึ่งคือสีแดงสด 

ในทำนองเดียวกันสำหรับโค้ด
.label-size-2 a {color:#FF4300;}
.label-size-3 a {color:#520000;}
.label-size-4 a {color:#396F87;}
.label-size-5 a {color:#545454;}
เป็นโค้ดที่กำหนดสีของ Label ที่มีขนาดใหญ่ขึ้นตามลำดับ ถ้าคุณต้องการปรับแต่งโค้ดสีผมแนะนำให้ใช้ Hex Color Finder ช่วย

หมายเหตุ ขนาดอักษณของ Label จะใหญ่หรือเล็กขึ้นอยู่กับจำนวนบทความที่อยู่ภายใต้ป้ายกำกับนั้น ๆ

2.3 โค้ด
#Label1 a:hover{ text-decoration:underline;color:#000 }
หมายถึง เมื่อนำเมาส์ไปอยู่เหนือป้ายกำกับแล้วจะมีเส้นใต้ปรากฎ และมีสีเปลี่ยนเป็นสีดำ  ถ้าไม่ต้องการให้มีเส้นใต้ก็เปลี่ยนโค้ดตรงนี้เป็น
#Label1 a:hover{ text-decoration:none;color:#000 }
เมื่อปรับแต่ง CSS Style ได้ตามความต้องการแล้ว ทำการบันทึกแม่แบบก็จบขั้นตอนการปรับแต่ง Label Gadget ให้สวยแหล่มกว่าเดิมมากมายครับ สุดท้ายหวังว่าบทความนี้คงจะถูกใจทุกคนนะครับ สวัสดีครับ

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

  1. รบกวนถามหน่อยคะว่าทำไมป้ายกำกับไม่ขึ้นในท้ายบทความ ทั้งที่ก็เช็คที่ป้ายกำกับของการตั้งค่าบทความในบล็อกแล้ว ขอบคุณคะ

  1. ถามต่อ..บางทีก็กำหนดให้ขึ้นท้ายบทความแต่ไปขึ้นที่ต้นบทความ งง ค่ะ

  1. @ ครูจูน : เนื่องจากผมยังไม่ทราบว่าปัญหาที่เกิดขึ้นกับบล็อกใด ? จึงให้คำแนะนำเบื้องต้นว่า "ให้ลองเข้าไปตั้งค่าที่
    แผงควบคุม >> รูปแบบ >> องค์ประกอบของหน้า และตั้งค่าตามคำแนะนำในรูปครับ
    รูปที่ 1
    http://upic.me/i/cq/labelsetting1.jpg
    รูปที่ 2
    http://upic.me/i/e3/labelsetting2.jpg

  1. สวัสดีครับ...นาน ๆ จะมารบกวนที
    มาทีไร ก็เจออะไรใหม่ ๆ ตลอดเลย
    รอบนี้อยากถามว่า..เรามีวิธีใดบ้างที่จะใส่ bullet list ที่เป็นภาพเล็ก ๆ เอาไว้หน้าชื่อบทความอะครับ...
    http://art-in-faith.blogspot.com
    คือต้องการให้ list ชื่อบทความมีสีสันขึ้นอะครับ...
    ขอบคุณมาก ๆ คับ

  1. @ คุณ Tommaso Phakk : เข้าไปคุยใน Forums แล้วกันนะครับ เพราะที่ถามไม่เกี่ยวกับบทความนี้ครับ http://www.hackublog.com/p/hackublog-forums.html

  1. ทำไมผมแก้แล้ว มันไม่เป้นแบบนี้ล่ะครับ แถมยังมีตัวเลข หน้าชื่อกำกับอีก
    http://allmyheros.blogspot.com/

  1. @ Newrelease :

    1. เป็นเพราะแต่ละบทความติดป้ายกำกับเท่ากันหมด
    2. ถ้าไม่ได้ให้ใช้โค้ด

    /* Styles Label Gadget By www.hackublog.com */
    #Label1{font-family:Arial,Helvetica,sans-serif;font-variant:small-caps;font-weight:bold;text-shadow:0.5px 0.5px 0.5px #fff}
    #Label1 .label-size-1 a {color:#FF0000;}
    #Label1 .label-size-2 a {color:#FF4300;}
    #Label1 .label-size-3 a {color:#520000;}
    #Label1 .label-size-4 a {color:#396F87;}
    #Label1 .label-size-5 a {color:#545454;}
    #Label1 a:hover{ text-decoration:underline;color:#000 }

    3. กรณีมีตัวเลขขึ้นหาคำตอบเป็นการบ้าน จะได้เก่ง ๆ

  1. ขอโทษค่ะ เป็นคำถามที่ค่อนข้างให้เด็กเก่งที่มีน้ำใจอย่างหลาน งง
    ตอนนี้ป้าเขียนเว็ปที่ไม่มีหัวข้อแยกเป็นเรื่องๆ ด้านบนที่จะให้ลูกค้าคลิกเข้าไปอ่านทีละเรื่อง(ทำไม่เป็น)
    อธิบายก็ยังกลัวคนอ่านงงเลย เอาภาพจริงไปดูแล้วกัน ป้าเขียน www.suansilp19.blogspot.com
    อยากให้มีหัวข้อด้านบน 1.รู้จักผู้ผลิต2.ผลิตภัณฑ์ที่จำหน่าย3.งานที่เคยผลิต4. ....
    แยกเป็นหัวข้อๆไม่ไช่อยู่หน้าเดียวกัน ทำไม่เป็นจริงๆ แล้วอ่านวิธีที่หนูอธิบายยากๆคนแก่ งง
    รบกวนหน่อยค่ะพระเอก หาวิธีมาพักหนึ่งแล้ว ยังทำไม่ได้เลย ซ่วยกล้วย จะไม่ลืมเลือนเลยทีเดียวเชียว
    email:suansilp19@gmail.com จะหาอ่านที่ไหนแล้วทำตามอย่างเข้าใจง่ายหน่อยได้อย่างไร
    ขอบคุณมาล่วงหน้าก่อนครับ

  1. @ suansilp19.blogspot : พอจะเข้าใจความต้องการครับ
    1. Blogger สามารถสร้างหน้าขึ้นมาได้อีก 10 หน้า
    2. ดังนั้นเราก็ให้แต่ละหน้าแทน 1.รู้จักผู้ผลิต2.ผลิตภัณฑ์ที่จำหน่าย3.งานที่เคยผลิต4. ....
    3. วิธีสร้างหน้าเราจะใช้ Gadget หน้าเว็บครับ
    4. วิธีใช้ Gadget หน้าเว็บ ศึกษาตัวอย่างการใช้ การติดตั้งได้จากบทความ http://www.hackublog.com/2010/01/gadget-blogger.html ครับผม

  1. อาจารย์ครับทำไมของผมทำตามที่อาจารย์บอกแล้วไม่มีอะไรขึ้นเลยครับ
    หรือว่าผมทำอะไรผิด รบกวนช่วยดูหน่อยครับ
    http://autocad2007blog.blogspot.com/
    ขอบคุณครับ

  1. ทำยังไงให้ไม่มี ป้ายกำกับอยู่ในหน้าแรกอะคะ คือหน้าแรกจะใส่สคริปให้แสดงแบบมี read more เหมือนหน้าแรกของพี่อ่ะค่ะ แต่ว่า มันมีป้ายกำกับโชว์มาด้วย พยายามแก้ในหน้าองค์ประกอบบล็อคแล้ว มันก้ไม่หายไปอะ --*

  1. บล็อกนี้ให้ความรู้ละเอียดดีมากครับ
    เป็นประโยชน์อย่างสูงสำหรับมือใหม่
    ขอบคุณมากนะครับ

  1. ขอบคุณครับ

  1. ช่วยเข้าไปดูลิงค์นี้ทีค่ะ http://www.thaiseoboard.com/index.php/topic,185251.0.html

    นี่ค่ะเว็บ http://itmovie-puntira.blogspot.com/ ช่วยทีค่ะ ขอบคุณมากๆ เลยค่ะ

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

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

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