Gadgets e Widgets de Redes Sociais para blog

Unknown 02:19 blog , Gadgets , redes sociais , widgets 4 comentários

Gadgets e Widgets

Neste artigo, listamos alguns modelos de Gadgets e Widgets para que você possa inserir em seu blog. Os Plugins descritos aqui podem ser adaptados para qualquer plataforma de blog, seja no Blogger, Wordpress, Joomla, Wix, Webnode, etc...

Oferecer ao leitor a possibilidade de curtir seu blog nas Redes Sociais é importante para gerar mais tráfego e popularizá-lo. Por isso, é necessário que você disponibilize este espaço.

O que vocês verão abaixo é uma ótima coleção de Gadgets e Widgets referentes a Redes Sociais para ser inserida no blog. Algumas em popup, outras para a sidebar ou para colocar dentro dos seus posts.

Para inserir os modelos listados abaixo, vá até o painel do seu blog, selecione a área layout, e em seguida, clique em adicionar Gadgets. Ao abrir esta área, insira os códigos dos respectivos Gadgets ou Widgets de Redes Sociais citados abaixo:

Gadgets e Widgets mini- PopUps

Vamos começar apresentando um Gadget ou Widget Popup

Ele é pequeno, elegante e aparece quando o leitor puxa as imagens da tela para baixo.

Veja o exemplo deste Gadget ou Widget aqui.

Para aplicá-lo, copie o código abaixo, insira as URL's das suas Redes Sociais dentro do trecho destacado em vermelho e adicione em seu blog.

Para adicionar no Blogger, vá até o menu do seu blog, selecione layout, adicionar Gadget → html/javascript e inseria o código editado:

<br /><br /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#mbsocial").show("slow");else $("#mbsocial").hide("slow");});function closeMBsocial(){$('#mbsocial').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>  <style> #mbsocial{background:#f3f3f3;border-radius:9px;-moz-border-radius:9px;-webkit-border-radius:9px;-moz-box-shadow:inset 0 0 3px #333;-webkit-box-shadow:inset 0 0 3px #333;box-shadow:inner 0 0 3px #333;padding:12px 14px 12px 14px;width:300px;position:fixed;bottom:13px;right:2px;display:none;z-index:3;height:100px;} .getmore a{display: inline-block;font-weight: normal;text-decoration: none;font-size:9px;color:#333!important; float:right;} .getmore a:visited{ color:#ddd;}</style>   <div style="display: none;" id="mbsocial">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeMBsocial();">(X)</a> <span style="font-family: Verdana; font-size: 15px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;font-weight:bold;color:#555;">Acompanhe-nos nas redes sociais!</span><br />   <a href="Endereço dá sua página do Face" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjBXjlAR3x57kpjY7mYYV8vqhN-r8MI1-UPyUXG2sb0yMX4tScr7GnhMp80VRktWaExqqTSoS2Zx7IVxIt7SGaXR2undOXq61CZ3uXYvlMPEVBTPgSJaI3El0nQ88UEsrqybpmJ134wy5r/s1600/Facebook.png" height="72" /></a>  <a href="Endereço do seu twitter" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWKigsmALZApWA87JxPjYfQcK4bUm4FQkZMsFtbMKvtznbpxHcZua4C9MVVcb4Va4brA02yQSBdAoaAH-5darmwxUbuBEDFcape4VBBg_zGsODFYIzxP7kjghiXEVsNS27SOncfVXRKUig/s1600/Twitter.png" height="72" /></a> <a href="Endereço do Google+" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn0_OV-vVXjBpcA9LI_nOpasPmafKo6KeShTlq1aqIwcPINoSGdjLJbD2Vo3ZdXE1ne1LC5WwD3_4elIlQlgqpN5c2oSYtcQ08gfOzuN3HMl1ErZOZCZm351sZ0bUI7RpKuqINVsGL6SDb/s1600/Google+Plus.png" height="72" /></a> <a href="Endereço do seu linkedin" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLfKQXJfjWWuzRhItnFqFKnRIe9sVGXnuxN2rUUcDjPYts7pCisYfJHFdkVKYaR2HdYR2VeMvt0SEe_QBR7oSgKgXO4p9GBdKTpfb6N3Wwy_XUQ6AAJwIRovb_6qF4lM_M4QvkcpsRQKdz/s1600/LinkedIn.png" height="72" /></a> <div class="getmore">
<a href="http://www.bloggerenciado.com/" target="_blank">Instale este gadget</a> </div>
</div>
<div class='clear'>
</div>
<br /><br />

Faça as devidas alterações nos links da Redes Sociais.

Gadget ou Widget flutuante

O próximo Gadget de Redes Sociais é flutuante. Um ótimo Gadget, leve, simples e elegante. Funciona à base de jquery e css. O Tumblr está incluído, mas caso não possua uma conta Tumblr ou não tenha interesse em divulgá-lo, basta eliminar o trecho do Gadget de <li> até </li> onde está definido para inserir a URL da sua Rede Social. A mesma modificação vale para qualquer outra Rede Social dentro deste Gadget ou Widget.

