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:
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjmMABKeXnuyGfQiJYuKbCjsdwswuFO2LNhiQckZ2-HkEswG3JjZcJdKZ70aQBJhZiJ2eXzER219BPfdc0N5CmBztYgUkdMnkTpfWhQaMaIWZ4OOePFrAOmeMPVUoZGrZ3ycgiKnOyy4c/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgceQQ_6rAcXnmOv-UStCrfj12ECaSVAeUT3JgUobpjR_lJNSX27MKBIjC8-SmBL403irj9lEP2VMfUO0xgxuAVweZTAJ8MFH2uLWRGxB14IHdSFddK8Pt34Iqzq3IRQmH1SpudvTbne4Q/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitop3boj54Rkweg2m8gZm4AK-2_gMXkL0EbKHASvqbcD0Nm2q_vzFfZelkp4K63M8aSxWL5jvfDAhluWTrEoUAUgrTeuVOP2Xtj-uif8NYdcM5HnSvUtTw9EHC3hrJhLvenYJkVzDr6Ao/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 == '') {this.value = 'Submit email...';}" onfocus="if (this.value == 'Submit email...') {this.value = '';}" 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.