04/11/2016

| |

Coloque botões de Redes Sociais com efeito no blog.

Aprenda a colocar no seu blog botões de Redes Sociais com efeito.




Olá,queridos amigos!!

Chegando com uma postagem novinha para você!!
Atualmente todos os blogs tem os botões de Redes Sociais e muitos com efeitos muito bonitos.Hoje trago para vocês mais um efeito bem legal nos botões, clique aqui e veja como ficou no meu blog de testes.É só colocar o mouse em cima e ver o efeito.

Vamos aprender a colocar no seu blog? Vem!!!


  1º passo: No painel do seu blog, clique em LAYOUT. Veja abaixo:



2º passo: Depois clique em ADICIONAR UM GADGET. Veja abaixo:


3º passo: Na janela que abrir, procure por HTML/JAVASCRIPT. Veja abaixo:




4º  passo:Vai aparecer uma janela em branco e é ali que você colocará o código que está abaixo. Você irá alterar somente o que está em vermelho. Colocará o link de suas Redes Sociais.Copie o código e faça o procedimento muito simples acima:

<!-- Menu social com efeito -->
<style type="text/css">
#buttonbg {width: 260px;margin: 10px 20px;padding: 0;} #buttonbg li {cursor: pointer;
height: 48px;position: relative;list-style-type: none;
}
#buttonbg .icon
{background: #D91E76 url('http://2.bp.blogspot.com/-JKB0aVYaIW0/UC-oBl8NXxI/AAAAAAAAEYA/IbgyikdkM5A/s1600/blsocial12.png') 0 0 no-repeat; background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block; color: #141414;float: none;height: 48px;line-height: 48px; margin: 5px 0;position: relative;text-align: left;text-indent: 90px; text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5; -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out; -o-transition: width .25s ease-in-out, background-color .25s ease-in-out; transition: width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; -moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px; box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; text-decoration: none;}
#buttonbg span:hover {visibility: hidden;}
#buttonbg span {display: block;top: 15px;position: absolute;left: 90px;}
#buttonbg .icon {color:
#fafafa;overflow: hidden;}
#buttonbg .fb {background-color: rgba(45,118,185, .42); background-position: 0 -382px;} #buttonbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;}
#buttonbg .google {background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;} #buttonbg .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}
#buttonbg .linked {background-color: rgba(0, 87, 114, .42); background-position: 0 -574px;} #buttonbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;}
#buttonbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;} #buttonbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;}
#buttonbg li:hover .icon {width: 250px; } #buttonbg li:hover .icon {background-color: #d91e76; }
#buttonbg li:hover .fb {
background-color: #2d76b9;background-position: 0 2px;}
#buttonbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; }
#buttonbg li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#buttonbg li:hover .pint {background-color: #C00;background-position: 0 -142px; } #buttonbg li:hover .linked {background-color: #005772;background-position: 0 -190px;}
 #buttonbg li:hover .deviant {background-color: #4C7A4A;background-position: 0 -238px;}
#buttonbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; }
#buttonbg li:hover .rss {background-color: #EC5601;background-position: 0 -334px; }
#buttonbg .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>
<ul id="buttonbg">
<li ><a href="ENDEREÇO DE SEU FACEBOOK" class="icon fb">Facebook >>></a><span>Encontre-me no Facebook</span></li>
<li ><a href="ENDEREÇO DE SEU TWITTER" class="icon twit" >Twitter >>></a><span>Siga-me no Twitter</span></li>
<li ><a href="ENDEREÇO DE SEU GOOGLE PLUS" class="icon google" >Google+ >>></a><span>Adiciona-me no Google+</span></li>
</ul>


Esse código eu encontrei no site TEMPLATES E ACESSÓRIOS.
 
Leia também: Botões de compartilhamento nas imagens do blog.
                       Ícones de Redes Sociais como assinatura de email.







Sobre o Autor:
Magda moreira Meu nome é Magda Moreira, sou professora e atualmente estou fazendo o curso de Pedagogia.Sou blogueira de coração e uma curiosa da internet.Meu blog Agenda dos Blogs tem como objetivos:Divulgação de blogs gratuitamente e elaboração de projetos e tutoriais voltados aos blogueiros.

Nenhum comentário:

Postar um comentário

Deixe um comentário, que ficarei muito feliz!!!!!
Abraços á todos!!!!