GADGET DE SUBSCRIÇÃO RSS/FEEDS

Na postagem de hoje, quero lhes apresentar um lindo gadget para subscrição de RSS/Feeds com opção de seguir no Twitter e Facebook. Totalmente personalizável com efeito elegante que muda de cor quando o mouse é posicionado sobre ele.
Veja o exemplo abaixo:
Gadget de subscrição RSS/Feeds

veja aqui o gadget subscrição de RSS/Feeds instalado nesse blog de testes: DEMO



Como adicionar o gadget subscrição de RSS/Feeds no blogger?


Vá até 'Layout' → 'Elementos de página' → Clique em 'Adicionar um gadget' → Escolha tipo 'HTML/Javascript' e cole o seguinte código:

<style type='text/css'>
/*----------- www.dicasblogger.org -----------*/
.db a{
    color: #6e6e6e;
    font: bold 12px Century Gothic, AppleGothic, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #eb3355;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#eb3355),to(#eb3355));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#eb3355;),to(#eb3355));
    border: solid 1px #eb3355;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
.db a:hover { background:#f7a032;
    color: #fff;
    border-color: #f7a032;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.db a:active {
    color: #000;
    border-color: #f7a032;
}
.dbbar{ width:255px; float: left; margin-left:3px; margin-top:5px; padding:0;}
.dbbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 0px 0 15px 0; float: left; width: 100%; font-family: Century Gothic, AppleGothic, Arial, sans-serif;}
.dbbar .emailsub .emailupdatesform{width: 100%; float: right; padding:0px;}
.dbbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px;  width: 120px; height:30px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}
.dbbar .emailsub .emailupdatesform input.emailupdatesinput:hover{
border-color:#f7a032;background-color: #fff;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.dbbar .emailsub .emailupdatesform input.joinemailupdates:hover{background:#f7a032;border-color:#f7a032;  
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor:pointer;
}
.dbbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #eb3355;
    background: #eb3355;
   font-family:Century Gothic, AppleGothic, Arial, sans-serif;
text-transform: none; color: #989898; height: 25px; padding: 5px 10px; margin: 0 0 0 5px; font-weight:normal; font-size:12px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

.dbbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px;  width: 140px; height:28px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}
.dbbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #eb3355;
    background: #eb3355;
   font-family:Century Gothic, AppleGothic, Arial, sans-serif;
text-transform: none; color: #fff; height: 25px; padding: 0 5px; margin: 0 0 0 5px; font-weight:normal; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
</style>
<!--[if IE 8]> <style>
.dbbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 5px 10px; color: #989898; font-size: 12px;  width: 130px; height:18px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}
.dbbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #f3f3f3;
   font-family:Century Gothic, AppleGothic, Arial, sans-serif;
text-transform: none; color: #989898; height: 25px; padding: 0 5px; margin: 0 0 0 5px; font-weight:normal; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
/*------------- www.dicasblogger.org -------------*/
</style> <![endif]-->

<div class="db" style="padding: 0pt 0pt 0pt 5px;">
<table><tbody><tr>
<td>
<a   href="FEEDBURNER-LINK-AQUI" rel="nofollow" target="_blank"><img src="http://2.bp.blogspot.com/-g7FaIJ1OjgQ/Ttd3DAAytbI/AAAAAAAAEGI/ifepI3TXqhg/s1600/rss.png" border="0" /></a>
</td>
<td>
<a style="margin-left:5px;"href="TWITTER-FAN-PAGE-LINK-AQUI" rel="nofollow" target="_blank"><img src="http://4.bp.blogspot.com/-82yXf2C2f7Y/Ttd3DvVP5-I/AAAAAAAAEGQ/9YRURg-wrPY/s1600/twitter.png" border="0" /></a>
</td>
<td>
<a style="margin-left:5px;"href="FACEBOOK-FAN-PAGE-LINK-AQUI" rel="nofollow" target="_blank"><img src="http://3.bp.blogspot.com/-bnswEL1l4bI/Ttd3CJ0oSNI/AAAAAAAAEGA/MNN2fh77H4Q/s1600/facebook.png"border="0" /></a>
</td>
</tr></tbody></table>
<div class="dbbar">
<div class="emailsub">
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SEU-BLOG', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Submit email..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Submit email...&#39;;}" onfocus="if (this.value == &#39;Submit email...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="SEU-BLOG" name="uri" type="hidden" /><input value="Subscribe" class="joinemailupdates" type="submit" /></form></div></div></div></div>


As partes que estão destacadas em vermelho você substitui pelos seu links
As partes destacadas em azul você substitui pelo nome do seu blog
Se desejar você pode alterar a cor, tamanho, fonte, para combinar com o layout do seu blog.
Se tiver qualquer dúvida use a área de comentários

0 comentários:

Postar um comentário

Por favor leia antes de comentar:

1. Escreva apenas o que for referente ao tema;
2. Ofensas pessoais ou spam não serão aceitos;
3. faço parcerias por meio de comentários;
4. Para entrar em contato nosso msn bloggeresites@hotmail.com;
5. Obrigado por sua visita e volte sempre.