วิธีสร้างพื้นที่สำหรับ Add Gadgets ที่ Blogger Header

บทความนี้ผมจะสอนให้เพิ่มพื้นที่สำหรับ Add Gadget ที่ตำแหน่ง Blogger header วิธีการนี้อาจจะเรียกว่าเป็นวิธีแบ่ง Header Column ออกเป็น 2 column ก็ได้ ประโยชน์จากการทำตามบทความนี้ คุณก็จะได้พื้นที่สำหรับติดตั้ง Banner หรือติดตั้ง AdSense โค้ด หรืออาจจะเพิ่ม Gadget อื่น ๆ ที่ส่วนหัวของบล็อกตามที่คุณต้องการได้ โดยหลักการทำจะใช้วิธีดัดแปลง CSS และ HTML โค้ดใน Template ของคุณ

วิธีเพิ่มพื้นที่สำหรับ Add Gadget ที่ส่วน Header

ก่อนอื่นเราผมจะให้ดู Layout และโค้ดเดิมใน Template ก่อนทำการปรับแก้ และก่อนที่จะปรับแก้โค้ดขอให้ท่านทำการ backup แม่แบบ เอาไว้ก่อนเพื่อป้องกันความผิดพลาด

ขั้นที่ 1 ค้นหาโค้ดเดิม

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

ก่อนทำการปรับแก้เราจะเห็นว่าส่วนหัวของบล็อกยังมี Column เดียว

ซึ่งถ้าเข้าไปที่ การออกแบบ >>  แก้ไข HTML คุณจะพบโค้ดที่กำหนดส่วนหัวดังนี้

CSS โค้ที่กำหนด Header

#header-wrapper {
width:1000px;
margin:0 auto 10px;
border:1px solid $bordercolor;
  }
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header { 
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font-family: copperplate gothic light,Helvetica,Arial,serif;
font-variant:small-caps;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
font-family:copperplate gothic light, Arial,Helvetica;
font-variant:small-caps;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:1000px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

ซึ่ง CSS ที่เราจะทำการปรับแต่งคือ CSS ในส่วนสีแดง

HTML

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='MY DESIGN (ส่วนหัว)' type='Header'/>
</b:section>
</div>

ขั้นที่ 2 ปรับแต่งโค้ดเดิมและติดตั้งพื้นที่สำหรับ Add Gadget

2.1 ให้ปรับแก้ CSS โค้ดเดิมดังนี้

จากโค้ดเดิม

#header { 
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

ให้แก้ใหม่เป็น

#header {
float:left;
width:40%;
height:120px;
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

สังเกตโค้ดสีน้ำเงินที่เพิ่มเข้าไป เป็นการลดความกว้างของไอดี Header ให้มีความกว้างเพียง 40 % และชิดซ้าย  ส่วนความสูง 120px คุณสามารถจะกำหนดเพิ่ม/ลดได้ตามความเหมาะสม เมื่อทำตามขั้นตอนนี้แล้วผลที่ได้จะเปลี่ยนจากเดิมเป็นดังรูปด้านล่าง



2.2 เพิ่ม CSS ของพื้นที่ใหม่

ต่อไปกำหนด CSS ของส่วนที่เราจะเพิ่มเข้าไปดังนี้ ต่อเนื่องจากชุดโค้ดของ ไอดี header ให้วางโค้ดต่อไปนี้ลงไปแล้วบันทึก

#header2{
float:right;
width:58%;
height:120px}

หมายเหตุ ความกว้างและความสูงของไอดี header2 อาจจะกำหนดให้พอดีกับขนาดของ Banner ก็ได้ เช่นกำหนดเป็น

#header2{
float:right;
width:468px;
height:120px}

2.3 ต่อเนื่องจากการเพิ่ม CSS ให้ค้นหาโค้ด

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='MY DESIGN (ส่วนหัว)' type='Header'/>
</b:section>
</div>

(การค้นให้เจอเร็วที่สุดคือ กด Ctrl + F และใช้คำค้นว่า(ส่วนหัว)  และโค้ดที่พบอาจจะไม่ได้เหมือนโค้ดในตัวอย่างทั้งหมด)

จากนั้นแก้โค้ดส่วนนี้ใหม่เป็น

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='MY DESIGN (ส่วนหัว)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='2' showaddelement='yes'/>
</div> <div style='clear:both;'/>

( ในที่นี้ผม locked ให้เพิ่มได้ 2 Gadget เพราะไม่อยากให้เพิ่มเยอะเกินไป ) จากนั้นบันทึกแม่แบบ



ขั้นที่ 3 เมื่อมาดูที่องค์ประกอบของหน้าคุณจะพบว่ามีพื้นที่สำหรับ Add Gadget แล้ว



คุณสามารถเพิ่ม Gadget ต่างๆ ในบริเวณนี้ตามความต้องการ เช่น

► AdSense โค้ด ขนาด 468 x 60
► กล่องค้นหา
► Banner ขนาด 468 x 60
► Google Translate
► Social Bokmark icon เป็นต้น

หวังว่าบทความนี้คงเป็นประโยชน์สำหรับ Blogger หลาย ๆ ท่านนะครับ และขอฝากว่า ถ้าคุณคิดว่าเนื้อหาของบล็อกนี้มีประโยชน์ก็ช่วยบอกต่อกันด้วยนะครับ สวัสดีครับ