12 | NavBar Hack

เคยรู้สึกไหมว่า navbar ด้านบนของ Blog เรามันช่างเกะกะสิ้นดี ทำให้ Blog เราไม่สวยงาม หากมีความรู้สึกทำนองนี้แล้ว เรามาทำการ ซ่อน navbar กัน

แต่จะทำการ ซ่อน navbar อย่างไร ต้องมาดูก่อนว่ามันแสดงผลยังไง

สำหรับ Old Blogger navbar มันแสดงผลผ่าน tag <iframe> ดังรูปแบบนี้

<iframe src="" height="30px" width="100%" marginwidth="0" marginheight="0" scrolling="no" id="navbar-iframe" frameborder="0"></iframe>

ส่วน New Blogger จะเป็นแบบนี้

<div class='navbar section' id='navbar'>
<div class='widget Navbar' id='Navbar1'>
<iframe src="" height="30px" width="100%" marginwidth="0" marginheight="0" scrolling="no" id="navbar-iframe" frameborder="0">
</iframe></div></div>

ดังนี้วิธีที่ง่ายที่สุดที่จะ ซ่อน navbar ไม่ให้ปรากฎบนหน้า Blog คือใช้ CSS

สำหรับผู้ที่ใช้ New Blogger ให้ไปที่ Template >> Edit HTML >> แล้วมองหา ]]></b:skin> ซึ่งจะอยู่ก่อนหน้า </head>

ให้เติม code ดังนี้ใส่เข้าไปก่อนหน้า ]]></b:skin> แล้วทำการ Save Template ก็เป็นอันเสร็จเรียบร้อย

#navbar {
  display:none;
}

ส่วนคนที่ใช้ Old Blogger ให้ไปที่ Template >> Edit HTML >> แล้วมองหา </style> ซึ่งจะอยู่ก่อนหน้า </head> แล้วเติม code ดังนี้ใส่เข้าไปก่อนหน้า </style> แล้วทำการ Save Template Changes ก็เป็นอันเสร็จเรียบร้อย

#navbar-iframe {
  display:none;
}

หมายเหตุ New Blogger นั้น สามารถใช้ CSS แบบเดียวกับของ Old Blogger ได้ การแสดงผลจะไม่ต่างกัน

Update 27 มีนา 2550 : เนื่องจากคุณ meomee บอกว่า navbar อำนวยความสะดวกที่สามารถกดโพสได้โดยไม่ต้องเข้าหน้า Blogger

มาปรับแต่งใหม่ เราสามารถทำให้ navbar โชว์ก็ต่อเมื่อเอาเมาส์ไปชี้ ถ้าไม่มีเมาส์ไปชี้ navbar ก็จะถูกซ่อนอยู่ต่อไป

หมายเหตุ ใช้ได้เฉพาะกับ Firefox ผู้ใช้ IE เสียใจด้วยครับ
สำหรับ New Blogger ให้ใช้ CSS code นี้แทน code เดิม

#navbar {
  filter:alpha(opacity=0);
  opacity:0.0;
}
#navbar:hover {
  filter:alpha(opacity=70, FinishedOpacity=70);
  opacity:0.70;
}

สำหรับ Old Blogger ใช้อันนี้

#navbar-iframe {
  filter:alpha(opacity=0);
  opacity:0.0;
}
#navbar-iframe:hover {
  filter:alpha(opacity=70, FinishedOpacity=70);
  opacity:0.70;
}