Botões para compartilhar postagens nas redes sociais

Quer facilitar a vida do seu leitor e incentiva-lo a compartilhar as postagens do seu blog?

Uma forma pratica e rápida para divulgar os posts do seu blog e fazer com que o leitor os divulgue nas redes sociais é instalar no rodapé das postagens os ícones dessas redes. A facilidade que os seus leitores terão em compartilhar seus post, só aumentará ainda mais o alcance do blog, aumentando o número de visitas.

O tutorial de hoje será somente para quem usa a plataforma do Blogger. E para instalar os ícones iremos utilizar como auxilio o site Add This, mas existem outros sites que também auxiliam nesse instalação. Você irá acessar o site, clicando aqui, irá abrir a pagina abaixo:

Você irá realizar o seu cadastro no site, clicando no botão “entrar”, depois de feito o seu cadastro, abrirá a seguinte pagina:

Nessa página você irá clicar na setinha do botão “Obter código” e irá na opção “Compartilhar Botões”, Logo abrirá a pagina abaixo, no qual você  escolherá o layout que você quer dos ícones para colocar no blog.

No campo “Obter compartilhando botões para”, você escolherá a opção Blogger. No “Selecione o Estilo”, você irá escolher o estilo que você quer a barra dos ícones, pode ser na vertical ou na horizontal, da forma que quiser:

Depois é só clicar em “Instale Blogger Widgets que irá aparecer a pagina abaixo, é só você escolher o blog no qual quer instalar e clica em “adicionar widgets”, abrirá uma pagina em branco e pronto a barra com os ícones já estarão disponíveis no final da postagem.

Viu como é fácil e não tem complicação. Qualquer duvida deixem nos comentários que estarei ajudando.

Botoes Redes Sociais com efeitos de Transição CSS3

Desta Vez Vou dar os widgets de Redes Sociais OU botoes com efeitos de Transição. Como sabemos that O Crescimento da Mídia sociais ESTA crescendo rapidamente e e amplamente Utilizado Como UMA Maneira de Aumentar OS Visitantes de blogs Que fazemos. ASSIM, COM UM BOTÃO de vista Interessante Que Vai Ser Capaz de Aumentar Seguidor (twitter) UO uma Como Fan Page (FB) não Nosso blogue. Bem logotipo com ISSO.

Veja uma demonstração

HTML

Aqui esta uma Estrutura HTML faz o botão. Eu dividi-lo los div parágrafo tornar Mais Fácil parágrafo Aumentar / Diminuir botoes Que voce deseja please excluir uma Seção "<div id =" mkrbutton "> .............. </ div> ". Por Exemplo, parágrafo removedor o BOTÃO Youtube  aposentar  <div id = "mkrbutton"> <a href="#" class="iconz ytube"> <span> Youtube </ span> </a> </ div> . 

< div  id = "mkrbutton" > < a  href = "#"  class = "fb iconz" > < extensão > Facebook </ intervalo > </ a > </ div > 
< div  id = "mkrbutton" > < a  href = "#"  class = "twiter iconz" > < extensão > Twitter </ intervalo > </ a > </ div > 
< div  id = "mkrbutton" > < a  href = "#"  class = "iconz google" > < extensão > Google+ </ intervalo > </ a > </ div > 
< div  id = "mkrbutton" > < a  href = "#"  class = "iconz pint" > < extensão > Pinterest </ intervalo > </ a > </ div > 
< div  id = "mkrbutton" > < a  href = "#"  class = "linkedin iconz" > < extensão > LinkedIn </ intervalo > </ a > </ div > 
< div  id = "mkrbutton" > < a  href = "#"  class = "devart iconz" > < extensão > DeviantArt </ abrangem > </ a > </ div > 
< div  id = "mkrbutton" > < a  href = "#"  class = "iconz ytube" > < extensão > Youtube </ intervalo > </ a > </ div > 
< div  id = "mkrbutton" > < a  href = "#"  class = "rss iconz" > < extensão > RSS </ intervalo > </ a > </ div > Copiar

Transições CSS e CSS3

Abaixo E o Código CSS USADO parágrafo CRIAR o Efeito SOBRE Este BOTÃO. CSS3 E Utilizado Para fornecer o Efeito utilizando a facilidade de Transição de Saida E a largura. Para mais detalhes, Consulte o Código abaixo.

#mkrbutton 0 auto 0 ; posição : relativo ; text-shadow : 0 1px 0 #FAFAFA ; text-align : center ; text-decoration : nenhum ; white-space : nowrap ; webkit-transition : .25s largura aliviar-in-out ; - ms-transição : .25s largura aliviar-in-out ; -moz-transição : .25s largura aliviar-in-out ; -o-transição : .25s largura aliviar-in-out ; transição : .25s largura aliviar-in- fora ; webkit-box-shadow : inset 0 1px 0 # Fafafa, rgba (0,0,0, 0,28) 0 2px 3px ; -moz-box-shadow : inset 0 1px 0 # Fafafa, rgba (0,0 , 0, .28) 0 2px 3px ; -o-box-shadow : inset 0 1px 0 # Fafafa, rgba (0,0,0, 0,28) 0 2px 3px ; box-shadow : inset 0 1px 0 #FAFAFA, rgba (0,0,0, 0,28) 0 1px 3px ; } #mkrbutton um intervalo { exibição : nenhum ; } #mkrbutton: hover uma extensão { exibição : em linha ; } #mkrbutton um intervalo { font-size : 1.4em ; } #mkrbutton: hover .iconz { width : 250px ; } #mkrbutton .fb { background-position : 0 -384px ; } #mkrbutton .twiter { background-position : 0 -432px ; } #mkrbutton .google { background-position : 0 -480px ; } #mkrbutton .pint { background-position : 0 -528px ; } #mkrbutton .linkedin { background-position : 0 -576px ; } #mkrbutton .devart { background-position : 0 -624px ; } #mkrbutton. ytube { background-position : 0 -672px ; } #mkrbutton .rss { background-position : 0 -720px ; } #mkrbutton .fb: hover { background-position : 0 0 ; cor : # 0374DD ; } #mkrbutton .twiter: pairar { background-position : 0 -48px ; cor : # 00A1DF ; } #mkrbutton .google: hover { background-position : 0 -96px ; cor : # A70000 ; } #mkrbutton .pint: hover { background-position : 0 - 144px ; cor : # C00 ; } #mkrbutton .linkedin: hover { background-position : 0 -192px ; cor : # 005772 ; } #mkrbutton .devart: hover { background-position : 0 -240px ; cor : # 4C7A4A ; } #mkrbutton .ytube: hover { background-position : 0 -288px ; cor : # A00 ; } #mkrbutton .rss: hover { background-position : 0 -336px ; cor : # EC5601 ; }

INSTALAÇÃO NO BLOGSPOT

Primeiro, va para o esquema da Página, clicando no menu de de disposição  :

Go to disposição de Página

Adicione hum Elemento de Página  HTML / JavaScript  , e lhes SEGUIDA, copie o Código e cole soluçar uma forma:

<style type="text/css"> #mkrbutton .iconz {background:#E3E3E3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsQILYij_JEnn8S4dsuOGA0N1jObo1t8N-ysyqaRW-OynIR7neRSRbxrj7TLxLJs_XfH3S2XQoWA-U3AQpOKpmK23lSdfc1YeaFwO_CX96axor-21FCtDkE9kzMb_kNzDX2G50-S-lRio/s1600/blsocial12.png') 0 0 no-repeat; -moz-border-radius:40px; -webkit-border-radius:40px; -o-border-radius:40px; border-radius:40px; display:block; color:#212121; float:none;height:48px; width: 48px; line-height:48px; margin:10px auto 0; position:relative; text-shadow:0 1px 0 #FAFAFA; text-align:center; text-decoration:none; white-space:nowrap; -webkit-transition:width .25s ease-in-out; -ms-transition:width .25s ease-in-out; -moz-transition:width .25s ease-in-out; -o-transition:width .25s ease-in-out;transition:width .25s ease-in-out; -webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; -o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;} #mkrbutton a span {display:none;}#mkrbutton:hover a span {display:inline;} #mkrbutton a span {font-size:1.4em;} #mkrbutton:hover .iconz {width:250px;} #mkrbutton .fb {background-position: 0 -384px;} #mkrbutton .twiter {background-position: 0 -432px;} #mkrbutton .google {background-position: 0 -480px;} #mkrbutton .pint {background-position: 0 -528px;} #mkrbutton .linkedin {background-position: 0 -576px;} #mkrbutton .devart {background-position: 0 -624px;} #mkrbutton .ytube {background-position: 0 -672px;} #mkrbutton .rss {background-position: 0 -720px;} #mkrbutton .fb:hover {background-position: 0 0;color: #0374DD;} #mkrbutton .twiter:hover {background-position: 0 -48px;color: #00A1DF;}#mkrbutton .google:hover {background-position: 0 -96px;color: #A70000;} #mkrbutton .pint:hover {background-position: 0 -144px;color: #C00;} #mkrbutton .linkedin:hover {background-position: 0 -192px;color: #005772;} #mkrbutton .devart:hover {background-position: 0 -240px;color: #4C7A4A;} #mkrbutton .ytube:hover {background-position:0 -288px;color: #A00;} #mkrbutton .rss:hover {background-position: 0 -336px;color: #EC5601;} </style> <div id="mkrbutton"><a href="#" class="iconz fb"><span>Facebook</span></a></div> <div id="mkrbutton"><a href="#" class="iconz twiter"><span>Twitter</span></a></div> <div id="mkrbutton"><a href="#" class="iconz google"><span>Google+</span></a></div> <div id="mkrbutton"><a href="#" class="iconz pint"><span>Pinterest</span></a></div> <div id="mkrbutton"><a href="#" class="iconz linkedin"><span>LinkedIn</span></a></div> <div id="mkrbutton"><a href="#" class="iconz devart"><span>DeviantArt</span></a></div> <div id="mkrbutton"><a href="#"class="iconz ytube"><span>Youtube</span></a></div> <div id="mkrbutton"><a href="#" class="iconz rss"><span>RSS</span></a></div>


 Copiar

