วิธีเพิ่ม 2 Column ที่ส่วนหัวของบล็อก

บทความนี้ขอนำเสนอวิธีการเพิ่ม Column อีก 2 Column ในส่วนหัว ที่ตำแหน่งด้านบนของกล่องบทความ ซึ่งทำให้คุณสามารถเพิ่มพื้นที่การติดตั้ง Gadget ที่มีความสำคัญได้มากขึ้น เช่น โฆษณา ข่าวสาร บทความล่าสุด หรือบทความแนะนำเป็นต้น สำหรับตัวอย่างของผลลัพธ์นั้นดูได้จากบล็อกนี้ หรือดูได้จากรูปด้านล่างก็ได้

ทำ blog



ขั้นตอนการติดตั้ง

Login เข้าไปที่ blogger

ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ไม่ต้อง ขยายแม่แบบเครื่องมือ

ขั้นที่ 1 ติดตั้ง CSS โดยค้นหาโค้ด ]]></b:skin> และวางโค้ดต่อไปนี้ก่อน หน้าโค้ดดังกล่าว

/* 2 Head Column By Hackublog*/
#My-Head-new-wrapper{
width:680px;
float:left;
font-size:12px;
padding-bottom:5px;
magin-left:20px;
font-color:#000000;
font-family:Arial,tahoma,Lucida Sans Unicode
}
#My-Head-new1{
width:320px;
margin-left:10px;
margin-right:10px;
float:left;list-style:none;
border-top:2px solid #ffffff;
border-bottom:2px solid #565656;border-left:2px solid #BBBBBB;border-right:2px solid #565656
}
#My-Head-new2{
width:320px;magin:5px 0 5px 0px;
float:right;
border-top:2px solid #ffffff;border-bottom:2px solid #565656;border-left:2px solid #BBBBBB;border-right:2px solid #565656
}
#My-Head-new1 h2,#My-Head-new2 h2{
background: #BBBBBB;
color:#3D3D3D;
font-size:13px;
font-family:Arial,Tahoma,Verdana;font-weight:bold;
text-transform:uppercase;
text-align:center;
text-shadow:0.5px 0.5px 0.5px #ffffff
}
#My-Head-new1 ul,#My-Head-new2 ul{list-style:none}
#My-Head-new1 li,#My-Head-new2 li{font-size:12px;line-height:14px;margin-bottom:5px;list-style:none}
#My-Head-new1 a,#My-Head-new2 a{color:#520000;text-decoration:none}
#My-Head-new1 a:hover,#My-Head-new2 a:hover{color:#000}


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

เนื่องจากแต่ละ Template ความกว้างจะไม่เท่ากัน ดังนั้นเป็นไปได้ว่าหากคุณใช้โค้ดนี้แล้วจะไม่พอดีกับ template ของคุณ ซึ่งถ้าเป็นตามที่กล่าวมาก็แก้ไขโค้ดในส่วนต่างๆ ดังภาพต่อไปนี้


สอน blogger



ขั้นที่ 2 ต่อเนื่องจากขั้นที่ 1 ให้ค้นหาโค้ด <div id='content'> แล้ววางโค้ดต่อไปนี้ลงไปถัดจากโค้ดดังกล่าว

<div id='My-Head-new-wrapper'>
<div id='My-Head-new1'>
<b:section class='My-Head-new-column' id='col11' maxwidgets='4' showaddelement='yes'>
<b:widget id='HTML111' locked='false' title='HTML' type='HTML'/>
</b:section>
</div>
<div id='My-Head-new2'>
<b:section class='My-Head-new-column' id='col12' maxwidgets='4' showaddelement='yes'>
<b:widget id='HTML112' locked='false' title='' type='HTML'/>
</b:section>
</div>
</div>
<div class='clear'/>


เมื่อวางโค้ดแล้วให้บันทึกแม่แบบ  และไปที่

แผงควบคุม >> รูปแบบ >> องค์ประกอบของหน้า >> แล้วทำการปรับแต่ง gadget ที่มีอยู่แล้ว หรือจะลบทิ้ง แล้ว Add Gadget ใหม่ที่ต้องการเข้าไป

วิธีทำ blogger

สุดท้ายเมื่อเพิ่มหรือปรับแต่ง gadget ตามความต้องการเสร็จสิ้นแล้วก็เป็นอันจบขั้นตอนการเพิ่ม 2 Column ที่ส่วนหัวของบล็อกครับ






