วิธีสร้าง Tab Menu บน Blogger ด้วย Tabber (New Edit)

ผมได้เคยสอนวิธีติดตั้งเมนู Tab ที่เรียกว่า Tabber ไว้ในบทความ Tabber เมนูแท็บที่ช่วยลดการใช้พื้นที่ sidebar ครั้งหนึ่งแล้ว สาเหตุที่เขียนบทความขึ้นมาอีกครั้งเพราะว่า ในบทความนี้ได้พัฒนาและปรับปรุง ให้ Tabber ทำงานได้ดีขึ้นกว่าที่เคยได้กล่าวไว้ คือ

1. ขณะโหลดจะซ่อนแท็บทั้งหมด และจะแสดงจนกว่าจะโหลดสมบูรณ์
2. มีความสวยงามมากขึ้น
3. ปรับแต่งได้ง่ายขึ้น
4. ติดตั้งได้ง่ายขึ้น ใช้สคริปต์น้อยลง

สอนทำบล็อกของ Blogger

ตัวอย่างของ Tabber ดูได้จาก >> Tabber Menu DEMO 


วิธีติดตั้ง

เริ่มต้น ให้ Log in เข้าไปที่ blogger >>  ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML

หากคุณไม่ชำนาญในการแก้ไขแม่แบบอย่าลืมทำการ Backup แม่แบบเอาไว้ก่อน >> วิธี Backup template ใน Blogger



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

