วิธีซ่อน Widget ในบางหน้าของ Blogger (New Hack!)

ในบทความที่ผ่านมาผมเคยได้นำเสนอบทความการเลือกซ่อน/แสดง Widget บน Sidebar ของ Blogger ไปแล้วครั้งหนึ่ง ซึ่งวิธีการในบทความดังกล่าวนั้นจะมีข้อจำกัดคือ

1. เป็นเลือกแสดง Widget ในบางหน้าของ Blogger เท่านั้น เช่น ในหน้าบทความ หรือในหน้าแรก แต่ไม่แสดงในหน้าอื่น ๆ

2. วิธีการที่ได้กล่าวมาแล้วนั้นใช้ได้กับ Widget ชนิด HTML/จาวาสคริปต์เท่านั้น

สอนทำ blogger

ต่อมาผมพยายามจะ Hack ให้ 1. ซ่อนในบางหน้า แต่แสดงผลในหน้าอื่น ๆ และ 2. ใช้ได้กับ Widget ทุกชนิดซึ่งก็ได้ผลดีทีเดียวครับ ก็เลยมาเขียนเล่าเอาไว้  นอกจากนี้เทคนิควิธีในบทความนี้สามารถต่อยอดไปปรับใช้กับ hack ในรูปแบบอื่น ๆ ได้ด้วย เช่น

1. ต้องการให้แต่ละ widget มีสีสันและรูปแบบต่างกันก็ทำได้ หรือ

2. จะขยายกล่องบทความให้เต็มจอและซ่อน sidebar ทั้งหมดในหน้าบทความก็ได้ด้วย  หากมีความสนใจผมก็จะค่อย ๆ เขียนบทความมาเล่าให้ฟังต่อไปภาย 2-3 วันนี้ครับ ถ้าเป็นแฟนตัวจริงกนก็อย่าลืมติดตามอ่านนะครับ



วิธีการซ่อน Widget

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

แล้วค้นหาโค้ด

<div id='sidebar'>
หรือ
<div id='sidebar-wrapper'>
หรือที่ใกล้เคียงกับโค้ดที่ว่านี้ และเมื่อพบแล้วเราจะเห็นว่ามี widget ที่มี id ต่าง ๆ กันเช่น HTML1, Label1, BlogArchive1 เป็นต้น

สอนทำบล็อก 

ขั้นที่ 2 ต่อไปให้สังเกตุและจำชื่อ id ของ Widget ที่คุณต้องการจะซ่อน เช่นในที่นี้ผมต้องการซ่อน Widget  BlogArchive กับ AdSense ก็จำชื่อ id เป็น  Adsense1 กับ Label1

ขั้นที่ 3 ในการซ่อน Widget ใช้โค้ดต่อไปนี้


3.1 กรณีต้องการซ่อน Widget ในหน้า Home หรือหน้าหลักใช้โค้ด

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#Adsense1 ,#Label1 {display:none;}
</style>
</b:if>


3.2 กรณีต้องการซ่อน Widget ในหน้าที่แสดงบทความ (เมื่อคลิกเข้าไปอ่าน) ใช้โค้ด

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#Adsense1 ,#Label1 {display:none;}
</style>
</b:if>


3.3 กรณีต้องการซ่อน Widget ในหน้าที่แสดงคลังบทความของบล็อกใช้โค้ด

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<style type='text/css'>
#Adsense1 ,#Label1 {display:none;}
</style>
</b:if>


3.4 กรณีต้องการซ่อน Widget ในหน้าแรก + หน้า Label + หน้า search ของบล็อกใช้โค้ด

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
#Adsense1 ,#Label1 {display:none;}
</style>
</b:if>


หมายเหตุ
โค้ดสำหรับซ่อน Widget ทั้ง 2 ที่ได้กล่าวมา ส่วนที่กำหนด Style อาจเขียนเป็น

<style type='text/css'>
#Adsense1 {display:none;}
#Label1 {display:none;}
</style>

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



ขั้นที่ 4 หลังจากที่สร้างโค้ดในขั้นที่ 3 ได้แล้วให้นำโค้ดไปวางไว้ใน Template โดย

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

