Barra com Com Redes Sociais, Botão Subir e Efeito Expansível Ao Descer a Página do Blogger - Exclusivo

Nesta postagem venho compartilhar mais um menu bem interessante para você colocar no seu blogger. O menu contém - redes sociais (Feed, Twitter, Facebook e Google +); contém também um botão simples de apenas subir a página do blogger. Eu achei o menu super legal mesmo, já uso ele aqui no blogger.

Para coloca-lo no seu blog é bem simples... Entre em "Modelo" - "Editar HTML", dê um Ctrl + F e procure pela tag

]]></b:skin>

ACIMA desta tag, cole o seguinte estilo

#fixed-bar{position:fixed;bottom:0;z-index:100;width:100%;height:38px;clear:both;margin:0;padding-bottom:4px;background-color:#222;overflow:hidden}#fixed-bar a{float:right;margin:0;padding:0;background-color:#111}#fixed-bar a.first{float:left;margin-top:-1px}.bottom-wrapper{max-width:92%;width:960px;margin:0 auto}#PopularPosts1 .widget-content ul li{float:left;list-style:none outside none;padding:2px!important;border-bottom:0}#PopularPosts1 img{width:123px;height:123px;padding:4px;margin:0}#PopularPosts1 .item-content{position:relative;float:left;margin:0}#PopularPosts1 .item-title a{font-size:12px;color:#fff;display:block;padding:0 5px;float:left;width:110px;text-align:center}#PopularPosts1 .item-title:hover{background:rgba(0,0,0,0.85)}#PopularPosts1 .item-thumbnail{float:left;border:1px solid #ccc;overflow:hidden}#PopularPosts1 .item-title{background:rgba(4,4,4,0.50);position:absolute;bottom:8px;right:5px}#Followers1-wrapper{background:rgba(250,250,250,0.70);overflow:hidden;height:140px}.profile-img{float:left;margin-top:0;margin-right:5px;margin-bottom:5px;margin-left:0;padding:2px;border:3px solid #dcd9d9;box-shadow:0 8px 6px -6px rgba(0,0,0,.7);-webkit-box-shadow:0 8px 6px -6px rgba(0,0,0,.7);-moz-box-shadow:0 8px 6px -6px rgba(0,0,0,.7);background:#f7f7f7}.profile-data{margin:0;text-transform:uppercase;letter-spacing:.1em;font:normal normal 78% 'Open Sans',Trebuchet,Arial,Verdana,Sans-serif;color:#777;font-weight:bold;line-height:1.6em}.profile-datablock{margin:.5em 0 .5em}.profile-textblock{margin:.5em 0;line-height:1.6em}.creditutta{background:rgba(0,0,0,0.2);font:normal 14px lobster;color:#bbb;text-shadow:0 0 2px #000;height:75px;width:99%;margin:0;padding:4px;clear:both}.creditutta a:link,.creditutta a:visited{font:normal 15px lobster;color:#009ec3;text-decoration:none}#go_headerFixedNavigation{width:100%;background:rgba(245,245,245,0.99);text-shadow:0 0 1px #eee;position:fixed;display:none;top:0;z-index:99999;overflow:hidden;font-family:'arial',Helvetica,Arial;color:#fff;box-shadow:0 5px 2px -4px #bbb;-webkit-box-shadow:0 5px 2px -4px #bbb;-moz-box-shadow:0 5px 2px -4px #bbb;border-bottom:1px solid #fff;padding:4px 0}.sharefixed{background:rgba(5,5,5,0.9);width:100%;padding:8px 20px;float:center;height:20px;border-bottom:1px solid #fff;border-top:1px solid #fff}#blogonol_kolom,#guest_book{background:#222;margin:3px 0;padding:0}.newsticker_wrapper{font:normal 13px/32px Oswald,Helvetica,sans-serif;color:#fff;text-shadow:0 1px 0 #eee;height:30px;background:rgba(2,2,2,0.2);border-top-color:#b0b2b3;border-bottom-color:#c9cacc;-webkit-text-size-adjust:none}.newsticker_wrapper .newsticker_title{float:left;padding-right:7px;margin-right:15px;border-right:2px solid #fff}.newsticker_wrapper h4{color:#fff;height:100%;overflow:hidden;margin-top:3px;padding:0 6px;font-weight:bold;text-shadow:1px 1px 0 #4374ab}

Agora, procure pela tag

</head>

Tendo encontrado a tag, ACIMA dela dela, cole o seguinte código (Esse é o código que vai ativar o botão de subir a página)

<script src='http://ut2a-4down-blogspot-com.googlecode.com/files/akactrl.js' type='text/javascript'></script>
<script src='http://ut2a-4down-blogspot-com.googlecode.com/files/clickakaUTta.js' type='text/javascript'></script>
<script>$('#fixed-bar').hide();$(function(){$(window).scroll(function(){if($(this).scrollTop()>600){$('#fixed-bar').slideDown(200)}else{$('#fixed-bar').slideUp(200)}});$('.go-top').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});</script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

E, por último, procure pela tag

</body>

Tendo encontrado a tag, ABAIXO dela, cole o seguinte código

<div class='clear'/>
<div id='fixed-bar'>
<div class='bottom-wrapper'>
<a class='go-top first' title='Subir ao topo da página'><img alt='go top' src='http://3.bp.blogspot.com/-cBnkdgGehf4/TzyKY265xwI/AAAAAAAACfQ/ZZvzUQrG7m4/s1600/up_3038.png'/></a>
<a href='https://plus.google.com/111619041285849190271' target='_blank' title='Siga-nos no google +'><img alt='google+ page' src='http://2.bp.blogspot.com/-BOc1ZCoB-Jw/TzyKYBnrVyI/AAAAAAAACe4/QgKgsc7um4c/s1600/gplus_3838.png'/></a>
<a href='URL  da sua página no facebook' target='_blank' title='Siga-nos'><img alt='Facebook' src='http://4.bp.blogspot.com/-lDVnV-OnEv4/TzyLhYc4yPI/AAAAAAAACfc/I7_buv1xxEM/s1600/facebook_3838.png'/></a>
<a href='URL do seu twitter' target='_blank' title='Seguir'><img alt='Twitter' src='http://1.bp.blogspot.com/-mtVDHUkGUJs/TzyKYrJkNbI/AAAAAAAACfI/zXM9SKO2BFU/s1600/twitter_3838.png'/></a>
<a href='URL do seu feed' title='Assinar feed'><img alt='rss' src='http://1.bp.blogspot.com/-l4C-DinWEr4/TzyKX4M7TvI/AAAAAAAACes/YDtzN-oPjYs/s1600/rss_3838.png'/></a>
</div>
</div>

As partes destacadas de vermelho no código, é o campo que você terá que colocar a URL das Redes sociais.

Tendo substituído, visualize, se estiver tudo certo, salve e pronto!!!

Todos os dias eu posto um tutorial novo aqui no blog DicasHot. Para você não perder nenhuma das atualizações do site, escreva seu endereço de e-mail abaixo e receba as atualizações direto no seu e-mail: