Friday, June 24, 2011
Do you like this story?
We can make a custom navbar using the Blogger Official Search and Navbar widget provided in different color schemes. This is again a great trick using the Iframe Technique. This idea came into my mind just last night when I observed that the source file of our blog had two Iframed widgets one is the poll widget and another is the Navbar. Fortunately, this is again a first time shared tutorial by us. Although we often remove Blogger Navigation bar but its Search function and share and follow links can prove very important.
Below you can see a customized version of the same navbar in two modes.
When users Log in, they will see this:
When users Log out of Blogger, they see this:
On clicking the share link, readers can share your blog post on Twitter, Facebook, Google Buzz or Google Reader.
On clicking the follow button, you can follow the blog updates:
The following Navigation colours are available:
Add Blogger Navbar To SidebarYou can use the code below to add the Navbar anywhere you want and not just the sidebar. You can add it to your blog posts also. To add the widget to your sidebar simply do this:
- Go to Blogger > Design
- and Paste the code below inside it,
<iframe src="http://www.blogger.com/navbar.g?targetBlogID=8193278726666811965& blogName=My+Blogger+Tricks&publishMode=PUBLISH_MODE_HOSTED& navbarType=SILVER&layoutType=LAYOUTS& searchRoot=http%3A%2F%2Fwww.mybloggertricks.com%2Fsearch& blogLocale=en&homepageUrl=http%3A%2F%2Fwww.mybloggertricks.com%2F&" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="237px" id="navbar-iframe" allowtransparency="true" title="Blogger Navigation and Search"></iframe>
Make these changes:
- Replace 7193277726666811965 with your BLog ID. Go To Blogger > Design and now look in your browser address bar, you find a long digit code. Copy it and paste it in place of this number 7193277726666811965
- Replace My+Blogger+Tricks with your Blog Name. It is the name of your blog that you see in your blogger dashboard. Remember to separate each word with a plus sign (+)
- Replace SILVER with your prefered colour scheme in capital letters. You can try four colour schemes which are : 1) BLUE 2) BLACK 3) SILVER and 4) TAN
- Replace www.MyBloggerTricks.com with your blog link (exclude http://) If your blog URL is http://xyz.blogspot.com then simply write xyz.blogspot.com
4. Save your widget and you are done!
View your blog and start playing with the official search box along with the free follow and share option. Have fun!
This post was written by: Rishikesh
Rishikesh is a 17 years old part time blogger, web designer and front end web developer. Follow him on Twitter