/* Tabber New Edit By  Hackublog */
.tabberlive{width:310px;float:left;display:inline;font-size:10px;margin:10px 0 10px 0;}
.tabbernav{margin:0;padding:3px 0;border-bottom:1px solid #dcdcdc;font-family:copperplate gothic light,Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;font-color:#282828;}
.tabbernav li{list-style:none;margin:0;display:inline}
.tabbernav li a{padding:10px 10px 5px 10px;margin-right:5px;border:1px solid #dcdcdc;border-bottom:none;background:#8E8E8E;text-decoration:none;color:#ffffff;-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px}
.tabbernav li a:hover{color:#520000;background:#ffffff;border-color:#dcdcdc;text-decoration:none}
.tabbernav li.tabberactive a,.tabbernav li.tabberactive a:hover{background:#F7F7F7;color:#282828;text-shadow:0.5px 0.5px 0.5px #ffffff;}
.tabberlive .tabbertab{padding:15px 5px 5px 5px;border:1px solid #dcdcdc;border-top:0;background:#F7F7F7;}
.tabberlive .tabbertab h2,.tabberlive .tabbertabhide{display:none}
.tabbertab .widget-content ul{list-style:none;margin:0 0 10px 0;padding:5px}
.tabbertab .widget-content li{margin:0 5px;padding:5px 0 5px 8px;display:block;background:#ECECEC;border-top:0.5px solid #ffffff;border-bottom:0.5px solid #DDDDDD;color:#000;}
.tabbertab .widget-content li:hover{background:#BEBEBE;}
.tabbertab .widget-content li a{color:#000;}
.tabbertab .widget-content li a:hover{color:#920000;text-decoration:none;}

ปรับค่าความกว้าง 310px ให้พอดีกับความกว้างของ Sidebar ใน Template ของคุณ และสำหรับแนวทางปรับแต่ง CSS ในส่วนอื่น ๆ ให้ใช้ภาพด้านล่างเป็นแนวทาง

Tab menu for Blogger

ขั้นที่ 2 ต่อจากขั้นที่ 1 ขั้นนี้เป็นการติดตั้งจาวาสคริปต์ที่ทำให้ Tabber มีการซ่อนแสดงผล

ค้นหาโค้ด </head> แล้ววางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว

<!--Tabber New Edit By  Hackublog-->
<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
//]]>
</script>
<script src='http://hackublox.googlecode.com/files/tabber-minimized.js' type='text/javascript'/>


ขั้นที่ 3 ต่อเนื่องจากขั้นที่ 2 ค้นหาโค้ด <div id='sidebar-wrapper'> หรือ <div id='sidebar'>

แล้วเลือกวางโค้ดต่อไปนี้ลงไปในตำแหน่งที่ 1 หรือ 2 หนึ่งดังรูป
โค้ด

<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
</div>

หมายเหตุ หากพื้นที่ Sidebar ของคุณมีน้อยผมแนะนำให้ตัด Tab ออกไป 1 Tab ซึ่งจะเหลือ 2 Tab และโค้ดจะเหลือเพียง

<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
</div>



สอนทำบล็อก

3.1 ถ้าวางตำแหน่งที่ 1 Tabber จะปรากฎก่อน Widget อื่น ๆ

วิธีทำ blogger

3.2 ถ้าวางในตำแหน่งที่ 2 Tabber จะปรากฎหลังจาก Widget อื่น ๆ

สอน blogspot

3.3 ถ้าหากต้องการวางในตำแหน่งอื่น ๆ นอกจากที่กล่าวมาให้สอบถามเพิ่มเติมที่กล่อง Comment ด้านล่างครับ


ขั้นที่ 4 เมื่อจบขั้นที่ 3 แล้วให้บันทึกแม่แบบ และไปที่ >> องค์ประกอบของหน้า ซึ่งคุณจะพบพื้นที่สำหรับเพิ่ม Gadget ซึ่งคุณสามารถเพิ่ม Gadget ใด ๆ ก็ได้ตามที่ต้องการ

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

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

  1. มดลองเอาไปทำดูแล้วคะ แต่ว่าเจ้าตัวเลข 1 2 3 มันไม่ได้เรียงตามแนวขวางเหมือนในรูปที่คุณแนะนำ แต่มันกลับเรียงลงมาตามแนวตั้งคะ ... ลองพยายามจะแก้ไข แต่มันก็ไม่สำเร็จ (เพราะเป็นมือใหม่คะ เลยยุ่งไปหมด)

  1. @ Maliwan : ถึงแม้จะเรียงเป็นแนวตั้งแต่ถ้าหน้าแสดงผลเห็นเป็น Tab ก็ใช้ได้ครับ

  1. เราจะทำให้ตัวหนังสือที่แสดงใหญ่ขึ้นไงเหรอครับ มันเล็กไปหน่อย

  1. @ showOutdoor : ปรับค่าตรงค่าของ font ในโค้ดของขั้นที่ 1 ได้เลยครับ

    เช่น จาก font-size:12px; เป็น font-size:14px; เป็นต้นครับ

  1. คุณ เกจิ คะ สร้าง Tab สูงสุดได้กี่ Tab คระ

  1. @ Rulala : ได้หลาย Tab ครับ ถ้าพื้นที่พอ แต่ต้องเพิ่มโค้ดในขั้นที่ 3 ด้วย เช่นต้องการ 4 tab ก็เพิ่มเป็น

    <div class='tabber'>
    <b:section class='tabbertab' id='tab1' maxwidgets='1'/>
    <b:section class='tabbertab' id='tab2' maxwidgets='1'/>
    <b:section class='tabbertab' id='tab3' maxwidgets='1'/>
    <b:section class='tabbertab' id='tab4' maxwidgets='1'/>
    </div>

    ปล.อย่าลืมดาวน์โหลด http://hackublox.googlecode.com/files/tabber-minimized.js backup เอาไว้ด้วยครับ

  1. ขอบพระคุณคร่า ถ้าเจอกันขอจุ๊บ 10 ที อิอิ ไปแร้นนนน

  1. หา div id='sidebar-wrapper' หรือ div id='sidebar' ไม่เจออะค่ะ ลองใช้ Ctrl + F แล้วนะค่ะ ไม่มีอะคะ

  1. @save-hosting.com: พอดีแม่แบบที่คุณใช้เป็นแม่แบบรุ่นใหม่ครับ ให้ค้นหาโค้ด <div class="column-right-inner"> แทนครับ

  1. ขอบคุณค่ะ ได้แล้วค่ะ

  1. ลองแท็บจากในบล็อคนี้ไปหลายเแบบเลย ตกลงว่าชอบอันนี้ที่สุด อิอิ :))

  1. รบกวนพี่ดูให้หน่อยคะ ทำแล้วเป็นแบบนี้ งง มีเส้นเล็กๆ เลยไปหน่อยด้วย ต้องแก้ยังไงคะ
    และ ขั้นที่ 4 เมื่อจบขั้นที่ 3 แล้วให้บันทึกแม่แบบ และไปที่ >> องค์ประกอบของหน้า ซึ่งจะพบพื้นที่สำหรับเพิ่ม
    Gadge ก็ไม่มี เหมือนที่พี่ทำเลยคะ 1 2 3 มีแต่ในหน้าแสดงผล
    http://zakuratravel.blogspot.com/

  1. ผมใส่ไม่ได้ครับอาจาร์ย ผมหา<div id='sidebar-wrapper'> หรือ <div id='sidebar'> ไม่เจออ่ะครับ
    ผมใช้ Template อันนี้ครับ
    Blogger Template Style
    Name: Simple
    Designer: Josh Peterson
    URL: www.noaesthetic.com

  1. ผมหา<div id='sidebar-wrapper'> หรือ <div id='sidebar'> ไม่เจอครับ

    Blogger Template Style
    Name: Simple
    Designer: Josh Peterson
    URL: www.noaesthetic.com

    ผมใช้Template นี้ครับ

  1. ไม่เจอทั้งโค๊ด <div class="column-right-inner"> และ
    <div id='sidebar-wrapper'> หรือ <div id='sidebar'> เลยครับ
    แ้ก้ไม่ได้ ไม่รู้จะวางโค๊ดตรงไหน

  1. 3อันนี้ไม่เจอเลยครับ
    <div class="column-right-inner"><div id='sidebar-wrapper'><div id='sidebar'>

  1. คุณคับงั้นนี่ <div class='column-right-inner'>เปลี่ยนจากด้านบนจากฝนสองเม็ดกลายเป็นเม็ดเดียว

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

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

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