เอาแถบ blogspot ด้านบนออก ทำยังไงคับ

004275 · 31 ตุลาคม 2007, 14:01:41

ลืมไปแล้วอะ ขออีกที

ขอบคุณคับ

loco · 31 ตุลาคม 2007, 14:08:34

ค้นหาใน gg คำว่า remove navbar ครับ

janistar · 31 ตุลาคม 2007, 14:20:19

หาอันนี้ค่ะในหน้า Edit HTML

อ้างถึง]]></b:skin>
</head>

แล้วใส่ พวกนี้ ลงไปด้านบน

อ้างถึง#navbar {
display:none;
}

จะเป็นแบบนี้นะคะ

อ้างถึง#navbar {
display:none;
}
]]></b:skin>
</head>

เสร็จแล้วเซฟ ไปดูหน้าเวป nav bar ก้อจะหายไปแล้วค่ะ ^o^

ball6847 · 31 ตุลาคม 2007, 14:23:56

ของผมใช้อย่างงี้ง่ะ

#navbar-iframe{
display:none;
}

kornss · 31 ตุลาคม 2007, 17:43:41

#navbar { display:none; } วางไว้ระหว่าง <head> </head>

รุ่งเรืองตลอดกาล · 31 ตุลาคม 2007, 21:35:19

อ้างถึงหาอันนี้ค่ะในหน้า Edit HTML

อ้างถึง
]]></b:skin>
</head>

แล้วใส่ พวกนี้ ลงไปด้านบน
อ้างถึง
#navbar {
display:none;
}

จะเป็นแบบนี้นะคะ
อ้างถึง
#navbar {
display:none;
}
]]></b:skin>
</head>

เสร็จแล้วเซฟ ไปดูหน้าเวป nav bar ก้อจะหายไปแล้วค่ะ ^o^

ขอบคุณมากได้ผลแล้ว

mayzdream · 10 มกราคม 2008, 15:02:47

อ้างถึงจาก: janistar ใน 31 ตุลาคม 2007, 14:20:19
หาอันนี้ค่ะในหน้า Edit HTML

อ้างถึง]]></b:skin>
</head>

แล้วใส่ พวกนี้ ลงไปด้านบน
อ้างถึง#navbar {
display:none;
}

จะเป็นแบบนี้นะคะ
อ้างถึง#navbar {
display:none;
}
]]></b:skin>
</head>

เสร็จแล้วเซฟ ไปดูหน้าเวป nav bar ก้อจะหายไปแล้วค่ะ ^o^

ขอบคุงนะเคอะ รักนะ

004275 · 10 มกราคม 2008, 19:19:54

ทำไมไม่ได้อะคับ

Netslow · 11 มกราคม 2008, 09:54:35

many thanks krab

TUMZA

ผมหาโค้ดที่ว่าไม่เจอเลยครับมันยังทำได้อยู่ไหมครับผมเพิ่งหัดทำบลอคครับบอกที

adsene5438

ให้ก๊อป html มาทั้งหมดเลย ใส่ในโน๊ตเพต แล้วใช้คำสั่ง find พิมพ์คำตัวที่ก่อนคำจะไปแทรก เมื่อเจอแล้วก็แทรกลงไป แล้วก๊อปปี ไปใส่ที่เดิม แล้วก็เซฟครับ แค่นี้ก็ได้แล้ว

TUMZA

ผมยังหาไม่เจอเหมือนเดิมครับ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="<$BlogLanguageDirection$>">

<head>
<title><$BlogPageTitle$></title>

<$BlogMetaData$>

<style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name: Rounders
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 27 Feb 2004
----------------------------------------------- */