Veja a demo

Nota: A largura do tamanho certo para a aplicação da barra lateral é 300px. Para personalizar o código na barra lateral encontre este código # mkrbutton: hover Iconz. {Width: 250px;} e altere seu valor para a largura para caber na sua sidebar (barra lateral).

Código em HTML de voltar ao topo da página

Neste código o usuário ao clicar nele volta automaticamente ao topo da página onde se localiza o slogan e nome do site. Ele pode ser visto aqui no site no canto direito do rodapé.

<html>
<a href="#top">seutextoaqui</a>
</html>

*Em "seu texto aqui" digite a palavra na qual o Script funcionará. 

Topo da página com Imagem:
Caso queira adicionar uma imagem que clicada vá ao topo da pagina , coloque esse código.

<html>
<a href="#top"><img src=" link da imagem "/></a>
</html>

*Em  "link da imagem" coloque o url que a imagem esta armazenada.

Como adicionar o botão Curtir do Facebook dentro das postagens do Blogger

Nao tem nada de Complicado, VA ATÉ Seu Blogger e clique em:

1-Modelo> Fazer o backup / restaurar> Fazer Download do Modelo completo.

2 DEPOIS de Fazer o  modelo de backup de Fazer , clique los EDITAR HTML> Prosseguir

3 Marque a Opção  "Expandir modelos de Widgets"

Agora, Adquirir POR:   (para procurar basta apertar Ctrl + F)

<Div class = 'post-header-line-1'>

Se voce Localidade: Não encontrar, Adquirir Pelo MESMO Código, a fim de que com a UMA BARRA nenhuma final:

<Div class = 'post-header-line-1' />

Aqui o Estação Os Três principais tipos de botoes Paragrafo Facebook, Os mais Usados ​​e Os Melhores. São ELES  Verticais, Horizontais EO Horizontais SEM Contador de "curtidas" .

Com contador - Vertical

<B: se 'Dados: blog.pageType = & quot; static_page & quot ;! ' = Cond> <iframe allowTransparency = 'true' expr: src = '& quot; http: //www.facebook.com/plugins/like.php? href = & quot; + Dados: post.canonicalUrl + frameborder = "0" scrolling = estilo "Não" = "border: none; overflow: hidden; width: 55px; height: 62px; "/> </ b: if>

 Com contador - Horizontal

<B: se 'Dados: blog.pageType = & quot; static_page & quot ;! ' = Cond> <iframe allowTransparency = 'true' expr: src = '& quot; http: //www.facebook.com/plugins/like.php? href = & quot; + Dados: post.canonicalUrl + frameborder = "0" scrolling = estilo "Não" = "border: none; overflow: hidden; width: 90px; height: 21px; "/> </ b: if>

 Sem contador

<B: if 'dados: blog.pageType = & quot; static_page & quot;!' = Cond> <iframe allowTransparency = 'true' expr: src = '& quot; http: //www.facebook.com/plugins/like.php? href = & quot; + Dados: post.canonicalUrl + frameborder = "0" scrolling = "não" style = "border: none; overflow: hidden; width: 450px; height: 35px; "/> </ b: if>