» Widget » How to Add Cool Navbar for Blogger

How to Add Cool Navbar for Blogger

Hello, friends! Previously, I've posted about How to Remove Blogger Navbar. Now, I will post about How to Add Cool Navbar for Blogger. This navbar is different with Blogger Navbar. In this trick, you can fill the navbar with your own text or link. This link can be contain "RSS Feed Subscription" link, or notice about blog maintenance, etc. Shortly, if you want to try How to Add Cool Navbar for Blogger, just follow the steps below. Before you try this trick, you can see the demo first.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check in the "Expang Widget Templates" box
4. Copy the code below, and paste above ]]></b:skin>
#mta_bar { background: #FFFFE1; border-bottom: 1px solid #808080; margin: 0 0 3px 0; padding: 4px 0; z-index: 100; top: 0; left: 0; width: 100%; overflow: auto; position: fixed; }
* html #mta_bar{ /*IE6 hack*/
position: absolute; width: expression(document.compatMode==&quot;CSS1Compat&quot;? document.documentElement.clientWidth+&quot;px&quot; : body.clientWidth+&quot;px&quot;); }
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a { text-decoration: none; color: #0000FF; }
#left_bar a:hover { text-decoration: underline; color: #0000FF; }
5. Copy the code below, and paste above </head>
<script src='http://fullblogtricks.googlecode.com/files/Full%20Blog%20Tricks-NavBar.js' type='text/javascript'/>
6. Still in this page, copy the code below, and paste under <body>
<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/' target='_blank'> Rss Feed </a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;Arda Blog&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://i1002.photobucket.com/albums/af149/Imtikhan/close.png' style='cursor:hand;cursor:pointer;'/></span></div>
=> The blue text is the navbar content, you can change it
7. Just click SAVE TEMPLATE

4 comments:

Post a Comment

:) :( :)) :D =)) →
Loading Comment Form