Search This Blog

Monday, September 14, 2009

How to make the under nafbar like " Andrastorm Global Site"




Did you ever think to make the blog nafbar as " Andrastorm Global Site Navbar". As shown below:


  • Very easy way. you just follow the steps below:
  • - Login to your blogger account
  • - click layout - edit html
  • - go to your template code and find the code ]]></b:skin>
  • - then copy the code below and paste it directly above the code ]]></b:skin>

code :

/* code for under navbar
--------------------------------------- */

#under-navbar img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}

#under-navbar p.info {
float: right;
padding-right:40px;
line-height: 1.5;
height: 100%;
vertical-align: bottom;
}

#under-navbar p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
line-height: 1.2;
vertical-align: bottom;
}

#under-navbar a {
color:#00CCFF;
text-decoration:none;
}
#under-navbar a:hover{
color: #00FFFF;
}
#under-navbar {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #003366;
background: #58595B url(http://www.promoruparupa.com/wpprr/wp-content/themes/inanis-glass/images/wind/menu-bg.png);
width: 100%;
left: 0px;
text-align: left;
color: #ffffff;
font-family: verdana;
font-size: 12px;
z-index:10000;
bottom:0;
}

  • - After that, copy the code below, and paste the below code just above </body>

Code :

<div id='under-navbar'>
<p><img src='http://winksite.mobi/xhtml/images/logos/27614-20090412071612.png' style='width: 28px; height: 28px;'/>&#160;&#160;&#160;
<a href='http://andrastorm-global-site.blogspot.com/'><b>Andrastorm Site</b>
</a>&#160;&#160;&#169;&#160;2009&#160;|
Design by <a href='http://andrastorm-global-site.blogspot.com/' target='_blank'>Andra Pratama</a>
&#160;&#160;&#160;<img border='0' src=''/></p>
<p class='info'>Powered by <a href='http://www.blogger.com'>Blogger</a> |
Subcribe <a href='http://www.feedburner.com' target='_blank'><a href='http://feeds.feedburner.com/AndrastormGlobalSite'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/AndrastormGlobalSite?bg=000000&amp;fg=FFFFFF&amp;anim=1&amp;label=listeners' style='border:0' width='88'/></a></a></p>
</div>

  • - And last, click save.
See your blog nafbar now


Hopefully useful






Did you ever think to make the blog nafbar as " Andrastorm Global Site Navbar". As shown below:


  • Very easy way. you just follow the steps below:
  • - Login to your blogger account
  • - click layout - edit html
  • - go to your template code and find the code ]]></b:skin>
  • - then copy the code below and paste it directly above the code ]]></b:skin>

code :

/* code for under navbar
--------------------------------------- */

#under-navbar img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}

#under-navbar p.info {
float: right;
padding-right:40px;
line-height: 1.5;
height: 100%;
vertical-align: bottom;
}

#under-navbar p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
line-height: 1.2;
vertical-align: bottom;
}

#under-navbar a {
color:#00CCFF;
text-decoration:none;
}
#under-navbar a:hover{
color: #00FFFF;
}
#under-navbar {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #003366;
background: #58595B url(http://www.promoruparupa.com/wpprr/wp-content/themes/inanis-glass/images/wind/menu-bg.png);
width: 100%;
left: 0px;
text-align: left;
color: #ffffff;
font-family: verdana;
font-size: 12px;
z-index:10000;
bottom:0;
}

  • - After that, copy the code below, and paste the below code just above </body>

Code :

<div id='under-navbar'>
<p><img src='http://winksite.mobi/xhtml/images/logos/27614-20090412071612.png' style='width: 28px; height: 28px;'/>&#160;&#160;&#160;
<a href='http://andrastorm-global-site.blogspot.com/'><b>Andrastorm Site</b>
</a>&#160;&#160;&#169;&#160;2009&#160;|
Design by <a href='http://andrastorm-global-site.blogspot.com/' target='_blank'>Andra Pratama</a>
&#160;&#160;&#160;<img border='0' src=''/></p>
<p class='info'>Powered by <a href='http://www.blogger.com'>Blogger</a> |
Subcribe <a href='http://www.feedburner.com' target='_blank'><a href='http://feeds.feedburner.com/AndrastormGlobalSite'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/AndrastormGlobalSite?bg=000000&amp;fg=FFFFFF&amp;anim=1&amp;label=listeners' style='border:0' width='88'/></a></a></p>
</div>

  • - And last, click save.
See your blog nafbar now


Hopefully useful



About the Author : Andra Permana Halim. Bekerja pada Sebuah ISP terbesar di Indonesia. Sangat menyukai Semua hal di bidang Informatika. Sesekali menulis Tentang Keseharian dan wawasan yang banyak di jumapainya.

Your Friend's Comment !!!

Site Meter PageRank Checking Icon