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=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); }
#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>* html #mta_bar{ /*IE6 hack*/
position: absolute; width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); }
#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; }
<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=''' onmouseover='self.status='Arda Blog';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<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=''' onmouseover='self.status='Arda Blog';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>
7. Just click SAVE TEMPLATE
Hello, my name is Aamir khan. I'm a 24year old blogger from Pakistan.
No comments:
Post a Comment
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.