Build Easy

Sunday, September 24, 2006

title iconBlogger top navbar DIY

By the end, you should have generated something like this:



Yes, no search all blogs, no next blog, and no get your own blog. All relevant to your own blog site with a nice site search feature provided by Blogger.

At your blog administration, switch to the Template tab, and Change the Blogger Navbar to, say, Black. Save Template Changes, and Republish. Now you've inplemented the normal Blogger top navbar. Then open up your blog page, view the source HTML, find 2 snippets of codes that Blogger has inserted into your pages, they are:

1) The CSS for the navbar, at the end of all normal style information and immediately before the </head> tag, looking like

<!-- --><style type="text/css">@import url(http://www.blogger.com/css/navbar/main.css);@import url(http://www.blogger.com/css/navbar/3.css);div.b-mobile {display:none;}</style>


2) The HTML and javascript snippet of the navbar, immediately after the <body> tag and just before the header div(or not), looking like

<!-- --><div id="b-navbar"><a href="http://www.blogger.com/" id="b-logo" title="Go to Blogger.com"><img src="http://www.blogger.com/img/navbar/3/logobar.gif" alt="Blogger" width="80" height="24" /></a><div id="b-sms" class="b-mobile"><a href="sms:?body=Hi%2C%20check%20out%20%E4%B8%AA%E4%BA%BA%E7%9A%84%E6%80%A7%E8%B4%A8%20at%20cn.econguru.com%2F">Send As SMS</a></div><form id="b-search" name="b-search" action="http://search.blogger.com/"><div id="b-more"><a href="http://www.blogger.com/" id="b-getorpost"><img src="http://www.blogger.com/img/navbar/3/btn_getblog.gif" alt="Get your own blog" width="112" height="15" /></a><a href="http://www.blogger.com/redirect /next_blog.pyra?navBar=true" id="b-next"><img src="http://www.blogger.com/img/navbar/3/btn_nextblog.gif" alt="Next blog" width="72" height="15" /></a></div><div id="b-this"><input type="text" id="b-query" name="as_q" /><input type="hidden" name="ie" value="UTF-8" /><input type="hidden" name="ui" value="blg" /><input type="hidden" name="bl_url" value="cn.econguru.com/" /><input type="image" src="http://www.blogger.com/img/navbar/3/btn_search_this.gif" alt="Search This Blog" id="b-searchbtn" title="Search this blog with Google Blog Search" onclick="document.forms['b-search'].bl_url.value='cn.econguru.com/'" /><input type="image" src="http://www.blogger.com/img/navbar/3/btn_search_all.gif" alt="Search All Blogs" value="Search" id="b-searchallbtn" title="Search all blogs with Google Blog Search" onclick="document.forms['b-search'].bl_url.value=''" /><a href="javascript:BlogThis();" id="b-blogthis">BlogThis!</a></div></form></div><script type="text/javascript"><!--

function BlogThis() {Q='';x=document;y=window;if(x.selection) {Q=x.selection.createRange().text;} else if (y.getSelection) { Q=y.getSelection();} else if (x.getSelection) { Q=x.getSelection();}popw = y.open('http://www.blogger.com/blog_this.pyra?t=' + escape(Q) + '&u=' + escape(location.href) + '&n=' + escape(document.title),'bloggerForm','scrollbars=no,width=475, height=300,top=175,left=75,status=yes,resizable=yes');void(0);}
function blogspotInit() {}
--></script><script type="text/javascript"> blogspotInit();</script><div id="space-for-ie"></div>

In your cases, cn.econguru.com should be other domains such as *.blogspot.com. Highlighted lines are those that you are going to get rid of. After erasing them, save the altered snippets in your computer.

Once you're ready, go back to the blog administration, switch off Blogger Navbar, insert those snippets that you have saved to where they were in the Template editing box, Save Template Changes and Republish. Done!! Check your blog site for a hooray!

»Post a Comment

0 Comments:

»Post a Comment

Links to this post:

Create a Link

« Home