Como Adicionar uma Barra Flutuante no Blogger

Barra flutuante completa para você adicionar em seu blog, escolhendo se quer no topo ou no rodapé.

Utilizamos de várias ferramentas para complementar nossos blogs, pois, necessitamos sempre “mostrar” algo que julgamos ser importante que as pessoas que visitam nossas páginas estejam conhecendo. Mas, infelizmente nem sempre conseguimos colocar tudo que queremos, às vezes por não encontrar aquele código, outras por algum conflito que a referente ferramenta tem com algum outro código de nosso blog.

Uma funcionalidade encontrada em muitos blogs são as barras flutuantes, ou seja, aquelas barras horizontais que se encontram no topo ou no rodapé dos blogs que “seguem” o scroll das páginas seja subindo ou descendo. Dentro dessas barras, encontramos muitas vezes itens de menu, postagens em destaque, redes sociais e muitas outras possibilidades que são inseridas para que os visitantes tenham acesso a tal conteúdo.

Barra flutuante no seu blog

Apresentamos a você uma opção de barra flutuante para colocar em seu blog. Nessa barra, estão contidas algumas das ferramentas mais utilizadas em blogs (caixa de pesquisa, atalhos para redes sociais, botões de compartilhamento e tradutor). Além de tudo isso, ela conta com um botão fechar para caso o visitante não queira visualizá-la e também a possibilidade de configuração de posicionamento, ou seja, você terá a opção de escolher se quer que fique no topo ou no rodapé de seu blog.

Com tantas possibilidades, julgamos que essa barra possa ser uma opção bastante completa para além de acrescentar novas funcionalidades, também possa dar um novo visual às páginas de seu blog.

Barra Flutuante no Blogger
Barra Flutuante com Área de Pesquisa, Redes Sociais e Tradutor

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.


Colocando em seu blog

>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

>> Clique no código do template, pressione "CTRL+F" e pesquise por </head>

>> Logo ACIMA da tag encontrada cole o seguinte código:
 <script type='text/javascript'>
// Custom Toolbar for Blogger
//<![CDATA[
var toolbar_blogger = new Array();
var toolbar_clear = new Array();
function toolbarFloat(toolb) {
toolbar_blogger[toolbar_blogger.length] = this;
var ftrpointer = eval(toolbar_blogger.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.toolbsrc = document.all? document.all[toolb] : document.getElementById(toolb);
this.toolbsrc.height = this.toolbsrc.offsetHeight;
this.toolbheight = this.cmode.clientHeight;
this.toolboffset = toolbGetOffsetY(toolbar_blogger[toolbpointer]);
var toolbbar = 'toolbar_clear['+toolbpointer+'] = setInterval("toolbarFloatInit(toolbar_blogger['+toolbpointer+'])",1);';
toolbbar = toolbbar;
eval(toolbbar);
}
function toolbGetOffsetY(toolb) {
var toolbTotOffset = parseInt(toolb.mtasrc.offsetTop);
var parentOffset = toolb.toolbsrc.offsetParent;
while ( parentOffset != null ) {
toolbTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return toolbTotOffset;
}
function toolbarFloatInit(toolb) {
toolb.pagetop = toolb.cmode.scrollTop;
toolb.toolbsrc.style.top = toolb.pagetop - toolb.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("custom-toolbar").style.visibility = "hidden";
}
//]]>
</script>
>> Pesquise agora por ]]></b:skin>

>> Logo ACIMA da tag encontrada cole o seguinte código:
#custom-toolbar {
overflow: hidden;
position: fixed;
background: #1B1B1B url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRHeyqqycroxmAIzR36lmF9CBMaGMl9I95QENriAhS8a3Q8vXH81SLaSu8ot225d7oTEvrMMa4MnjM6YkWFV0cP26u217IEXay47AxTbCTeckVz68wWUCA9Rvrd3wScRWYwSnjRhCK7m6w/s1600/pagelist.png") repeat-x scroll 0 bottom;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
height: 33px;
margin: 0 auto;
width: 100%;
bottom:0px;
right:0;
}
.close-toolbar {
float: right;
margin-top:6px;
padding-right: 10px;
cursor: hand;
cursor: pointer;
}
.search-text {
color: #D1D1D1;
text-align: center;
border-radius: 10px;
}
.google_translate:hover img {
filter:alpha(opacity=0.90);
-moz-opacity: 0.90;
opacity: 0.90;
border:0;
}
* Caso desejar que a barra fique no topo do blog, substitua o trecho destacado em VERMELHO bottom por top.
* Caso desejar substituir a cor da barra flutuante, apague todo o trecho destacado em AZUL e coloque o código de sua cor preferida.
>> Pesquise novamente, agora por </body>

