Mais Tutos: Colocando uma Navbar Azul no seu blog!

segunda-feira, 30 de janeiro de 2012

Colocando uma Navbar Azul no seu blog!

Bem leitores do Mais tutos ! Vou mostrar hoje a vocês como por uma NavBar Azul muito bonita igual a que eu utilizo aqui no Mais tutos !

Vamos la!
1º Entre no HTML do seu blog e marque a caixinha "expandir modelos"
2º Procure por:
<body>

2º Logo a CIMA dela cole este código

<style type='text/css'>
/*==========================
Mais tutos
==========================*/
#navbar-iframe,.navbar,.cap-left{
display:none;
visibility:hidden;
}
#bt-bar-wrapper  ul {
list-style: none;
margin:0;padding:0;
}
#bt-bar-wrapper {
width: 100%;
height :40px;
min-width :960px;
margin:0;padding:0;
font-size: 13px;
font-weight: normal;
line-height: 22px;
background:#1a2c75;
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;
clear:both;
overflow:hidden;
}
#bt-bar-wrapper #logo{
left: 5px;
position: absolute;
top: 13px;_display:none;border:0;
}
#bt-bar-wrapper #logo img{
border:0;
}
/* Search */
#bt-bar-search{
left:26px;
position:absolute;
width:180px;
height:22px;
margin:8px 0px 0px 10px;
*margin:8px 0px 0px 10px;
font-size: 13px;
line-height: 22px;
}
#bt-bar-search-box{
float:left;
width:160px;
margin:2px 0px 0px 2px;
*margin:2px 0px 0px -8px;
font-size:13px;
line-height: 22px;
background:none;
}
#bt-bar-search input{border:0;}
#bt-bar-search-submit{
background:url(http://lh3.googleusercontent.com/-FNOJ7-ZHyss/TlzjT1izQsI/AAAAAAAAEBc/JTD7imSFhAo/search_icon.png);
background-repeat:no-repeat;
width:13px;
height:14px;
text-indent:-9999px;
cursor:pointer;
margin:4px 0px 0px 0px;
*margin:0px 0px 4px 0px;
text-transform: capitalize;
}
#bt-bar-inner-wrapper{
width: 940px;
*width:780px;
margin:0 auto;
}
/*  social media */
#bt-bar-sb{
position: absolute;
right: 0;
top: 9px;
*top: 7px;
}
#bt-bar-sb a{
float:left;
width:24px;
height:24px;
text-indent:-9999px;
margin-right:12px;
}
#bt-bar-sb li{float:left;list-style: none;}
#bt-fb{background:url(http://lh5.googleusercontent.com/-ZPeQXjkpP7E/TlzjTO_IdRI/AAAAAAAAEA8/73ZCmYJI8Ho/facebook.png);}
#bt-tw{background:url(http://lh5.googleusercontent.com/-QFmATY56A0Y/TlzjUAug1lI/AAAAAAAAEBY/yNt9Ku2ZYcQ/twitter.png);}
#bt-rss{background:url(http://lh4.googleusercontent.com/-XUV8eYIicwM/TlzjTr9hSFI/AAAAAAAAEBQ/r3tKfNgJYZs/rss.png);}
#bt-plus{background:url(http://lh5.googleusercontent.com/-rlt6NnJ65uk/TlzjTWjfBiI/AAAAAAAAEBE/AUGpZvgSDg0/gplus.png);}
#bt-mail{background:url(http://lh3.googleusercontent.com/-FdnMdna6urI/TlzjSxv3m_I/AAAAAAAAEA0/2iUt4ZQdWiI/email.png);}
/*  subscribeform */
#mintbar {
margin:9px 0px 0px 230px;
*margin:9px 0px 0px 140px;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
width:700px;color:#ebebeb;
}
#mintbar form {
float: left;
margin: 1px 10px 0;
}
#mintbar  #dsc{
float:left;
}
#mintbar .sbox {
color: #888888;
float: left;
margin: -0px 0 0;
padding: 2px 0px 2px 4px;
width: 145px;
font-size:12px;
}
#mintbar .go {
float: left;
margin: -2px 0 0 5px;
height:24px;
padding: 0px 4px 2px 5px;
}
#mintbar .sbox,#bt-bar-search{
-khtml-border-radius: 2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;background:#ebebeb;
border:1px solid #ebebeb;}</style>
<div id='bt-bar-wrapper'>
 <form action='/search' id='bt-bar-search' method='get'>
  <input id='bt-bar-search-box' name='q' type='text'/>
  <input id='bt-bar-search-submit' type='submit' value='Search'/>
  <div style='clear:both;'/>
 </form>
 <div id='bt-bar-inner-wrapper'>
<div id='mintbar'><div id='dsc'>Assine o <b>[FEED]</b> e receba nossos posts no seu email!</div><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?URL-DO-FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input class='sbox' name='email' placeholder='Digite seu e-mail aqui!' type='email'/>
   <input name='uri' type='hidden' value='URL-DO-FEED'/>
   <input name='loc' type='hidden' value='pt_BR'/>
   <input class='go' type='submit' value='Assinar'/>
   </form>
  </div>  <div class='clear'/>
 </div>
 <div id='bt-bar-sb'>
 <ul> <li><a href='URL-FACEBOOK' id='bt-fb'>Facebook</a></li>
<li><a href='URL-TWITTER' id='bt-tw'>Twitter</a></li>
<li><a href='URL-CONTATO' id='bt-mail'>Contato</a></li> </ul>
 </div>
</div>

Não se esqueça de fazer as mudanças necessárias para isto eu prefiro que vocês editem
o código no bloco de notas ou qualquer editor de textos para depois upa-la para o Blog!

Até a próxima pessoal !

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)