Botões das Redes Sociais no Topo do Blogger

Vamos aprender agora a criar uma barra no topo do Blogger com ícones do Facebook, do Twiter e do G+.  Ficará como nesta imagem do meu Blogger de Testes.


É esta barra de cor verde acima do título do Blogger.  Veja os três botões das Redes à direita.

Parte 1

Antes de começar, acesse seu perfil do Facebook, do Twiter e do G+, copie os links na barra de endereços do buscador e deixe-os no Bloco de Notas.  Insira-os onde está indicado no código abaixo.

Se quiser tirar algum deles é só apagar no Bloco de Notas a linha inteira de <a href= até </a>:

Em primeiro lugar, vá em "Modelo", em "HTML", "Prosseguir" e dê um " Ctrl + f " no seu teclado e na janela que se abriu, cole o seguinte:

<header>

Abaixo dele cole o próximo:


<div class="bar_top">
<div class="bar_topd">
                <ul class="menu_barrax">
                                                </ul>
                <div class="transit">
<a href="http://LINK_AQUI" target="_blank"><img src="http://4.bp.blogspot.com/-4di8wyO8reU/T9ieCNjxkrI/AAAAAAAAD34/n9mdGQl36go/s1600/facebook.png" title="Facebook"/></a>
<a href="http://LINK_AQUI" target="_blank"><img src="http://1.bp.blogspot.com/-V6AUHhYK_tw/T9ieDhXQM3I/AAAAAAAAD4Y/2SX5sC04x2c/s1600/twitter.png" title="Twitter"/></a>
<a href="http://LINK_AQUI" target="_blank"><img src="http://3.bp.blogspot.com/-inXXbVbM-pQ/T9ieDGHlKLI/AAAAAAAAD4I/jnthUijJjmo/s1600/google+.png" title="Google Plus"/></a>
</div>
</div>
</div>

Visualize e se deu tudo certo, SALVE.

Parte 2

Agora nesta segunda parte, na janela do " Ctrl + f " cole o seguinte:

]]></b:skin>

Antes deste código cole o próximo:

.bar_top {width: 100%;height: 32px;background: #006400;}
.bar_top img {height: 22px;float: right;margin: 5px 7px 0 0;opacity:0.8;filter:alpha(opacity=80);}
.bar_top img:hover {opacity:1.0;filter:alpha(opacity=100);}
.menu_barrax {float: left;margin: 0;padding: 0;}
.menu_barrax li {float: left;list-style: none;font-size: 10px;font-weight: bold;font-family: Verdana, Arial;text-transform: uppercase;margin: 0 0 0 10px;padding: 10px 0 0 0;}
.menu_barrax li a{color: #dfdfdf;text-decoration: none;}
.menu_barrax li a:hover {text-decoration: none;color: #fff;}
.transit {-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;-moz-transition:all 0.4s ease;transition:all 0.4s ease;}
.bar_topd {width: 900px;margin: 0 auto;}

Para configurar a cor da barra modifique no código acima onde está #006400 que é o código html da cor verde.  Procure uma tabela de cores para escolher a que mais combina com o seu Blogger.

Visualize e dando tudo certo SALVE.

Nenhum comentário:

Related Posts Plugin for WordPress, Blogger...