วิธีทำให้ Widget บน Sidebar มีสไตล์แตกต่างกัน

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

สอนทำบล็อก


วิธีการในบทความนี้ได้ถูกเกริ่นไว้ในบทความ วิธี ซ่อน Widget ในบางหน้าของ Blogger ดังนั้นเทคนิคในบทความนี้ก็จะคล้ายคลึงกับที่ได้กล่าวมาแล้ว เพียงแต่เพิ่มเติมทักษะการกำหนดสไตล์ด้วย CSS เข้าไป


วิธีการปรับแต่ง

ในที่นี้ผมได้ปรับแต่ง Template ที่ชื่อว่า Minima ให้มีความกว้างเพิ่มขึ้น สีพื้นหลังและ Font เปลี่ยนแปลงไปจากเดิม ซึ่งผลที่ได้เป็นดังนี้

ทำ blog

จากรูปเราจะเห็นว่าแต่ละ Widget บน Sidebar ยังมีส่วนหัว และพื้นหลังที่เหมือนกันทั้งหมด



ขั้นที่ 1 ในขั้นนี้เราเข้าไปดู id ของ Widget แต่ละอันที่มีอยู่ใน Template ของคุณ ซึ่งทำได้โดย

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

แล้วค้นหาโค้ด
<div id='sidebar'>
หรือ
<div id='sidebar-wrapper'>
หรือที่ใกล้เคียงกับโค้ดที่ว่านี้ และเมื่อพบแล้วเราจะเห็นว่ามี widget ที่มี id ต่าง ๆ กันในที่นี้ผมพบ Widget ที่มีชื่อต่าง ๆ กันคือ Followers1 ,HTML1 ,BlogArchive1 ,LinkList1
วิธีทำ blogger


 
ขั้นที่ 2 เมื่อทราบ id ของ Widget แต่ละอันใน Template แล้ว ขั้นต่อมาเป็นการกำหนดสไตล์ให้กับ Widget  ที่คุณต้องการ

ในที่นี้ผมจะปรับแต่ง Widget Followers1 ให้ดูเป็นตัวอย่างดังนี้

2.1 ถ้าต้องการใส่พื้นหลังให้กับ Widget Followers1 เป็นสีขาว และมีเส้นขอบสีแดง ก็จะทำการกำหนดสไตล์ดังนี้

#Followers1{
background:#ffffff; /*พื้นหลังสีขาว*/
border: 1px solid #6F0000; /*เส้นขอบสีแดง*/
}


ซึ่งเมื่อกำหนดแล้วให้นำโค้ดดังกล่าวไปวางไว้ที่ตำแหน่งก่อนหน้าโค้ด  ]]></b:skin>

สอนทำบล็อกของ blogger

ผลที่ได้จะเป็นดังภาพ


สอนทำ blogspot

2.2 ต่อไปถ้าต้องการปรับแต่งส่วนหัวให้แตกต่างจาก Widget อื่น ๆ ทำได้โดยกำหนดสไตล์เพิ่มเข้าไปอีกดังนี้

#Followers1 h2 {
height:20px;  /* กำหนดความสูงของส่วนหัวเป็น 20px */
padding:5px; /* กำหนดระยะห่างจากขอบทั้ง 4 ด้านเป็น 5px*/
color:#4B9B36; /*ให้ข้อความส่วนหัวเป็นสีเขียว*/
}

ซึ่งเมื่อกำหนดแล้วให้นำโค้ดดังกล่าวไปวางไว้ที่ตำแหน่งก่อนหน้าโค้ด  ]]></b:skin> เช่นเดียวกับข้อ 2.1


สอนแต่งบล็อก

ผลที่ได้เป็นดังนี้

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

2.3 หากต้องการให้ส่วนหัวของ Widget นี้มีภาพพื้นหลังก็จะต้องมีการดัดแปลงและกำหนดสไตล์เพิ่มเติมในข้อ 2.2ดังนี้

#Followers1 h2 {
height:20px;
/*ใสรูปพื้นหลัง และกำหนดตำแหน่งรูปตามแกน x และแกน y อย่างละ 5px */ 
background:url(http://upic.me/i/fd/followerh2.png) 5px 5px no-repeat;
/*กำหนดระยะห่างจากขอบ นับตามเข็มนาฬิกา คือ บน ขวา ล่าง ซ้าย */
padding:10px 5px 5px 40px;
color:#4B9B36;
}


แทนที่โค้ดในข้อ 2.2 ลงไป ซึ่งจะได้โค้ดเป็น

ทำบล็อก

และผลที่ได้เป็นดังนี้

สอนสร้าง blogger

จะเห็นว่าเราสามารถกำหนดสไตล์ของ Widget ให้มีความแตกต่างกันได้อย่างง่ายดาย และหากคุณต้องการเพิ่มสไตล์ให้กับ Widget อื่น ๆ ก็สามารถทำได้เช่นเดียวกับที่ยกตัวอย่างมา


บทสรุป : การกำหนดสไตล์ให้แต่ละ Widget มีความแตกต่างกันทำได้ดังนี้

1. ค้นหา id ของ Widget และ
2. ใช้ความรู้ CSS ในการกำหนดสไตล์ตามความต้องการของคุณ

หากยังมีข้อสงสัยใดเกี่ยวกับบทความนี้สอบถามเพิ่มเติมที่กล่อง Comment ด้านล่างได้ครับ และหากคุณชอบบทความนี้ โปรดช่วยกัน Submit และแบ่งปันให้เพื่อน ๆ ของคุณได้ทราบต่อ ๆ กันไปด้วยครับ(โปรดอย่าลอกเลียน) ขอบคุณครับ

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

  1. ขอบคุณครับ สุดยอดจริงๆ
    หลังจาก งมเข็มอยู่นาน
    ขอขอบคุณอีกครั้งครับ สำหรับ ความรู้ดีๆ

    ไว้มีปัญหาจะเข้ามาสอบถามอย่างละเอียดนะครับ

    ขอบคุณมากๆ ครับ

  1. @ Thanapat : ยินดีมากครับผม

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

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

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