จากนั้นค้นหาโค้ด </head> แล้ววางโค้ดในขั้นที่ 3 เอาไว้ก่อนหน้าโค้ดดังกล่าว เมื่อบันทึกแม่แบบก็จบขั้นตอน



บทสรุป

ในการซ่อนครั้งนี้เราอาศัยความรู้เดิม ผนวกกับการใช้ display:none เข้ามาช่วยเพื่อไม่ให้แสดงผลในหน้าที่ต้องการนั่นเองครับ ลองทำดูนะครับ เทคนิคง่าย ๆ นี้ยังสามารถปรับใช้ได้อีกมาก อย่างน้อยถ้าในหน้าแรกของคุณมี Widget เป็นจำนวนมาก ก็จะทำให้การโหลดหน้าใช้เวลานาน วิธีนี้ก็ช่วยแก้ปัญหาที่ว่าบน blogger ของคุณได้

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

  1. เยี่ยมมาก ๆ เลยครับ กำลังต้องการอยู่พอดีเลย

    ขอบคุณพี่ี Hackublog มากนะครับ

  1. เราสามารถ กำหนดไม่ให้โชว์เมื่อเข้าดู หน้าเว็บ บางหน้าได้มั๊ยคับ

  1. @ win : ทำได้ครับใช้โค้ด
    <b:if cond='data:blog.url == &quot; ใส่ URL ตรงนี้ &quot;'>
    ตรงนี้ใส่โค้ดตามที่ได้อธิบายในบทความ
    </b:if>

  1. ขอบคุณมากครับ

  1. ผมลองทำ วิธีซ่อน widget ตาม URL ที่กำหนด
    ตอนแรกใช้โค้ด {display:none !important;} แบบนี้ กับแม่แบบตัวเก่าของ blogger ก็ใช้งานได้คับ
    แต่พอผมจะใช้โค้ด {display:none !important;} กับแม่แบบ ตัวใหม่ของ blogger กับไม่ซ่อนให้ผมเลย
    ผมจึงใช้แบบที่ พี่แนะนำในบทความนี้ คือ {display:none;} ก็ยังไม่แสดงอยู่ดีคับ
    เกี่ยวข้องอะไรหรอคับ

  1. ตอนยังทำได้อยู่มั้ยครับ ทำไมผมทำไม่ได้อะ = =

  1. @ ongz : นี่เป็นวิธีที่ใช้กับแม่แบบรุ่นเก่าครับ แม่แบบรุ่นใหม่ยังไม่ได้เขียนไว้ครับ

    ถ้าเป็น HTML gadget ยังสามารถซ่อน/แสดงได้ด้วยวิธีในบทความนี้ครับ
    http://hackublog.blogspot.com/2009/11/gadget-sidebar.html

  1. จะซ่อน เฉพาะ ตอน search ได้ไหมครับ " "

  1. ขอบคุณมากๆเลยค่ะ ใช้งานได้ดีมากจ้ะ

  1. ลองทำดูแล้ว สุดยอดมากครับ

  1. ขอลิงค์บทคความเกี่ยวกับการขยายกล่องบทความให้เต็มจอและซ่อน sidebar ทั้งหมดในหน้าบทความ

  1. ผมก็อยากได้เหมือนคุณ hack2know เหมือนกันครับ ช่วยตอบด้วยคุณMr.Hackublog T T~~~

  1. ถ้าจะซ่อน ทั้งหน้าที่แสดงบทความ กับหน้าที่แสดง ป้ายกำกับ ต้องทำไงครับ

  1. www.basic-hack.blogspot.com

    แนะนำเว็บรวมความรู้เกี่ยวกับ Hack , Security , it , seo ครับ

  1. เคลียดจริง เลย แก้จนปวดตาละ ยังไม่ได้เลย ทำตามคู่มือนี้ละคับ ทำไมไม่ได้ ผมงง จริง

  1. ถ้าเราจะซ่อน ในหน้าบทความและ Label ต้องใช้โค้ดอะไรครับผม

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

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

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