วิธีเพิ่ม Gadget ในส่วนหัวของแม่แบบ Blogger รุ่นใหม่

จากบทความ วิธีสร้างพื้นที่สำหรับ Add Gadgets ที่ Blogger Header ซึ่งในบทความผมได้สอนการสร้างพื้นที่ทางขวาของส่วนหัวของบล็อก เพื่อใช้ในการเพิ่ม AdSense, Search box ,Banner 468x60 หรือ Gadget อื่น ๆ ที่คุณต้องการ แต่การสอนในบทความดังกล่าวผมได้สอนเป็นแนวทางเอาไว้สำหรับแม่แบบรุ่นเก่า (เนื่องจากตอนที่เขียนไม่มีแม่แบบรุนใหม่ของ Blogger ) บทความนี้ผมจึงเขียนขึ้นมาอีก 1 บทความเพื่อให้ง่ายสำหรับคนที่ใช้แม่แบบที่ออกแบบโดยทีมพัฒนาของ blogger ให้ทำได้สะดวกและง่ายขึ้น


SEO blogger สอน วิธี สร้าง ทำ บล็อก blog แต่ง blog Blogger


ขั้นตอนการสร้าง พื้นที่สำหรับเพิ่ม gadget ที่ส่วนหัวของ Blogger Template รุ่นใหม่


ขั้นที่ 1  Login เข้าไปที่ Blogger.com
จากแผงควบคุมให้เข้าไปที่การแก้ไข HTML และค้นหาโค้ด .header-outer  ซึ่งคุณจะพบชุดโค้ด

.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
  _background-image: none;
  color: $(header.text.color);
  -moz-border-radius: $(header.border.radius);
  -webkit-border-radius: $(header.border.radius);
  -goog-ms-border-radius: $(header.border.radius);
  border-radius: $(header.border.radius);
}
บางแม่แบบอาจจะมีความแตกต่างจากนี้เล็กน้อย และเมื่อพบแล้วให้เพิ่มโค้ดสีแดงแทรกลงไปดังนี้

.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
  _background-image: none;
  color: $(header.text.color);
  -moz-border-radius: $(header.border.radius);
  -webkit-border-radius: $(header.border.radius);
  -goog-ms-border-radius: $(header.border.radius);
  border-radius: $(header.border.radius);
float:left;
width:50%;
}
#newheader{
float:right;
margin: 5px auto;
width:50%;
}
เมื่อจบขั้นที่ 1 แล้วถ้าเราดูในองค์ประกอบของหน้าจะพบหน้าตาของพื้นที่ซึ่งเปลี่ยนไปเป็นดังรูป

Header Gadget blogger blogspot ทำ แต่ง สร้าง blog

หรือบางท่านอาจจะเป็นแบบนี้ ซึ่งก็ถือว่าไม่ได้ทำอะไรผิดพลาดครับ

SEO blogger สอน วิธี สร้าง ทำ บล็อก blog แต่ง blog Blogger

อธิบายรูปที่ 2 :
สาเหตุที่ Gadget PageList เลื่อนขึ้นมาซ้อนทับกับส่วน Header เพราะว่าเราได้ใส่ Style  float:left; เพิ่มเข้าไปในส่วนหัวซึ่งหมายถึงสั่งให้ชิดซ้ายจึงทำให้ Element ที่อยู่ถัดมาขึ้นไปซ้อนทับได้ วิธีแก้ไขคือเราต้องใช้การ Clear Style ซึ่งดูต่อได้จากขั้นที่ 2



ขั้นที่ 2 ต่อไปให้ค้นหาโค้ด <header> ในแม่แบบ

ซึ่งคุณจะพบชุดโค้ดดังนี้

<header>
    <div class='header-outer'>
    <div class='header-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left header-fauxborder-left'>
    <div class='fauxborder-right header-fauxborder-right'/>
    <div class='region-inner header-inner'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Design Blogger Template (ส่วนหัว)' type='Header'/>
</b:section>
    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
    </header>

จากนั้นให้แทรก HTML สีแดงลงไปดังโค้ดด้านล่าง

<header>
    <div class='header-outer'>
    <div class='header-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left header-fauxborder-left'>
    <div class='fauxborder-right header-fauxborder-right'/>
    <div class='region-inner header-inner'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Design Blogger Template (ส่วนหัว)' type='Header'/>
