How to Make New Gadget Area on (New version) Blogger

สำหรับ blogger บางท่านที่ต้องการเพิ่ม SlideShow หรือ เพิ่มรูปภาพในส่วนหัวของบล็อก ก็จะพบอุปสรรคหนึ่งอยู่บ่อย ๆ คือหาตำแหน่งในการวาง HTML โค้ดในตำแหน่งที่ต้องการไม่ได้ หรือติดตั้งโค้ดลงไปในแม่แบบแล้วเกิดกรณีไม่เข้ากับแม่แบบเดิม เช่น เกิดระยะห่างกับส่วนหัวและส่วนเมนูมากเกินไป

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

บทความนี้ผมจึงขอนำเสนอการสร้างพื้นที่สำหรับ Add Gadget อย่างง่ายรวมทั้งสิ้น 2 วิธี ซึ่งจะเป็นวิธีที่ทำให้คุณเพิ่ม Gadget ในส่วนที่ต้องการได้ง่ายขึ้น  โดยเฉพาะการแทรก SlideShow รูปภาพ  logo หรือ Adsense ลงไปในบริเวณใต้ส่วนหัวของบล็อก


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


ในที่นี้ผมจะยกตัวอย่างสำหรับแม่แบบรุ่นใหม่เท่านั้นเพราะว่า มีคนที่ใช้แม่แบบรุ่นเก่าน้อยมากแล้ว

1.1 เริ่มต้นให้คุณ Login เข้าไปที่ blogger.com และเลือกเมนูการออกแบบ

วิธีทำ blog แต่งบล็อก

ซึ่งจะเห็นว่ายังไม่มีพื้นที่สำหรับ Add Gadget ในบริเวณที่ติดตั้ง Gadget หน้าเว็บ (Gadget หน้าเว็บจะถูกติดตั้งมากับ Template รุ่นใหม่อยู่แล้ว)

1.2 จากนั้นเข้าไปที่เมนู แก้ไข HTML และค้นหาโค้ด

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
สอนสร้างบล็อก วิธีสร้าง blog

และแก้โค้ดเป็น
<b:section class='tabs' id='crosscol' maxwidgets='10' showaddelement='yes'>
ซึ่งหมายความว่าเราสามารถเพิ่ม Gadget ในตำแหน่งนี้ได้มากถึง 10 Gadget  เมื่อทำเสร็จแล้วให้บันทึกแม่แบบและกลับมาที่องค์ประกอบของหน้า คุณจะพบว่าเกิดบริเวณให้เพิ่ม Gadget แล้ว

สอนทำ SEO สอนแต่ง hi5 

วิธีแรกยังมีข้อเสียคือ Gadget ที่เราเพิ่มเข้าไปก็จะใช้ Style ของ Gadget หน้าเว็บซึ่งถูกเจาะจงการแสดงผลเอาไว้แล้ว ทำให้อาจจะไม่เหมาะกับ Gadget ใหม่ที่เราเพิ่มเข้าไป


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


วิธีนี้มีข้อดีคือเราสามารถกำหนด Style sheet ได้เอง และสามารถดัดแปลงไปใช้ติดตั้งในตำแหน่งใดก็ได้ในแม่แบบ

2.1 สมมติว่าเราไม่เลือกทำตามวิธีที่ 1 พื้นที่สำหรับ Add Gadget ก็จะยังไม่ปรากฎในบริเวณใต้ส่วนหัวของบล็อก (เหมือนในรูปข้อ 1.1)
2.2 เข้าไปที่เมนู แก้ไข HTML และค้นหาโค้ด ]]></b:skin>
เมื่อพบแล้วให้กำหนด Style เพิ่มเติมโดยการวางโค้ดต่อไปนี้ลงไปก่อนหน้าโค้ด ]]></b:skin> 

#hackublogarea{width:100%;margin:5px 0 5px 0;}
#hackublogarea ul,#hackublogarea li,#hackublogarea ul li,#hackublogarea ul li a{list-style-type:none;}
ในขั้น2.2นี้ ผมกำหนดเพียง Style  ที่จำเป็นเท่านั้น คุณสามารถกำหนด CSS เพิ่มเติมได้อีก


2.3 ต่อเนื่องจากข้อ 2.2 ค้นหาโค้ด
<div class='region-inner tabs-inner'>
เมื่อพบแล้วให้วางชุดโค้ดต่อไปนี้ลงไปก่อนหน้าโค้ดดังกล่าว
<div class='region-inner'>
<b:section class='hackublogarea' id='hackublogarea' maxwidgets='5' showaddelement='yes'/>
</div>
บันทึกแม่แบบ และกลับมาดูที่องค์ประกอบของหน้าก็จะพบพื้นที่สำหรับเพิ่ม Gadget เช่นเดียวกับวิธีแรก

