ใส่ Adsense, Search box หรือ Banner Ads ใน Blogger Header

ในพื้นที่ของ Header เราสามารถใส่อะไรๆลงไปได้ เช่นว่า Adsense ad, Search Bar, Banner Ad, Social Icon, หรือ Widget แบบง่ายๆ โดยลดความกว้างของ Header ลงแล้วเพิ่มพื้นที่ลงไปบริเวณแทน เพื่อไม่เป็นการเสียเวลาเรามาเริ่มกันเลย

ใส่ Adsense, Search box หรือ Banner Ads ใน Blogger Header

หรือใส่ Widget ลงใน Blogger Header โดย CSS อีกแบบ

Step 1. เพิ่ม section (ใน HTML mode)

          1. ไปที่ Template>Edit HTML

          2. Back up Template ของเราก่อนเพื่อความปลอดภัย

          3. หาส่วนต่อไปนี้ใน HTML code

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/> </b:section>

หรืออาจยาวกว่านั้น ให้หาตำแหน่ง </b:section> แรกที่เจอ ที่อยู่ถัดลงไปจาก <b:sectionclass='header' ดังในภาพ

---

          4. ใส่ Section ต่อไปนี้ลงไปต่อจาก code ด้านบน(ตำแหน่งตามภาพ)

<b:section id='header-right' showaddelement='yes'/> <div style='clear: both;'/>
<div style='clear: both;'/>  

              เป็นการเพิ่ม Header ด้านขวาลงไป

---

          5. เมื่อเสร็จแล้วตรวจดู code ที่ได้จะมีหน้าตาประมาณนี้ ได้แล้วก็กด Save

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

 <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/> 

 </b:section> 

<b:section id='header-right' showaddelement='yes'/> <div style='clear: both;'/> 

<div style='clear: both;'/>   

หรือออกมามีหน้าตาแบบนี้ถ้าเป็น designer template

แต่ถ้าไปดูใน Layout ตอนนี้ จะเห็นเป็น Header สองอันซ้อนกันอยู่อันที่พึ่งใส่อยู่ด้านล่าง ซึ่งยังไม่ใช่แบบที่เราต้องการ

---

Step 2. ปรับแต่ง header sections ด้วย CSS

โดยในตัวอย่างเราจะกำหนดให้ header ทั้งสองส่วนอยู่เคียงข้างกัน กำหนดให้ Header เดิมชิดซ้ายและส่วนใหม่ที่พึ่งเพิ่มเข้าไปชิดขวา(วางสลับกันก็ทำได้) ไปต่อกันเลย

          1. เรายังคงอยู่กันที่ HTML Editer (Template>Edit HTML)หา ]]></b:skin> 
หรือไปที่ Template>Customize>Advance>Add CSS เพื่อใส่ code ในข้อ 2.

          2. ใส่ CSS code ต่อไปนี้ไว้ก่อนหน้า code ข้อ 1.

#header, body#layout #header {width:50%;display:inline-block;float:left;}

#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}

#header-right .widget {margin:0;}

ตรงนี้เราสามารถแก้ไขค่าความกว้าง(width) แต่ผลรวมทั้งหมด (header, Header-right, padding, margin)ต่องไม่เกิน100% ของความกว้าง ไม่งั้นมันจะลงมาซ้อนกันอีก

---

Step 3. เพิ่ม Widget ลงไป

ตอนนี้ก็มาถึงขั้นตอนง่ายๆแล้ว เราจะสามารถใส่ Ad banner, Adsense ad, Search box หรืออะไรก็ตามทีโดยวิธีการก็เหมือนการเพิ่ม widget ที่คุ้นเคยกันนั้นล่ะ

          1. ไปที่ Template

          2. คลิ๊กที่ Add A Gadget แล้วก็เพิ่ม widget ลงไป

          3. Save 

---

Step 4. ปรับแต่งความกว้างอีกครั้งให้สวยงามลงตัวที่สุด

หากพบว่า widget มันยังซ้อนอยู่ก็แสดงว่ายังปรับไม่ลงตัว ปรับความกว้าง (width) อีกจนลงตัว