body {
background:#aba;
margin:0;
padding:20px 10px;
text-align:center;
font:x-small/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

/* Page Structure
----------------------------------------------- */
/* The images which help create rounded corners depend on the
following widths and measurements. If you want to change
these measurements, the images will also need to change.
*/
@media all {
#content {
width:740px;
margin:0 auto;
text-align:left;
}
#main {
width:485px;
float:left;
background:#fff url("http://www.blogblog.com/rounders/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0;
padding:0 0 10px;
color:#000;
font-size:97%;
line-height:1.5em;
}
#main2 {
float:left;
width:100%;
background:url("http://www.blogblog.com/rounders/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}
#main3 {
background:url("http://www.blogblog.com/rounders/rails_main.gif") repeat-y;
padding:0;
}
#sidebar {
width:240px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
}
}
@media handheld {
#content {
width:90%;
}
#main {
width:100%;
float:none;
background:#fff;
}
#main2 {
float:none;
background:none;
}
#main3 {
background:none;
padding:0;
}
#sidebar {
width:100%;
float:none;
}
}

/* Links
----------------------------------------------- */
a:link {
color:#258;
}
a:visited {
color:#666;
}
a:hover {
color:#c63;
}
a img {
border-width:0;
}

/* Blog Header
----------------------------------------------- */
@media all {
#header {
background:#456 url("http://www.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;
margin:0 0 0;
padding:8px 0 0;
color:#fff;
}
#header div {
background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;
padding:0 15px 8px;
}
}
@media handheld {
#header {
background:#456;
}
#header div {
background:none;
}
}
#blog-title {
margin:0;
padding:10px 30px 5px;
font-size:200%;
line-height:1.2em;
}
#blog-title a {
text-decoration:none;
color:#fff;
}
#description {
margin:0;
padding:5px 30px 10px;
font-size:94%;
line-height:1.5em;
}

/* Posts
----------------------------------------------- */
.date-header {
margin:0 28px 0 43px;
font-size:85%;
line-height:2em;
text-transform:uppercase;
letter-spacing:.2em;
color:#357;
}
.post {
margin:.3em 0 25px;
padding:0 13px;
border:1px dotted #bbb;
border-width:1px 0;
}
.post-title {
margin:0;
font-size:135%;
line-height:1.5em;
background:url("http://www.blogblog.com/rounders/icon_arrow.gif") no-repeat 10px .5em;
display:block;
border:1px dotted #bbb;
border-width:0 1px 1px;
padding:2px 14px 2px 29px;
color:#333;
}
a.title-link, .post-title strong {
text-decoration:none;
display:block;
}
a.title-link:hover {
background-color:#ded;
color:#000;
}
.post-body {
border:1px dotted #bbb;
border-width:0 1px 1px;
border-bottom-color:#fff;
padding:10px 14px 1px 29px;
}
html>body .post-body {
border-bottom-width:0;
}
.post p {
margin:0 0 .75em;
}
p.post-footer {
background:#ded;
margin:0;
padding:2px 14px 2px 29px;
border:1px dotted #bbb;
border-width:1px;
border-bottom:1px solid #eee;
font-size:100%;
line-height:1.5em;
color:#666;
text-align:right;
}
html>body p.post-footer {
border-bottom-color:transparent;
}
p.post-footer em {
display:block;
float:left;
text-align:left;
font-style:normal;
}
a.comment-link {
/* IE5.0/Win doesn't apply padding to inline elements,
so we hide these two declarations from it */
background/* */:/**/url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%;
padding-left:14px;
}
html>body a.comment-link {
/* Respecified, for IE5/Mac's benefit */
background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%;
padding-left:14px;
}
.post img {
margin:0 0 5px 0;
padding:4px;
border:1px solid #ccc;
}
blockquote {
margin:.75em 0;
border:1px dotted #ccc;
border-width:1px 0;
padding:5px 15px;
color:#666;
}
.post blockquote p {
margin:.5em 0;
}