Veja a demonstração aqui.

Insira o código do Gadget ou Widget em seu blog:

Gadget ou Widget elastic de Rede Social

O próximo Gadget ou Widget de Redes Socias é bem dinâmico e deve ser inserido em uma coluna lateral. Funciona com efeito elastic. Este Gadget ou Widget de Rede Social foi desenvolvido à base de javascript e css, e pode ser inserido em qualquer blog.

Para ver a demonstração, clique aqui.

Insira o código do Gadget ou Widget do modelo acima copiando o código da caixa de auto seleção, abaixo, e faça as devidas alterações nos links das Redes Sociais:

<br /><div >
<style type="text/css">#buttonbg {width: 260px;margin: 10px 5px;padding: 0;} #buttonbg li {cursor: pointer;height: 48px;position: relative;list-style-type: none;  } #buttonbg .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJbnK3I8pPf8B3388OrG-huSfxidP22Dr9yhZK2Zj_GPN2it_3a7fb5of7vIjgV-Nm2jOJZgLY4I2STPUva7fz3uIlJoDGUd5_KEhlLYm9kLZd5MD33VIRtuY-YWvITw-pHV9KMl_Eh7s/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><br /><ul id="buttonbg">
<li><a href="Link Facebook Anda" class="icon fb">Curta-nos no Facebook</a><span>Curta-nos no Facebook</span></li>
<li><a href="Link Twitter Anda" class="icon twit">Siga-nos no Twitter</a><span>Siga-nos no Twitter</span></li>
<li><a href="Link Google+ Anda" class="icon google">Siga-nos no Google+</a><span>Siga-nos no Google+</span></li>
<li><a href="Link Youtube Anda" class="icon ytube">Siga-nos no Youtube</a><span>Siga-nos no Youtube</span></li>
<li><a href="Link RSS/Feed Anda" class="icon rss">Assine via RSS</a><span>Assine via RSS</span></li>
</ul>
</div>
<div class="clear">
</div>
<span class="widget-item-control"><br /><span class="item-control blog-admin"><br /><a class="quickedit" href="//www.blogger.com/rearrange?blogID=1422966524627591079&widgetType=HTML&widgetId=HTML4&action=editWidget§ionId=sidebar-atas" onclick="return _WidgetManager._PopupConfig(document.getElementById("HTML4"));" target="configHTML4" title="Editar"><br /><img alt="" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18"><br /></a><br /></span><br /></span><br /><div class="clear">
</div>

Gadget popup flutuante

Outro Gadget ou Widget interessante de aplicar no blog é o Gadget popup flutuante. Ele se mantém na mesma posição enquanto o leitor navega normalmente em suas páginas. Ele fica oculto apenas com o símbolo "+" no canto inferior esquerdo da tela, onde as Redes Sociais só serão exibidas caso o leitor clique no botão "+" do Gadget ou Widget.

Veja o exemplo aqui.

Basta copiar o código abaixo e inserir em seu blog. Depois, edite as áreas endereço do Face, endereço do Google+, endereço do Twitter, endereço do Feed e endereço do Email:

