ใส่ Widget ลงใน Blogger Header

และยังมีอีกวิธีลองดูนี่ใส่ Adsense, Search box หรือ Banner Ads ใน Blogger Header

Step 1. ปลดล็อค Header Section

ขั้นตอนนี้จะเป็นการปลดล็อค Template ที่กำหนดให้ส่วน Header มี widget ได้เพียงอันเดียวนั่นก็คือ header นั่นเองมันก็เลยใส่อะไรลงไปไม่ได้อีก
การปลดล็อคตรงนี้ไม่ยาก โดยไปที่ Template>Edit HTML แล้วหาโค๊ดต่อไปนี้เพื่อจะทำการแก้ไข

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

เพื่อให้หาง่ายในกล่อง HTML กด Ctrl+f (เปิดกล่องค้นหา) แล้วใส่โค๊ดลงไป เมื่อเจอแล้วก็แก้ไขสองจุด
          1. หลัง maxwidgets= แก้ไขจาก "1" เป็น "" (เอาตัวเลขออกหรือจะใส่ตัวเลขที่ต้องการลงไปก็ได้)ตรงนี้หมายถึงแก้ไขจำนวน widget ที่มีได้ใน section header นี้ที่เคยกำหนดว่าให้มีได้เพียง 1 ให้เป็นไม่จำกัด

<b:section class='header' id='header' maxwidgets='' showaddelement='yes'>

          2. หลัง showaddelement= แก้ไขจาก "no" เป็น "yes" เป็นการแก้ไขจาก "ไม่สามารถใส่ widget ลงในส่วน header นี้ได้" เป็น "สามารถใส่ widget ลงในส่วน header นี้ได้"

---

Step 2. ใส่ Widget และ หา ID ของมัน

ไปที่ Layout แล้วก็เพิ่ม widget ลงไปในส่วนของ header แต่ตอนนี้มันจะยังซ้อนกันอยู่ จัดเรียงตามใจว่าต้องการให้มันแสดงผลอย่างไร เนื่องจากความต้องการที่จะให้มันแสดงอยู่ข้างๆกันจึงต้องจัดเรียง โดยที่ 

• Widget ที่อยู่บนสุดจะอยู่ทางซ้ายสุด 
• Widget ที่อยู่ล่างสุดจะอยู่ทางขวาสุด

เมื่อเราใส่ widget ลงไปและ Save แล้ว เราจำเป็นต่้องรู้ widget ID เพื่อจะทำการปรับแต่งแต่ละอันได้อย่างถูกต้อง คลิ๊กเพื่อดูวิธีการหา Widget ID 

---

Step 3. ใส่ CSS code

ตอนนี้เราจะทำให้ widget มันแสดงผลตามที่เราต้องการในที่นี้คือไว้ด้านข้างของ Header จะกำหนด padding และ margin อีกทั้งส่วนอื่นๆ
Note: มันจะเปลี่ยนการแสดงผลเฉพาะที่หน้า blog นะ ไม่เปลี่ยนที่หน้า Layout

          1. ไปที่ Template>Cudtomize>Advance>Add CSS  แล้วใส่ CSS code ตามด้านล่างลงไป หรือสามารถเข้าไปใส่ลง Template ได้โดยตรงใน Edit HTML วางไว้ก่อนโค๊ด ]]></b:skin>

 .header .widget {   
 border: 1px solid;   
 display:inline-block;  
 *float: left;   
 height: 200px;   
 overflow: auto;   
 margin: 10px 5px !important;  
 vertical-align: top;  
 }  
 .header #Header1 {   
 width: 50%;   
 }   
 .header #widgetID1, .header #widgetID2 {   
 width: 20%;   
 }   

          2. เปลี่ยน Widget ID เป็น ID ของเราที่ได้จาก Step 2. และปรับแต่งค่า(ไฮไลท์สีเหลือง) border(กรอบ), height(ความสูง), margin(ขอบ), width(ความกว้าง) ให้ลงตัวตามต้องการ หากผลรวมของความกว้าง widget ทั้งหมดเกิน widget ด้านขวาก็จะดันอันอื่นลงมา
          3. ดูตัวอย่างที่ส่วน Preview ขณะปรับแต่ง เป้าหมายของเราคือปรับ widget ให้เรียงตัวกันสวยงาม
          4. เมื่อถูกใจแล้วก็กด Apply To Blog

...เป็นอันเสร็จครับ

แต่ถ้าดูแล้วยังไม่เข้ากับบล็อกเราลองอีกวิธีดู ใส่ Adsense, Search box หรือ Banner Ads ใน Blogger Header

---