/* Comments
----------------------------------------------- */
#comments {
margin:-25px 13px 0;
border:1px dotted #ccc;
border-width:0 1px 1px;
padding:20px 0 15px 0;
}
#comments h4 {
margin:0 0 10px;
padding:0 14px 2px 29px;
border-bottom:1px dotted #ccc;
font-size:120%;
line-height:1.4em;
color:#333;
}
#comments-block {
margin:0 15px 0 9px;
}
.comment-data {
background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 2px .3em;
margin:.5em 0;
padding:0 0 0 20px;
color:#666;
}
.comment-poster {
font-weight:bold;
}
.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-timestamp {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#666;
}
.comment-timestamp a:link {
color:#666;
}
.deleted-comment {
font-style:italic;
color:gray;
}

/* Profile
----------------------------------------------- */
@media all {
#profile-container {
background:#cdc url("http://www.blogblog.com/rounders/corners_prof_bot.gif") no-repeat left bottom;
margin:0 0 15px;
padding:0 0 10px;
color:#345;
}
#profile-container h2 {
background:url("http://www.blogblog.com/rounders/corners_prof_top.gif") no-repeat left top;
padding:10px 15px .2em;
margin:0;
border-width:0;
font-size:115%;
line-height:1.5em;
color:#234;
}
}
@media handheld {
#profile-container {
background:#cdc;
}
#profile-container h2 {
background:none;
}
}
.profile-datablock {
margin:0 15px .5em;
border-top:1px dotted #aba;
padding-top:8px;
}
.profile-img {display:inline;}
.profile-img img {
float:left;
margin:0 10px 5px 0;
border:4px solid #fff;
}
.profile-data strong {
display:block;
}
#profile-container p {
margin:0 15px .5em;
}
#profile-container .profile-textblock {
clear:left;
}
#profile-container a {
color:#258;
}
.profile-link a {
background:url("http://www.blogblog.com/rounders/icon_profile.gif") no-repeat 0 .1em;
padding-left:15px;
font-weight:bold;
}
ul.profile-datablock {
list-style-type:none;
}

/* Sidebar Boxes
----------------------------------------------- */
@media all {
.box {
background:#fff url("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color:#666;
}
.box2 {
background:url("http://www.blogblog.com/rounders/corners_side_bot.gif") no-repeat left bottom;
padding:0 13px 8px;
}
}
@media handheld {
.box {
background:#fff;
}
.box2 {
background:none;
}
}
.sidebar-title {
margin:0;
padding:0 0 .2em;
border-bottom:1px dotted #9b9;
font-size:115%;
line-height:1.5em;
color:#333;
}
.box ul {
margin:.5em 0 1.25em;
padding:0 0px;
list-style:none;
}
.box ul li {
background:url("http://www.blogblog.com/rounders/icon_arrow_sm.gif") no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:3px;
border-bottom:1px dotted #eee;
line-height:1.4em;
}
.box p {
margin:0 0 .6em;
}

/* Footer
----------------------------------------------- */
#footer {
clear:both;
margin:0;
padding:15px 0 0;
}
@media all {
#footer div {
background:#456 url("http://www.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;
padding:8px 0 0;
color:#fff;
}
#footer div div {
background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;
padding:0 15px 8px;
}
}
@media handheld {
#footer div {
background:#456;
}
#footer div div {
background:none;
}
}
#footer hr {display:none;}
#footer p {margin:0;}
#footer a {color:#fff;}

/* Feeds
----------------------------------------------- */
#blogfeeds {
}
#postfeeds {
padding:0 15px 0;
}
</style>

</head>

<body>



<div id="content">



<div id="header"><div>

<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
   <$BlogTitle$>
   <ItemPage></a></ItemPage>
</h1>
<p id="description"><$BlogDescription$></p>

</div></div>



<div id="main"><div id="main2"><div id="main3">

<Blogger>

<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>



<div class="post"><a name="<$BlogItemNumber$>"></a>

<BlogItemTitle>
    <BlogItemUrl><a href="<$BlogItemUrl$>" title="external link" class="title-link"></BlogItemUrl>
