Barra Toolbar Personalizada Com Tradutor
Nesta postagem compartilho com vocês está barra super elegante e moderna para ficar mais fácil a divulgação das suas redes sociais, assim você consegue muito mais seguidores nas redes sociais e ainda facilita para o visitante internacional, pois, assim facilita na tradução da página.
Veja uma demonstração:
http://testandoagoradicashot.blogspot.com.br/Para colocar em seu blog...... Entre em "Modelo" - "Editar HTML" e procure pela tag
]]></b:skin>
Tendo encontrado a tag, basta colocar ACIMA dela o seguinte código/* Barra Toolbar Personalizada
----------------------------------------------- */
#custom-toolbar {
overflow: auto;
position: fixed;
background: #1B1B1B url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4yZiy_DMMm4cKNS7M5rDsd7fXdjB82xoHZYZZMTm8olzqp_jxtzmksvZwfI42fF4CDGXll6oVSCvJb_ueryokKumWutB0m5y8r7gFtUyDn9X-a_Bsoq_moDZi0MitbIOgvso-m7PcOGa9/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;
}
Agora, procure a tag</head>
Tendo encontrado a tag, basta colocar ACIMA dela o seguinte código<script type='text/javascript'>
// Custom Toolbar for Blogger (helplogger.blogspot.com)
//<![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>
Agora, procure a tag</body>
Tendo encontrado a tag, basta colocar ACIMA dela 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/AVvXsEiTJ-OckYDFKR-P6XyKHYCBchd2cqEL4eVUPEb_42-jSUxgurNfdWEJCN7ZkdGAv0XBS9KMMV8xjlS8HLYph3LOS6ZoV-5VRWfkoGdnrFrIVogn5gNmube6pFAI-Qb7ClSzrnpnpUzPHc-5/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 == "") this.value = "Search here...";' onfocus='if (this.value == "Search here...") this.value = "";' size='28' type='text' value='Pesquise aqui...'/></form></td>
<td style='padding-left:20px;'><a href='http://www.facebook.com/username' title='Follow on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicGr3GJKHbAsxOycD0l9r88omH5eWpPC-BBxdGbrcLuYntKU4kQ4GWImEpTyKZYw7-OXyBDGD1lnWrHcv8bhKUUaiYMvfDpsoPWYRBkwAvPo7c5SLGxaEMaOsPMTGcSr84nqqBKhOXuGCQ/s1600/facebook-icon.png'/></a></td>
<td><a href='http://twitter.com/username' title='Follow on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Y149nrSAFrAlOunxW8ZakjJIEWN1t9yfrq9qRDotj_1HFzQP8KdKp8_7zueVNrszClISC9Q_G-pzKHwdx8WPveSF3y03Xyfg90laGyI0fQIlrngbDxLkOCIjtYDxSX-kBDcp-4kjHoa6/s1600/twitter-icon.png'/></a></td>
<td><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO1ALGwwEz2fll-bFSNAqNuSXYJGRdg4NtUcfX3Xcq79vHdA3FkmRNOSEiNVrFb5OAYhw4MmtBGOfGGdZr5_MFgoBBSzXzs21JIzZl8s6UkApmBVIAL7B0HvxJiMVhCbDcEYCFVRPRMNhK/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='Publish on Twitter'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>
<td><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Ffacebook.com%2Fdicashot&width&layout=button_count&action=like&show_faces=true&share=false&height=21&appId=642745355800467" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe></td>
<td style='padding-left:60px;'><a class="google_translate" href='Javascript:void(0)' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Cen&hl=en&ie=UTF8"); return false;' rel='nofollow' title='English'><img align='absbottom' alt='English' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxTzLPPduf9hHTFlKb6s1yH260EDZwTw_79jYUTEZoM5n_uMwNwxUHaO7K6IeEgx3A7HTi-eMDaSnIn1yqj56JpG6q__4L5DSiXCEMqmUFFixaLOIlvtBzwQZlB3T7mcKst-VKRE-145L0/s1600/United+Kingdom(Great+Britain).png' width='24'/></a></td>
<td><a class="google_translate" href='Javascript:void(0)' onclick="window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Cde&hl=en&ie=UTF8"); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgomP8NqHfa3vAWRIrlk9ikXxCIXPgUFHlMCi0Ie45pLIpciqFSP1fORlmTtHis0tTGzmctvVJRqTGLQo3B7DZGlmSJeufcMTt_FL6ufHzGhjgkQeqSljzmaSsKUxYrAYz_bcKRQCWQzXwh/s1600/Germany.png" width="24"/></a></td>
<td><a class="google_translate" href='Javascript:void(0)' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Cfr&hl=en&ie=UTF8"); return false;' rel='nofollow' title='French'><img align='absbottom' alt='French' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTsMt_QXjV_i91omDyz9Gt_dvf0c0uHVK5IA3gF-cAnL4MOWgyjQ5Vd3U9F963dL-4X-ZUM4t2M9ouAHtp0IKw5xw24A6HhL3fra0r1ubFY9gWAzTBuxDAIuU_FsaGLCJKN6D4QOzgc3cD/s1600/France.png' width='24'/></a></td>
<td><a class="google_translate" href='Javascript:void(0)' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Car&hl=en&ie=UTF8"); return false;' rel='nofollow' title='Arabic'><img align='absbottom' alt='Arabic' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrOuwTgtuD0eaWs8hkjcsg7uiAYI5qIQpzQwZ8v2lN9W_De9uythG9uLtvOPv7eCMp3foSpVfTqkMsU7TyuOscBpxDP1GNBwn8BGvfl_Zce10AXLjIeThr0_WuMsIWooOiWWoZ8R2hrtad/s1600/Saudi+Arabia.png' width='24'/></a></td>
<td><a class="google_translate" href='Javascript:void(0)' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Czh-cn&hl=en&ie=UTF8"); 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/AVvXsEjeKhAdU9xHKU8pJDfURkQ7gDsmATqtwJvfL_hXPKe9XE3THn_qvcU8ETQOpoQjFprDQWUprOWoCyS-DlRwIgevvt6YbSk_7nsC91dFdvpRjqn495kVVR3pY398tqSBY0JufAVDo2nXoyZ6/s1600/China.png' width='24'/></a></td>
</tr>
</table>
</div>
No código ACIMA, substitua as partes destacadas.Tendo feito isto, está pronto!!!
