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.

Quer ser um Influencer no Instagram e ganhar muito dinheiro com os seus posts ?  Saiba como acessando o link abaixo.

Influencer no Instagram

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii7yKvO0FeqDXhLW2OKjTXgC3Ru0uEBBrYQsQu3BZiLw8PO5cjXJfLzzgYr8rb1dZ8bzNz6CdXwss2e_Sx6BuURFhUMm-tf_8HnF0IvE45up3RqXvkCOtV0vgzJvXUYGyWEhG-mL191fhj/s1600/facebook.png" title="Facebook"/></a>

<a href="http://LINK_AQUI" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5uNHWS7lmvSMDJACstpmIOeQ_eva_nH1nI7S6umTvlliF3XAQkWxqeibtn3eHUk3OGVX73Frg1UpjRfWqmV52hZf2iYpGxZpi5UYX2URck8_cEjumOTo5yHXzDssKKi67qD0I0nEAX5_8/s1600/twitter.png" title="Twitter"/></a>

<a href="http://LINK_AQUI" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMmQL-llvIN3FEZYLmLQXyOQckGFlR2jQBseuHacyJORjLoeHZ3bZuPrIAAqkvEqSUphQDiEi_nmVN18QpWTkdBhyphenhyphenbfgcaNaFm37bE5b9it66dKcVY15RL7Xkq1H9lZuL63RVRjfoRk1Qt/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.