<h3 class="post-title">
    <$BlogItemTitle$>
</h3>
    <BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>

<div class="post-body">

<p>
<$BlogItemBody$>
</p>

</div>

<p class="post-footer">

<em><$I18NPostedByAuthorNickname$> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>  
<BlogItemCommentsEnabled>
<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$></span></a>
</BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links"><span style="text-transform:lowercase"><$I18NLinksToThisPost$></span></a>
</BlogItemBacklinksEnabled>
<$BlogItemControl$>
</p>

</div>




<ItemPage>

<div id="comments">

   <BlogItemCommentsEnabled><a name="comments"></a>

<h4><$I18NNumComments$>:</h4>

<dl id="comments-block">
<BlogItemComments>

<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>

<$I18NAtCommentTimeWithPermalink$>,

<$I18NCommentAuthorSaid$>

</dt>

<dd class="comment-body">

<p><$BlogCommentBody$></p>
     <$BlogCommentDeleteIcon$>

</dd>

     </BlogItemComments>

</dl>
      <p class="comment-timestamp">
<$BlogItemCreate$>
</p>
<p id="postfeeds"><$BlogItemFeedLinks$></p>
</BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>
<a name="links"></a><h4><$I18NLinksToThisPost$>:</h4>
<dl id="comments-block">
<BlogItemBacklinks>
<dt class="comment-title">
<$BlogBacklinkControl$>
<a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
</dt>
<dd class="comment-body"><$BlogBacklinkSnippet$>
<br />
<span class="comment-poster">
<em><$I18NPostedByBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
</span>
</dd>
</BlogItemBacklinks>
</dl>
<p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
</BlogItemBacklinksEnabled>

      <p style="padding-left:20px;">
   <a href="<$BlogURL$>"><< <$I18NHome$></a>
</p>
</div>

</ItemPage>



</Blogger>

</div></div></div>





<div id="sidebar">



<$BlogMemberProfile$>





<div class="box"><div class="box2"><div class="box3">

<MainOrArchivePage>
<h2 class="sidebar-title"><$I18NLinks$></h2>
<ul>
   <li><a href="http://news.google.com/">Google News</a></li>
   <li><a href="http://help.blogger.com/bin/answer.py?answer=41427">Edit-Me</a></li>
   <li><a href="http://help.blogger.com/bin/answer.py?answer=41427">Edit-Me</a></li>
</ul>
</MainOrArchivePage>

<h2 class="sidebar-title"><$I18NPreviousPosts$></h2>
<ul id="recently">
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>

<MainOrArchivePage>
<h2 class="sidebar-title"><$I18NArchives$></h2>
<ul class="archive-list">
      <BloggerArchives>
   <li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
     </BloggerArchives>
<ArchivePage><li><a href="<$BlogURL$>"><$I18NCurrentPosts$></a></li></ArchivePage>

</ul>
</MainOrArchivePage>
<p id="powered-by"><a href="http://www.blogger.com"><img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger" /></a></p>
<p id="blogfeeds"><$BlogFeedsVertical$></p>



</div></div></div>



</div>





<div id="footer"><div><div><hr />

<p> </p>

</div></div></div>



</div>



</body>

</html>

adsene5438

วิธีซ่อน Navbar ของ Blogger

1. เริ่มจากให้เพื่อนๆ login เข้าไปยัง blog ของ blogger ของเพื่อนๆเสียก่อน จากนั้นคลิกที่ รูปแบบ (layout) ครับ

2. ขั้นตอนต่อไปก็ให้คลิกที่ แก้ไข HTML (Edit HTML) จากเมนูด้านบน

3. เมื่อเข้ามาในหน้าแก้ไข Html แล้ว เพื่อนๆจะเจอโค้ดยุ่บยั่บไปหมด ก็ไม่ต้องรีบตกใจนะครับ ครองสติไว้ก่อน มันไม่ได้ยากขนาดนั้น สิ่งที่ต้องทำ เพื่อนๆก็แค่มองหาแท็ก <head>

