Widget com botões das redes sociais para Blogger

Olá amigos blogueiros! A melhor maneira de promover um blog, é agregar bom conteúdo + estratégia de divulgação. Para a divulgação, compartilhar o conteúdo em diferentes redes sociais tem se mostrado uma eficiente estratégia. Existem diferentes mídias de compartilhamento social disponíveis para divulgar o seu blog. Mas cada uma delas terão gadgets próprios com diferentes códigos. E a única maneira de unir os principais em um lugar é usando o Gadget Redes sociais Mashable no seu blog.

Este gadget de compartilhamento social traz a união de facebook, twitter, google+, e a opção de compartilhamento. Além disso, também contém o botão de assinatura de e-mail para obter mais leitores para a newsletter do seu blog.

Utilizar um widget como esse pode ajudar muito seu blog a ter uma boa repercussão nas redes sociais, e como consequência, você poderá receber muitas visitas por meio delas.

O widget foi desenvolvido pelo site Way2Blogging (em inglês), inspirado no widget usado no Mashable.com (também em inglês). No presente momento, até mesmo utilizamos ele em nosso blog, no footer à direita.

Sem mais demora, vamos para o código:

Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.

Acesse modelo → Fazer backup/Restaurar → Fazer download do modelo completo.

1° passo: Acesse o painel do Blogger, escolha o blog que você deseja instalar, selecione a opção "Layout" e clique em "Adicionar Gadget" → "HTML/Javascript".

2°passo: Cole o seguinte código, mas ainda não salve antes de fazer alterações do 3° passo.

<style> /* Social Widget */ #MBT-mashable-bar { border: 0; margin-bottom: 10px; margin: 0 auto; width:300px; } .fb-likebox { background: #fff; padding: 10px 10px 0 10px; border: 1px solid #D8E6EB; margin-top: -2px; height:80px; } .googleplus { background: #F5FCFE; border-top: 1px solid #FFF; border-bottom: 1px solid #ebebeb; border-right: 1px solid #D8E6EB; border-left: 1px solid #D8E6EB; border-image: initial; font-size: .90em; font-family: "Arial","Helvetica",sans-serif; color: #000; padding: 9px 11px; line-height: 1px;} .googleplus span { color: #000; font-size: 11px; position: absolute; display:inline-block; margin: 9px 70px;} .g-plusone { float: left;} .twitter { background: #EEF9FD; padding: 10px; border: 1px solid #C7DBE2; border-top: 0;} #mashable { background: #EBEBEB; border: 1px solid #CCC; border-top: 1px solid white; padding: 2px 8px 2px 3px; text-align: right; border-image: initial;} #mashable .author-credit {} #mashable .author-credit a { font-size: 10px; font-weight: bold; text-shadow: 1px 1px white; color: #1E598E; text-decoration:none;} #email-news-subscribe .email-box{ padding: 5px 10px; font-family: "Arial","Helvetica",sans-serif; border-top: 0; border-right: 1px solid #C7DBE2; border-left: 1px solid #C7DBE2; border-image: initial; height:35px;} #email-news-subscribe .email-box input.email{ background:#FFFFFF; border: 1px solid #dedede; color: #999; padding: 7px 10px 8px 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border-image: initial; font-family: "Arial","Helvetica",sans-serif;} #email-news-subscribe .email-box input.email:focus{color:#333} #email-news-subscribe .email-box input.subscribe{ background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00)); background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); -pie-background: linear-gradient(270deg,#ffca00,#ff9b00); font-family: "Arial","Helvetica",sans-serif; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #cc7c00; color:white; text-shadow:#d08d00 1px 1px 0; padding:7px 14px; margin-left:3px; font-weight:bold; font-size:12px; cursor:pointer; border-image: initial;} #email-news-subscribe .email-box input.subscribe:hover{ background: #ff9b00; background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00); background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00)); filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb); outline:0;-moz-box-shadow:0 0 3px #999; -webkit-box-shadow:0 0 3px #999; box-shadow:0 0 3px #999 background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00)); background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%); -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00); border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #cc7c00; color:#FFFFFF; text-shadow:#d08d00 1px 1px 0} #other-social-bar { background-color: #D8E6EB; box-shadow: 0 1px 1px #FFFFFF inset; padding: 0px; font-family: "Arial","Helvetica",sans-serif; font-weight:bold; overflow: hidden; border: 1px solid #B6D0DA; height:37px; } #other-social-bar ul {list-style: none outside none; padding-left: 4px;} #other-social-bar .other-follow { float: left; color:#1E598E; overflow: hidden; height:20px; padding:5px; width: 270px;} #other-social-bar .other-follow ul { list-style: none outside none; padding-left: 4px;} #other-social-bar .other-follow ul li { font-size: 12px; font-weight: bold; display:inline; border:0; text-shadow: 1px 1px white;} #other-social-bar .other-follow ul li a { font-size: 12px; color:#1E598E; font-weight: bold; display:inline; text-shadow: 1px 1px white;} #other-social-bar .other-follow li { font-size: 12px; font-weight: bold; display:inline; border:0; text-shadow: 1px 1px white;} #other-social-bar .other-follow li a { font-size: 12px; color:#1E598E; font-weight: bold; display:inline; text-shadow: 1px 1px white;} #other-social-bar .other-follow li.my-rss { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl0i63y4FU0AZK9VkvcxIX0EiBfSKWD7z4giUtPabVBEGk9IJPUiE5OzDkQLRCkfqCr0KS95oTKtEfhxk1DikGKiO54QMfIAOPKtJSojWzHgvXiejaLzqKNbcLGKWXZAwiuhA-UClNp40/s400/rss-16x16.png') no-repeat transparent; line-height: 1; padding: 0px 3px 1px 20px; width: 60px; margin-bottom:0px; margin-left:5px;} #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-linkedin a, #other-social-bar .other-follow li.my-gplus a{ text-decoration:none; } #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-linkedin a:hover, #other-social-bar .other-follow li.my-gplus a:hover{ text-decoration:underline; } #other-social-bar .other-follow li.my-linkedin { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-csiOR7XwkfdZPKLfB5FodgtoCM49TXzUnsNYTlnKoGnL6F0OR_qhHe5_6s5xi1IG0pZTyekSHxoJhILefbXWfA6fxIH-hlUrN5hK4KGXU8Kf1UslwUfwIDqHJEoXHTANuS-M-57nJkE/s400/linkedin-16x16.png') no-repeat transparent; line-height: 1; padding: 0px 3px 1px 20px; width: 60px; margin-bottom:0px;} #other-social-bar .other-follow li.my-gplus { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH4tGwpJuzRGVdD-NaHd4B7JNeVv743W-WmIyEdF1UyGd-k5paH2vU_50bJNA54nWFUY7eC2bb2BXKdFzt6IY_FHQSqQ8fPRHHnDt23T9t1N7mVmA75Ewzh_Hx_QKxdGLAF_z5SHN9l04/s400/gplus-16x16.png) no-repeat transparent; line-height: 1; width: 60px; padding: 0px 3px 1px 20px; margin-bottom:0px;} </style> <!--[if IE]><style> #email-news-subscribe .email-box input.subscribe{ background: #FFCA00; } </style><![endif]--> <!--begin of social widget--> <div style="margin-bottom:10px;"> <div id="MBT-mashable-bar" > <!-- Begin Widget --> <div class="fb-likebox"> <!-- Facebook --> <iframe src="//www.facebook.com/plugins/like.php?href=http://www.facebook.com/pages/Mundo-In4mal/152646818114428&send=false&layout=standard& width=200px&show_faces=true&action=like&colorscheme=light& font&height=100px&appId=234513819928295" scrolling="no" frameborder="0" style="border:none; overflow:hidden; "></iframe> </div><div class="googleplus"> <!-- Google --> <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium"></div><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div><div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351& align=&button=blue&id=twitter_tweet_button_0& lang=en&link_color=&screen_name=mundo_informal&show_count=& show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div><div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=in4mal', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> <input type="hidden" value="in4mal" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form></div></div><div id="other-social-bar"> <!-- Other Social Bar --> <ul class="other-follow"><li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/in4mal" target="_blank">RSS Feed</a> </li><li class="my-linkedin"> <a rel="nofollow" title="linkedin" rel="author" href="LINKEDIN PROFILE LINK" target="_blank">linkedin</a> </li><li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href="http://plus.google.com/100562857635513562536" target="_blank">Google Plus</a> </li></ul></div><div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.mundoinformal.com" target="_blank" >Widgets Blogger »</a></span></div></div><!-- End Widget --> </div><!--end of social widget-->

3° passo: Faça as seguintes substituições:

• Substitua http://www.facebook.com/pages/Mundo-In4mal/152646818114428 com o link de sua página no Facebook
• Substitua mundo_informal com seu usuário do Twitter.
• Substitua in4mal com o título de seu Feedburner. O título de seu Feedburner é a palavra que é adicionada no final do seu link do Feedburner.

Exemplo: http://feeds.feedburner.com/in4mal

• Substitua http://feeds.feedburner.com/tntbystc com o link de seu feedburner.
• Substitua LINKEDIN PROFILE LINK com o link de seu perfil Linkedin
• Substitua http://plus.google.com/44448117245314564536 com o link de seu perfil Google Plus.

3° passo: Clique em "Salvar".

PRONTO! Espero que tenham gostado!

Share This :