Coloque um lindo gadget de feed,Twitter e Facebook no seu blog

♠ Posted by Unknown in blogger,dicas,Gadgets,Tutoriais at 16:21

Algumas pessoas gostam de ter gadgets em seu blog não só pela funcionalidade que ele proporciona ao
blog, mas também pelo visual bacana que deixa para os seus leitores.
Quero trazer para vocês um gadget bacana que eu encontrei por ai nas minhas andanças pelo mundo virtual.
Este gadget tem a principal função divulgar o Feed do seu blog, mas ele também vem acompanhado do Facebook e também do Twitter.
Chega de conversa e vamos ao trabalho:

Vá em "Layout" e clique em "Adicionar um Gadget".

Agora procure por "HTML/Java script igual a imagem a baixo e selecione ele.

Agora dentro da janela igual a essa aqui em baixo:

Na caixa que se abriu copie e cole os seguintes códigos:

<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>



<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/AVvXsEjbmWgnpMztqtE8EcqP9sncxqmxdqnuJK6STdfycXmCQ-4KJH-B1_7vloTBjFFVtKl48Ge57h1v7pxjOCwV8gHbfJnCYmn7dtVYCLPb0mumhkkIlvanHnEi1aDS6xqp11P7OQNba-n355Y/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/AVvXsEjCOWJXjV2VUqqQJPhe-eanwkA_0k8pZu7ZKtIOCAy9gilkNVzypKrcm793HkiISuv6AuOtjJeDpe_szKk1667cAWbuzgvWeZupRkDaZEuETbgAOH7Whfx89ERQLujdMwl2KmKMroYEHTo/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/AVvXsEj5KlfRidGw_0k_UhMrAvUFnsNKPMQuAZ5e8uTrjdDMBJQI576smnYROQK8hBEKO6gI4vLe2IWj8JxfZMXmfLW2Z_VbnG_uN5iKj-LIAOz5UJhAzgrwnsdF7LPMaIV-udZSR4Qeo8-5Gok/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>

Atenção !!!

Coloque a no lugar do vermelho o link do seu feed, depois o seu Twitter e por final o link da sua fã page do Facebook.

As cores também podem ser alteradas de acordo com o seu gosto e o perfil do seu layout, é só mudar os códicos das cores.

Cores HTML

Agora clique em salvar e pronto.

Gostou da dica ?

Deixem seus comentários por favor.

Coloque um lindo gadget de feed,Twitter e Facebook no seu blog

0 comentários:

Postar um comentário