</b:section>
    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
</header>
<div id='newheader'>
   <b:section class='content-inner' id='ilovehackublog' maxwidgets='10' showaddelement='yes'/>
</div>
<div style='clear:both;'/>

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

SEO blogger สอน วิธี สร้าง ทำ บล็อก blog แต่ง blog Blogger


คุณสามารถเพิ่ม Gadget ที่ต้องการได้ตามใจชอบครับ เช่น ตัวอย่างด้านล่างนี้ผมเพิ่ม AdSense ขนาด 468x60 ลงบนส่วนหัวของ blogger

SEO blogger สอน วิธี สร้าง ทำ บล็อก blog แต่ง blog Blogger

หวังว่าคงเป็นประโยชน์กับ Blogger รุ่นใหม่ทุกคนครับ   มีปัญหาเรื่องการติดตั้งหรือโค้ดไม่ตรงกับที่สอนในบทความนี้โปรดสอบถามที่ Comment ด้านล่างบทความนี้

ปล. บทความนี้ต้องขอขอบคุณ คุณบงกช ที่ช่วยเป็นแรงกระตุ้นให้พัฒนาบทความสำหรับแม่แบบรุ่นใหม่อีกครั้ง ขอบคุณครับ  สวัสดีครับ

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

  1. ขอบคุณมากครับ...ผมลองทำแล้ว แต่ Blogger Header ไม่ไป Float ทางด้านซ้ายครับ ยังนิ่งอยู่ที่เดิม พอใส่codeชุดที่สอง ก็ให้เิพิ่มgadgetได้ แต่ต้องอยู่ถัดจาก Header ลงมาครับ...ลองเอา Sliderออกแล้วก็ยังเหมือนเดิมครับ แนะนำด้วยครับ ที่นี่นะครับ HealthAtWill.blogspot.com ครับ

  1. คุณบงกชยังใส่โค้ดไม่ถูกต้องครับ
    ให้แก้โค้ดปัจจุบันจาก

    .header-outer{background:transparent none repeat-x scroll top left;_background-image:none;color:#1d00ff;-moz-border-radius:0;-webkit-border-radius:0;-goog-ms-border-radius:0;border-radius:0};
    float:left;
    width:50%;
    }

    เป็น
    .header-outer{background:transparent none repeat-x scroll top left;_background-image:none;color:#1d00ff;-moz-border-radius:0;-webkit-border-radius:0;-goog-ms-border-radius:0;border-radius:0;
    float:left;
    width:50%;
    }

    แล้วจะสำเร็จตามต้องการครับ

  1. เย้...ทำได้แล้ว...ผมไม่ละเอียดเอง...ขอบคุณมากครับ...ดีใจจริงๆครับ...

  1. ผมลองโพสข้อความแบบเดิม หายอีกแล้ว หุหุ ไม่เป็นไรครับ เอาใหม่ ผมลองเอาโค๊ดในข้อแรกไปใส่แล้วมันลดครับแต่ส่วน หัวกับท็อปเมนูมันมาอยู่แถวเดียวกัน เลยลบออกละครับ รบกวนคุณ Mr.Hackublog ช่วยดูด้วยครับว่าจะใส่ตรงไหนดีครับคือผมอยากใส่โฆษราตรงส่วนหัวด้านซ้ายนะครับ ขอบคุณครับ http://naropano.blogspot.com

  1. @ Naro : สงสัยไปอยู่ในกล่องสแปมของ blogger ครับ
    โค้ดที่คุณใช้มันไม่ค่อยมาตรฐานถ้าจะแก้ผมจะต้องเข้าไปแก้เอง เอาวิธีนี้ไปใช้แล้วกันครับ

    1. ค้นหาโค้ด
    <div class='art-Logo'>

    2. เมื่อเจอแล้วให้ใช้โค้ด
    <div id='HeadAds' style='float:left;margin:10px;'>
    ใส่โค้ดโฆษณาตรงนี้
    </div>

    3. เอาโค้ดไปวางก่อนหน้า
    <div class='art-Logo'>
    ถ้าตำแหน่งไม่ลงตัวก็ปรับการวาง ทดลองดูครับ

  1. ขอบคุณครับ แสดงว่าเป็นเพราะโปรแกรม artisteer 2.3 ที่ผมใช่ไม่น่าละคนที่จะคอมเม้นบอกคอมเม้นไม่ได้ พอจะมีวิธีแก้ไหมครับหรือผมต้องหาเทมเพลตที่เขาแจกฟรีมาใช้ดีกว่า แต่ว่าลงโค๊ดไปเยอะแล้วจะทำใหม่ก็เสียดายเหนื่อยแน่ ๆ

  1. @ alex699 : ไม่ใช่เพราะ โปรแกรม artisteer 2.3 หรอกครับ แต่หมายถึงการจัดวางตำแหน่งต่าง ๆ มันไม่เหมือนกรณีทั่วไป
    ส่วนเรื่อง Comment ได้ตามปกติครับ สนใจติด Facebook Comment หรือเปล่าครับ เรียก Traffic จาก Facebook ได้ด้วยนะครับ

    http://www.hackublog.com/2010/05/get-facebook-social-plugins-to-blogger.html

  1. ขอบคุณครับ ทำได้แล้วครับ

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. ต้องการแก้โค้ด ส่วนหัวอยู่พอดีครับ เข้ามาที่นี่ได้อะไรดีๆ ทำให้ไอเดียบรรเจิด

  1. ของผมลองใส่ดูแล้วมันไม่ซ้อนกันอ่ะ ที่เพิ่ม gadget เข้าไปมันมาลอยอยู่ข้างล่าง headerครับ
    ในเทมเพลตผมก็ไม่มี .header-outer
    แต่มี
    .header-inner .Header .titlewrapper,
    .header-inner .Header .descriptionwrapper {
    padding-left: 10px;
    padding-right: 10px;
    ไม่ทราบว่าต้องแก้อย่างไรครับ ของผม http://toregainhairloss.blogspot.com/ ครับ
    ขอบคุณครับ

  1. ผมก็ใช้แม่แบบเดียวกับ Johunna ไม่รู้จะแก้ตรงไหน

  1. backup แม่แบบก่อนแล้วใช้วิธีเดียวกับบทความนี้ แต่เปลี่ยนจาก .header-outer เป็น .header-inner .Header

  1. ผมลองแก้ให้เป็นแบบนี้แล้วครับ แต่ก็ยังเหมือนเดิมครับ
    .header-inner .Header .titlewrapper,
    .header-inner .Header .descriptionwrapper {
    padding-left: 10px;
    padding-right: 10px;
    float:left;
    width:50%;
    }
    #newheader{
    float:right;
    margin: 5px auto;
    width:50%;

    }
    ตัวที่เป็น .header-inner .Header มันไม่แสดง width เป็น 50% แต่แสดงเป็น 100% ใช่มั้ยครับ

  1. @ Johunna : ตอนนี้ผมยังไม่ว่างทดลองกับ Theme ที่คุณใช้ให้ ยังไงถ้าต้องการทำจริง ๆ ลองเลือกเปลี่ยน Theme ก็จะง่ายกว่าครับ แต่ถ้าผมว่างแล้วก็ยังจะทดลองให้นะครับ ขออภัยด้วย

  1. ขอบคุณครับ ผมเปลี่ยนมาเป็น Minima แล้วครับ จะได้เข้ากับบทเรียนใน Hackublock ครับ
    ผลคือ ง่านขึ้นหาง่ายขึ้น เข้าใจง่ายขึ้นครับ แนะนำให้เพื่อน เริ่มจาก them ง่าย แล้วเอามาปรับปรุงด้วยตนเอง ตามบทเรียนครับ ขอบคุณครับ

  1. ขอบคุณสำหรับบทความดีๆ คับ
    http://hisoclub.net

  1. เรียน คุณ แฮ็คค่ะ
    ดิฉันทำมาเป็นสิบ ครั้ง ก็ยังโง่ ค่ะ ใส่โค้ด หลายที่ก็ยังไม่ได้ เลยส่งมาให้ดูว่าโค้ดเป็นแบบนี้ค่ะ อาจารย์


    /* Header
    ----------------------------------------------- */
    .header-outer {
    background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
    _background-image: none;
    }

    .Header h1 {
    font: $(header.font);
    color: $(header.text.color);
    text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
    }

    .Header h1 a {
    color: $(header.text.color);
    }

    .Header .description {
    font-size: $(description.text.size);
    color: $(description.text.color);
    }

    .header-inner .Header .titlewrapper {
    padding: 22px $(header.padding);
    }

    .header-inner .Header .descriptionwrapper {
    padding: 0 $(header.padding);
    }

    กรุณา ชี้ตำแหน่งหรือ อะไรมันไม่มีไม่ทราบค่ะ
    ขอบพระคุณมากๆ ค่ะ

  1. ิบล้อก ดิฉันนะคะ stayranong.com

    ที่ทำมารวมทั้งความรู้จากอาจารย์ แฮ็ก ด้วยค่ะื

    ขอบคุณ จาก คุณยายผู้รักเรียนนะคะ
    ยาย น้อง เบส

    อ้อ แฮ้ปปี้ วาเลน ไทล์ นะคะ อาจารย์

  1. ขอบคุณบทความดีดีครับ ^^ ว่างๆเยี่ยมชม http://powaruk.blogspot.com/ บล็อกบันเทิง รวมๆครับ กำลังหัดทำครับ

  1. แล้วถ้าผมจะเพิ่มgadgetด้านใต้headerอะครับ ทำยังไงดีครับ

  1. สวัสดีค่ะ สอบถามหน่อยค่ะ

    คือตอนแรกมี
    #header-inner {
    margin-left: auto;
    margin-right: auto;
    }

    นำ
    .header-outer มาใส่แทนเลยใช่ไหมคะ
    ต้องมี # ไหมคะ

    ส่วนขั้นที่ 2 หาโค้ด ในแม่แบบ ไม่เจอค่ะ

    www.พัฒนาการเด็ก.com
    รวบกวนด้วยค่ะ ขอบคุณมากนะคะ

  1. ทำได้แล้วค่ะ ขอบคุณมากนะคะ
    ทำตามที่สอนแม่แบบรุ่นเก่าค่ะ ^^

  1. lady UK (Pinky) เป็นแบบเดียวกับผมเลยครับ นั่ง งงเป็นชั่วโมง กว่าจะได้

    /* Header
    ----------------------------------------------- */
    .header-outer {
    background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
    _background-image: none;[กดenterตรงนี้]
    ตรงนี้จะว่างคัดลอกช่วงแรกมาใส่
    }
    ตรงนี้คัดลอกช่วงที่สองมาใส่


    สังเกตดีดีจะมีสองช่วง

  1. ผมกำลังหาวิธีทำเป็นหัวข้ออยู่ครับใครรู้บ้างว่าทำไงช่วยบอกหน่อยครับ

    จะทำแบบนี้อ่าครับ>>>>>[url=http://image.ohozaa.com/view2/waqMPuzgsytgooWV][img]http://image.ohozaa.com/i/ge1/rdOwit.jpg[/img][/url]

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. อยากทำบล็อกแบบนี้ ต้องทำไงหรอครับ
    หมายถึงตรง แชทพูดคุย ดูหนัง & รหัสดูหนัง
    กับเอารูปใส่ตรงหัวเว็บอ่ะครับ
    http://aojvojmovie.blogspot.com/2012/11/1.html

  1. ทำได้แล้วครับ ขอบคุณมาก ^^
    แล้วผมสามารถเพิ่ม Gadget อีกได้ไหมครับ
    เช่น ตอนนี้เพิ่มด้านขวาได้
    แล้วผมสามารถเขียนโค้ดเพิ่มเพื่อด้านซ้ายได้ไหมครับ ?

  1. รบกวนสอบถามเรื่องคำอธิบายหน้าของบล๊อกครับ

    คือว่าผมสงสัยว่าทำไมบล๊อกของผมคำอธิบายหน้ามั้นไม่เหมือนกับที่ผมได้เขียนไว้เลย ผมได้ทำทุกอย่างแล้ว ในส่วนหัว ส่วนโค๊ด แต่พอกูเกิล แสดงผล ปรากฏว่าแสดงนิดเดียว

    ผมได้ทำการสร้างบล๊อกใหม่ขึ้นแล้วใช้เทมเพลทตัวเดียวกัน ปรากฏว่า บล๊อกใหม่แสดงแบบเต็ม แต่บล๊อกหลังแสดงนิดเดียว

    ผมงงมากๆครับรบกวนช่วยดูให้หน่อยครับ
    หลัก>> site:http://www.car-renewal.com/
    รอง>>site:http://car-renewalinfo.blogspot.com/

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

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

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

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