>> Logo ACIMA da tag encontrada, cole o seguinte código:
<div id='custom-toolbar'>
<img border='0' class='close-toolbar' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8vn2zzx7meEBJ5T4W-W9fikjNUyFNp-9nUr55D3GQyVnGQ6LPyOQoT_EF2-zlXH12GBec-xTS_3YQKJv4-I5jFEHORXl6S1y_GTCC9Wch2p6UAh4yFcrc3ftPDEv1eo-49_hDBSXiReMN/s1600/close_button.png' title='Close' width='17'/>
<table border='0' cellpadding='2'>
<tr>
<td style='padding-left:30px; padding-right:50px;'><form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input class='search-text' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Pequise aqui...&quot;;' onfocus='if (this.value == &quot;Pesquise aqui...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Pesquise aqui...'/></form></td>
<td style='padding-left:20px;'><a href='http://www.facebook.com/username' title='Curta no Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig6wtrLw0R7iGPo0QvfW9AuGzux3fVXUX1PcJR3TeGGJNdi98jDvZyNVImJJyDy-OT7IN8oVRIiGVawABci3T4NWXOr1NS6BbjloBxLI8hFubzjuZyklZSGTAnMfZvvNsLn2qTemTuzK9d/s1600/facebook-icon.png'/></a></td>
<td><a href='http://twitter.com/username' title='Siga-nos no Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhujUQMdzL5b8GmI0xDEUdWpYecqRqC7ph1TtlBkTbW7hiQET8FQCzlvhKJCWcufE55v_cZWmc6Zwh025pXCsFlDtFOya81Qxoygac_JqSJ8DuGu4AOWPiypeobZ37EbAMITLPi-KiVbQgf/s1600/twitter-icon.png'/></a></td>
<td><a href='feeds.feedburner.com/username' title='Inscreva-se no Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc711rSTCHc5cqzzeiiwc7h0XhJe_W8I0TqqIeabMTnaNxWqcCy6WJcYTXggezi-GZ0luKuN1Ppjmy6G-9NKhwklGrUpoqzUVMFkDIzNVTipubTltvc4j-THETtL6ccUQQ2s749uRYeeaF/s1600/rss-feed-icon2.png'/></a></td>
<td style='padding-left:40px; padding-top: 5px;'><a class='twitter-share-button' data-count='horizontal' data-lang='en' href='http://twitter.com/share' title='Compartilhe no Twitter'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>
<td><a href='http://www.facebook.com/sharer.php' name='fb_share' title='Compartilhe no Facebook' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td>
  <td style='padding-left:60px;'><a class="google_translate" href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cen&amp;hl=en&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='English'><img align='absbottom' alt='English' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQUYm4wcfr8JdMtMGu_4CgsEx8okNYv2NJ_EmHuehUQ3Rh16ovi67emarhkycEMAKz2MlTJoobGWn3Tr526bqfdSyEx50kW2oGbKwP1HiF_tDgzr-O1SiXCEJpImELzS2tgV3gqW1bJXwd/s1600/United+Kingdom(Great+Britain).png' width='24'/></a></td>
<td><a class="google_translate" href='Javascript:void(0)' onclick="window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cde&amp;hl=en&amp;ie=UTF8&quot;); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjosie5KwIwHQkxSRWXeRMh92qYXT0tJJ_OL9NZ8BfFqdDGNhsfSFxi_UOKvCXZDOxOnvOw9wEsO1IzxVRRwXm0qMOJxrVa6z7IsAaQv__miqKJW7Lc41SwyiIokHvSrXD00Sdq9T4Gdpan/s1600/Germany.png" width="24"/></a></td>
<td><a class="google_translate" href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cfr&amp;hl=en&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='French'><img align='absbottom' alt='French' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnutcRdGZmmCcJbY7NgpdrS5r-FcHPNrLVQGFy1wytddy-vf6bF08kMZpIZ2arT2DPw7Pm1LDDPcLkPzy4g9YBYzgwGQHuPJ6V28sOGNIN8zpYTtdI9E5RPdW36UyOX0QAE1XE_G4ywLoB/s1600/France.png' width='24'/></a></td>
<td><a class="google_translate" href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Car&amp;hl=en&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='Arabic'><img align='absbottom' alt='Arabic' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV3eN9hBFGvkDmEf-atCmAiAirZdwtRNHFr7iSJ6SvFaSpVSJwyZ5yPQeUDP7IvtoJVtmVo9g8wJVNGdVQllvv5rl7Gfw0Ve33k9dGpFWjntMwG7qlZRs6xP5e3hC5nF_-PXF2qY2cj-YY/s1600/Saudi+Arabia.png' width='24'/></a></td>
<td><a class="google_translate" href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Czh-cn&amp;hl=en&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='Chinese Simplified'><img align='absbottom' alt='Chinese Simplified' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0yB7HKZn3t6MxiT7CYg2Di8qCNHtvf-9FVkPU7wKpw4qawDbrspshyphenhyphenPcg0U4gn43SsS9B8A9ykW952dEC9YVguyiTpHN-wsZSmz8n7GXUvf9FZ4K_aoz1wT8ukUbVGnXPahySAM2ZPFMe/s1600/China.png' width='24'/></a></td>
</tr>
</table>
</div>
Atenção para as partes destacadas
* Em LARANJA, é a imagem do botão fechar da barra, altere caso desejar.
* Em VERMELHO, substitua pelos links das páginas do Facebook, Twitter e Feed RSS.
* Em AZUL, são as imagens das redes sociais, altere caso desejar.

>> Clique em "Visualizar", não encontrando nenhum problema clique em "Salvar Modelo".

>> Vá em seu blog e veja como ficou.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.

2 comentários

Anônimo em 29 de junho de 2015 às 09:36

Vllw Funciono Perfeitamente Amigo !

Unknown em 29 de junho de 2015 às 09:46

Ok Obrigador, Por Visitar Nosso Blogger, Não Esqueça de Curte Nossa Pagína no Facebook, Volte Sempre.

 
Copyright ©2015 Canal Do MatheusBR Todos os Direitos reservados | Designed by Sinistro de BTN