4. เมื่อเจอ <head> แล้ว เพื่อนๆก็ก๊อปปี้โค้ดด้านล่างนี้แล้วนำไปวางในบรรทัดต่อจาก <head> เลยครับ

<script type='text/javascript'>
var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById('navbar-iframe');
if (showHeader)
{
nav.style.visibility='visible';
nav.style.display='block';
}
else
{
nav.style.visibility='hidden';
nav.style.display='none';
}
}
</script>
<style type='text/css'>
#navbar-iframe {
visibility: hidden;
display: none;
}
</style>

5. เมื่อก๊อปปี้โค้ดไปแปะแล้วก็ให้เพื่อนๆคลิกที่ปุ่ม บันทึกเทมเพลต (Save) แต่อย่าเพิ่งไปกดดูบล็อกนะครับ เพราะตอนนี้ Navbar มันหายไปแล้ว เมื่อเพื่อนๆกดดูบล็อกก็จะไม่สามารถกลับมายังหน้าการตั้งค่าได้ (นอกจากกลับไปที่ Dashboard) ดังนั้นเพื่อนๆจะต้องทำปุ่มพิเศษไว้สำหรับเรียกเจ้า Navbar กลับมาใช้งานเมื่อต้องการครับ

วิธีสร้างปุ่มสำหรับเรียก / ซ่อน Navbar

1. ต่อจากข้อ 5 เราจะอยู่ในหน้าการจัดการ layout อยู่ ให้เพื่อนๆคลิกที่แถบ องค์ประกอบของหน้า (Page Element) ครับ

2. ปุ่มเรียก / ซ่อน Navbar นั้นจะสร้างมาจาก JavaScript ครับ ดังนั้นเพื่อนๆจะต้องเพิ่มองค์ประกอบ JavaScript ลงในบล็อกโดยการคลิกที่ เพิ่มองค์ประกอบของหน้า (Add Page Element)

3. แล้วเลือกเพิ่ม HTML / จาวาสคริปต์ จากในหมวด

4. ใส่หัวข้อตามชอบครับ(ส่วนมากผมจะใส่ navbar)

แล้วก๊อปปี้โค้ดด้านล่างนี้ไปวางในช่องข้างล่าง จากนั้นก็คลิกที่ปุ่ม บันทึกการเปลี่ยนแปลง (Save) เป็นอันเสร็จครับ

<span style='cursor:pointer;' onclick='ShowHideNav();'>
Show/Hide Navbar
<a style='visibility:hidden;' href='http://www.e4share.com'></a>
</span>

5. เมื่อทำเสร็จครบทุกขั้นตอนแล้วให้เพื่อนๆลองกดดูบล็อก (View Blog) ได้เลยครับ จะเห็นว่า Navbar หายไปแล้ว และมีปุ่มสำหรับเรียกใช้งานอยู่ใน blog ของเพื่อนๆครับ

ทั้งหมดมาจาก เวป http://www.e4share.com ครับ

TUMZA

ทำได้แล้วครับขอบคุณมากครับ

รักพี่ๆใน TSB ทุกคนเลยช่วยน้องๆที่หัดทำได้เยอะเลยครับ

nontawut

โอวว ขอบคุณมากครับ :

inDexTop10

Wdbox

ลองเอาไปใช้บ้าง ได้ผลแฮะ ขอบคุณมากมายค่ะ

dekhome

ขอบคุณครับ

mintzip · 02 ธันวาคม 2009, 01:07:59

ขอบคุณครับ

Madoo · 02 ธันวาคม 2009, 01:53:45

แหมดีเลย ผมเพิ่งสร้างบลอกเสร็จเมื่อวาน มันมีแถบด้านบน ว่าจะมาถามว่าเอาออกไง แต่พอดีเปลียนธีม ธีมนี้ไม่มีบาร์