Ads 468x60px

Navbar azul fixada no topo do blog


Olá amigos, como vocês viram, eu sou um dos caras que gostam de personalizar as obras de outros... Hoje eu personalizei uma navbar que fica fixada no topo do blog, nela tem campo de busca no seu blog, campo para assinar o FEED do blog e e icones (Facebook, Twitter & Página de Contato). Lembrando, a navbar original pertence ao site Blogger Themes e eu apenas personalizei.
Para visualizar em funcionamento CLIQUE AQUI...


Para adcionar essa belíssima navbar ao seu blog é muito simples, vá ao editor HTML de seu blog e clique em "Expandir modelos de widgets".

Em seguida Pressione Ctrl+F ( Atalho de busca ) e procure por:
<body
Lembrando, a tag <body> pode estar com outros itens dentro, então procure por <body, sem fechar a tag.

Encontrando a tag, cole o seguinte código ACIMA dela:

<style type='text/css'>

/*==========================
Navbar por Denis Gomez
==========================*/

#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(&apos;http://feedburner.google.com/fb/a/mailverify?URL-DO-FEED&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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> Pronto, feito, lembre-se de trocar URL-FEED, URL-FACEBOOK, URL-TWITTER & URL-CONTATO pelos respectivos...

Postado por Denis Gomez

0 comentários:

Postar um comentário

Assinar: Postar comentários (Atom)