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.
