Widgets

Como adicionar widget sociais no blog para blogger

0 comentários

Oi caros leitores e amigos,

hoje, resolvi postar este widget que coloca na barra lateral de seu blog no blogger os icones de suas redes sociais, pois sabemos que atualmente este recurso traz muito trafego para seu blog e fideliza seus leitores atraves deste recurso.

Este widget é muito parecido ao usado pela plataforma wordpress e fica muito bonito..

veja o exemplo abaixo de como ficaria o mesmo em seu blog….

Technorati Tags: ,,,,,,,
Windows Live Tags: Como,este,redes,recurso,plataforma,widget,blog,blogger
Blogger Labels: Como,este,redes,recurso,plataforma,widget,blog,blogger

 

Feed icone social Assine nosso Feed!

Twitter icone social Siga-me no Twitter!

Facebook icone social Me adicione no Facebook!

Orkut icone social Me adicione no orkut!

Agora faça login no seu blog, é vá em: Design > Elementos da página > Adicionar um Gadget > HTML/JavaScript.
2. Copie o código abaixo e cole-o dentro do campo de conteúdo do gadget.

<style type="text/css">div.social-div {
width:100%;
text-align:left;
}
div.social-div div {
background:#FFFFFF; /* Cor de fundo das redes sociais */
border:1px solid #DDDDDD; /* Cor da borda das redes sociais */
min-height:60px;
margin:4px 0px;
padding:0;
cursor:pointer;
}
div.social-div div:hover {
background:#F9F9F9; /* Cor de fundo das redes sociais com o mouse em cima */
}
div.social-div a:link {
font:normal bold 15px Arial; /* Fonte do nome das redes sociais */
color:#000000; /* Cor da fonte das redes sociais */
text-decoration:none;
outline:none;
}
div.social-div a:visited {
font:normal bold 15px Arial; /* Fonte do nome das redes sociais visitadas */
color:#000000; /* Cor da fonte das redes sociais visitadas */
text-decoration:none;
outline:none;
}
div.social-div a:hover {
font:normal bold 15px Arial; /* Fonte do nome das redes sociais com o mouse em cima */
color:#000000; /* Cor da fonte das redes sociais com o mouse em cima */
text-decoration:none;
outline:none;
}</style>
<div class="social-div">
<a href="link-do-seu-feed" target="_blank"><div>
<img src="http://4.bp.blogspot.com/_lOZfRBP3h2A/TUshja7er3I/AAAAAAAAEOQ/4gDU7KMTZa0/s1600/feed.png" border="0" alt="Feed" align="absmiddle"/> Assine nosso Feed!
</div></a>
<a href="link-do-seu-twitter" target="_blank"><div>
<img src="http://2.bp.blogspot.com/_lOZfRBP3h2A/TUshjjCnjPI/AAAAAAAAEOY/31e_f0yJ5eg/s1600/twitter.png" border="0" alt="Twitter" align="absmiddle"/> Siga-me no Twitter!
</div></a>
<a href="link-do-seu-facebook" target="_blank"><div>
<img src="http://1.bp.blogspot.com/_lOZfRBP3h2A/TUshjrvHLnI/AAAAAAAAEOU/-L6-6WvR0sg/s1600/facebook.png" border="0" alt="Facebook" align="absmiddle"/> Me adicione no Facebook!
</div></a>
<a href="link-do-seu-orkut" target="_blank"><div>
<img src="http://4.bp.blogspot.com/_lOZfRBP3h2A/TUshjocUnJI/AAAAAAAAEOc/o420ytj2LLI/s1600/orkut.png" border="0" alt="Orkut" align="absmiddle"/> Me adicione no orkut!
</div></a>
</div>

Caso você tenha conhecimentos em CSS, você pode alterar o código como quiser, caso contrário mude apenas o que tem comentários à frente. Os comentários são mostrados da seguinte maneira: /* exemplo de comentário */. Para alterar as cores, você pode mudar o código hexadecimal dos elementos.
3. Mude as partes que foram destacadas em vermelho no código acima, pelo link de sua rede social e clique no botão Salvar.
Dica: aconselho que você salve as imagens, hospede no seu próprio servidor e substitua o link delas também, assim caso as imagens sejam excluídas, você não será afetado!
Você pode baixar as imagens e/ou conferir outros tipos de imagens em um dos artigos abaixo:

Lembre-se que você sempre poderá acrescentar mais icones com seus respectivos links, bastando para isso acrescentar dentro da div o que esta entre <a href….. e   </div>

Então vamos lá, mãos a obra…..

Technorati Tags: ,,,,,,,,,,,,,,,,
Windows Live Tags: Como,Caso,frente,Para,Mude,pelo,redes,botão,Salvar,Dica,servidor,Você,tipos,Lembre,Então,pode,link
WordPress Tags: Como,Caso,frente,Para,Mude,pelo,redes,botão,Salvar,Dica,servidor,Você,tipos,Lembre,Então,pode,link
Blogger Labels: Como,Caso,frente,Para,Mude,pelo,redes,botão,Salvar,Dica,servidor,Você,tipos,Lembre,Então,pode,link

O que achou deste post? comente agora

Todo comentário é bem vindo, pois acrescenta muito aos nossos posts, portanto, fique a vontade para debater sobre nossos assuntos...

setaretornoaotopo