<br /><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><br /><br /><br /><style type="text/css"> #MD-circle-mod{bottom: 0 !important;left: 5px;position: fixed; z-index:600;}#MD-container-circle{position:relative;height:100px;width:100px}#MD-base-button{background:-moz-linear-gradient(center top,#A90329 0,#8F0222 44%,#6D0019 100%) repeat scroll 0 0 #6D0019;background:-webkit-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:-o-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:-ms-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);border:4px solid #fff;text-decoration: none;z-index:9999;cursor:pointer;border-radius:50px 50px 50px 50px;box-shadow:0 1px 3px rgba(0,0,0,0.5);color:#fff;font:68px Arial;height:80px;left:0;padding:0;position:absolute;text-align:center;top:0;width:80px}.MD-btn{position:absolute;height:50px;width:50px;border-radius:25px;top:15px;left:15px;-webkit-transition:all 250ms;-moz-transition:all 250ms;-o-transition:all 250ms;-ms-transition:all 250ms;transition:all 250ms;box-shadow:0 1px 3px rgba(0,0,0,.5)}#MD-fb.open{top:-125px;left:25px}#MD-fb.open.clicked{top:-135px;left:15px}#MD-tw.open{top:-105px;left:80px}#MD-gplus.open{top:-75px;left:125px}#MD-rss.open{top:-30px;left:160px}#MD-mail.open{left:175px;top:25px}.plus{-moz-user-select: none;-moz-transition:all 200ms ease-in 0s;-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in}.rot{-moz-transform:rotate(137deg);-o-transform:rotate(137deg);-webkit-transform:rotate(137deg);transform:rotate(137deg)}  </style><br /><br /><br /><script type="text/javascript">var delay=40,delayTime;$(function(){btns=$(".MD-btn");$("#MD-base-button").toggle(function(){$("span.plus").addClass("rot");btns.each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.addClass("open")},delayTime)})},function(){$("span.plus").removeClass("rot");$($(btns).get().reverse()).each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.removeClass("open")},delayTime)})})});</script><br /><br /><br /><br /><a href="bloggerenciado.com" style="position:absolute;z-index:-11"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9yWH6y80h4n7gCloYcJs04r0Wx9RgfJSd13XYqw5W3t7HKI-zd34tSNs-39Qef5Re0gQjQm71Dh9zH87oihvHYiMr-dF_meDnwkJ48IHLvx-Ecy_dNGftC6ypmtcfcBINqDuGszYWkvY/s1600/1x1juice.png" /><br /></a><br /><br /><div id="MD-circle-mod">
<div id="MD-container-circle">
<a id="MD-fb" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJAI1Hazk8F5zWDIEzv7xMJQsStdI9JQLwpVYa9wDF3fSEjwmGnxPsJuAXDUhqWDTlv8peUGTAJR-DmvT-0h96ggDwqG8D56t3TVhJmIToizekVQheKm6SAwu6IMdeiX7pZ2bnZxE-xl0H/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -1px 0" href="endereço do face" rel="nofollow" target="_blank"><br /></a><br /><br /><a id="MD-tw" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJAI1Hazk8F5zWDIEzv7xMJQsStdI9JQLwpVYa9wDF3fSEjwmGnxPsJuAXDUhqWDTlv8peUGTAJR-DmvT-0h96ggDwqG8D56t3TVhJmIToizekVQheKm6SAwu6IMdeiX7pZ2bnZxE-xl0H/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -52px 0" href="enedereço do twitter" rel="nofollow" target="_blank"><br /></a><br /><br /><a id="MD-gplus" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJAI1Hazk8F5zWDIEzv7xMJQsStdI9JQLwpVYa9wDF3fSEjwmGnxPsJuAXDUhqWDTlv8peUGTAJR-DmvT-0h96ggDwqG8D56t3TVhJmIToizekVQheKm6SAwu6IMdeiX7pZ2bnZxE-xl0H/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -157px 0" href="enderereço do google+" rel="nofollow" target="_blank"><br /></a><br /><br /><a id="MD-rss" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJAI1Hazk8F5zWDIEzv7xMJQsStdI9JQLwpVYa9wDF3fSEjwmGnxPsJuAXDUhqWDTlv8peUGTAJR-DmvT-0h96ggDwqG8D56t3TVhJmIToizekVQheKm6SAwu6IMdeiX7pZ2bnZxE-xl0H/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -105px 0" href="endereço do feed" rel="nofollow" target="_blank"><br /></a><br /><br /><a id="MD-mail" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJAI1Hazk8F5zWDIEzv7xMJQsStdI9JQLwpVYa9wDF3fSEjwmGnxPsJuAXDUhqWDTlv8peUGTAJR-DmvT-0h96ggDwqG8D56t3TVhJmIToizekVQheKm6SAwu6IMdeiX7pZ2bnZxE-xl0H/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -210px 0" href="endereço do email" rel="nofollow" target="_blank"><br /></a><br /><br /><a id="MD-base-button"><span class="plus">+</span></a></div>
</div>
<a href="http://www.bloggerenciado.com" rel="dofollow"></a><br />

Este artigo está disponível para publicação em outros blogs ou sites desde que seja seguida a Política do BG

4 comentários :

Anônimo06/07/2014, 13:43
Obrigada pela dica!! Funcionou

Agnese
ResponderExcluir
Respostas
Formigas Brasil02/10/2015, 07:08
Olá, Andrew Silva

Instalei o widget da sidebar em meu blog e fiz algumas alterações
necessárias para caber dentro da largura da sidebar. Mas não consegui descobrir como
centralizar tudo dentro da sidebar. Também gostaria de saber como faço para que vá para uma rede
social sem fechar a página do blog.

Obrigado! No mais funcionou perfeitamente.

Márcio Dias
ResponderExcluir
Respostas
Unknown21/02/2016, 15:58
Eu colo o link das redes sociais só dentro dos "" ou eu apago eles e o espaço???
Vou tentar... mas assim que puder entre em contato comigo em: https://www.facebook.com/cantinhoconfuso/
Grata.
ResponderExcluir
Respostas
Luís Eduardo Pirollo27/01/2017, 03:40
Boa noite!!!
Instalei no meu blog o Widget Popup, fiz algumas alterações, ficou perfeito, obrigado!
Veja aqui http://www.blogdoandovida.com.br/
Agraços e ótimo final de semana!!!
ResponderExcluir
Respostas

Adicionar comentário

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.

Assinar: Postar comentários ( Atom )

Gadgets e Widgets de Redes Sociais para blog

Gadgets e Widgets

Gadgets e Widgets mini- PopUps

Vamos começar apresentando um Gadget ou Widget Popup

Gadget ou Widget flutuante

Gadget ou Widget elastic de Rede Social

Gadget popup flutuante

4 comentários :

Conheça nossos serviços

Cadastre seu email e receba novidades

Pesquise no Google

Quem está no blog agora

Visitantes do blog

Andrew Silva