เทคนิคการปรับแต่งความสูงของ Gadget ให้เท่ากัน

เนื่องจาก 2 Column ที่เพิ่มเข้าไปนั้นอยู่ในบริเวณส่วนหัว ดังนั้นหากความสูงของทั้ง 2 Column ไม่เท่ากันก็จะดูไม่สวยงาม วิธีแก้ไขทำโดย

สำหรับ Gadget ที่ใช้ในส่วนหัวเป็นชนิด HTML/ จาวาสคริปต์ (หากไม่ใช่ Gadget ชนิดนี้กำหนดความสูงไม่ได้) ก็ให้ทำการ ใส่แท็ก <ul style="overflow: auto; height: 300 px; width:310px;">… </ul> ปิดหัวปิดท้ายโค้ดของ Gadget อีกที จะทำให้ Gadget นั้น  มีความสูงคงตัวที่ 300 px ซึ่งวิธีการใส่ทำดังนี้

<ul style="overflow: auto; height: 300 px; width:310px;">

ใส่โค้ดของ Gadget ลงไปตรงนี้

</ul>



สอน blogspot


หากมีข้อสงสัยในการปรับแต่งเพิ่มเติม สามารถสอบถามได้ที่กล่อง Comment ด้านล่างของบทความนี้ได้ครับ

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

  1. พยามจะทำบล็อกไม่รู้จะหาความรู้ได้จากที่ไหนได้มากเท่านี้ขอบคุณมากจริงๆกำลังพยายามทำอยู่ช่วยแนะนำ
    http://badmintonuttaradit.blogspot.com/

  1. ตอบคุณ ARAM RUANGDACH

    บล็อกที่สร้างขึ้นเยี่ยมมากครับ เท่าที่ดูยังขาดความเป็น social อยู่ครับ ควรจะ add gadget ผู้ติดตามเพื่อให้สมาชิกได้ติดตามบล็อกของคุณได้ครับ

    ส่วนอื่นๆ ลองค่อยๆ ค้นอ่านจากบทความในบล็อกนี้ดูนะครับ สงสัยยังไงสอบถามได้ทันทีครับ

    สารบัญ >> http://hackublog.blogspot.com/2009/01/blog-post.html

  1. คือแบบว่า ผมอยากจะให้ gadget ไปอยู่ทางขวาสุดของblogอะคับพี่็ hackblog แบบว่า ต้องการเพิ่มแค่ 1 Gadget เท่านั้นเองไม่ทราบ พอจะมีแนวทางบ้างไม๊คับ
    ปล.ขอบคุณมากคับพี่ blogพี่สอนได้ครบวงจรมากเลยคับ จากคนไม่มีความรู้แต่ก็สามารถทำิblogที่ตัวเองต้องการได้ ขอบคุณมากคับ

  1. @ AngelofDeath : ทำได้ไม่ยากครับ แต่ต้องบอก URL ของบล็อกที่จะำทำครับ จะได้อธิบายได้ถูกต้องครับ เพราะจะต้องมีการระบุตำแหน่งโค้ด และความกว้างด้วย

  1. นี่คับ พี่ชาย http://oho-movie.blogspot.com/
    อยากจะเอา รุปนี้ไปแปะไว้อะคับ นี่ code รุปที่ว่าคับ
    http://oho-movie.googlecode.com/files/oho.txt
    จะเอาไว้ใส่ข้อความประกาศคับ
    ขอบคุณคับพี่
    ขอถามอีกอย่างนะคับพี่ Hackblog ถ้า เรา จะ แบ่ง gadget เป็น3 ตอน นี้ทำได้ไม๊คับ แบบว่าให้ ตอนออกไปทางซ้ายอีก1 โดยแบ่ง เนื้อที่แชช์ๆ กัน
    ปล.ขอบคุณสำหรับแนวทางคับ

  1. @ AngelofDeath : สงสัยต้องเล่ายาวเลย เอาเป็นว่าไปคุยใน Forum นะครับสะดวกกว่าเพราะว่า โพสโค้ดบางอย่างได้ครับ
    http://www.hackublog.com/p/hackublog-forums.html

  1. หาโค้ด div id='content' ไม่เจออะค่ะ o_O

  1. หา div id='content ไม่เจอเช่นกันครับ

  1. หาโค้ด div id='content' ไม่เจอครับ

  1. หาโค้ด div id='content' ไม่เจอค่ะ

  1. หา div id='content' ไม่เจอครับ

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ

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

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

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