แต่ง hi5 ทำบล็อก สร้างบล็อก


2.4 คุณสามารถนำโค้ดในข้อ 2.2 ไปวางในตำแหน่งอื่น ๆ ได้

เช่น วางก่อนหน้าโค้ด
<div class='main-outer'>
สร้าง blog ทำ blog

หรือนำไปวางให้อยู่ส่วนล่างของหน้าโดยวางก่อนหน้าโค้ด

<footer>
ผลที่ได้ก็จะเกิดพื้นที่ให้เพิ่ม Gadget ในส่วนล่างของบทความและ sidebar แต่จะอยู่ก่อนหน้าตำแหน่งของ Footer

มีปัญหาอื่น ๆ สงสัยสามารถสอบถามได้ครับ สวัสดีครับ

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

  1. อาจารย์ครับผมมีข้อสงสัยถามอาจารย์ครับ
    อาจารย์คลิกลิ้งที่ผมให้
    http://www.one2gel.com
    อาจารย์ดูตรง head นะครับ
    blog ทำได้เปล่าอ่ะ

  1. @ AGELguru : ถ้ามีสสคริปต์ก็ทำได้ครับ แต่ตรง head ที่ให้ดูนี่หมายถึง logo หรือ เมนู หรือ Slideshow ครับ มีหลายอันครับ

  1. ทำให้รวมกัน ให้เหมือนเลยอ่ะครับ

    แล้วถ้าจะทำเองต้องใช้โปรแกรมไรทำอ่ะครับ

  1. @ AGELguru :
    ก็อาจจะยากอยู่ถ้าไม่มีความรู้พื้นฐานเรื่อง CSS ,HTML และการประยุกต์ใช้งานจาวาสคริปต์

    ส่วนถ้าถามว่าจะต้องใช้โปรแกรมอะไรบ้าง ก็แนะนำหลัก ๆ 1. photoshop 2. Dreamwaver

    กรณีการใช้กับ blogger ถ้ามีสคริปต์และโค้ดแล้วก็ทำได้ไม่ยากครับ ตัวผมเองก็จะไม่มานั่งเกาะสคริปต์ของคนอื่นเหมือนกันเพราะเสียเวลาครับ

  1. อาจารย์ครับ สมมติว่าเราไม่ได้อีพเดตบล็อคเลยอ่ะครับ

    บล็อคจะถูกลบเปล่าครับ

    แล้วระยะเวลาบล็อคอยู่ได้กี่ปีอ่ะครับ

  1. @ AGELguru : ไม่อับเดทก็ไม่ถูกลบครับ ส่วนใหญ่เหตุผลที่ถูกลบเพราะผิดเงื่อนไขของการใช้งาน ส่วนอายุของบล็อก ถ้าไม่ทำผิดกฎ ก็อยู่เท่าที่ยังมี google อยู่ครับ ไม่หายไปไหน หรือจนกว่า google จะเปลี่ยนเงื่อนไขการใช้งานครับ

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

    http://koi-follow-thossaporn.blogspot.com/

    http://www.facebook.com/profile.php?id=100001735734492
    koi.tomboon@gmail.com

  1. อยากให้มี add gadget ข้างบน เพจนัมเบอร์ทำยังไงหรอครับ

  1. ถ้าจะลบคำว่า add gadget ตรงheader ทำยังไงหรอครับ

  1. อันนี้บล็อกผมครับ http://greenistudio.blogspot.com

  1. ผมต้องการลบพวกหัวข้อ home business download ฯลฯ ต้องแก้ที่ไหนครับ

  1. ..ยิ่่งนานวัน ตายิ่ง เอ๊ยตาจู๊ด .งง!! ลอง ทำได้บ้าง มิได้บ้าง ลืม บ้าง แอบเข้าออกอยู่เนี่ย!! ปัญหาเยอะ! ..ต้องขอบคุณอย่างจริงใจ........... ถามแล้ว ตาใส่อ่านต่อ, กับส่วนหัว Home , About Us Etc..ปล้ำอยู่นาน ยังอยากเล่นต่อ..ทำใงได้ ตอนตาเกิดไม่มีคอมตั้งอยู่ข้างแคร่!! บ่นยาว ไปหละ แล้วตาจะเข้ามาตรงนี้ถูกอีกไหม? ฮ่วย!!"เป็นผู้ให้ สบายกว่าเป็นผู้รับ"

  1. อาจาร์ครับทำแล้วพื้นหลังบทความหายครับ

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

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

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