Widget assinatura de email Feedburner com 9 Botões Sociais

Olá e bem-vindo ao Mult-focos. Neste post trazemos uma ferramenta essencial para um blog, trata-se de um widget assinatura de email Feedburner com 9 Botões Sociais.

Widget de redes sociais para Blogger

Veja um demo clicando no botão abaixo.


DEMO

Como adicionar em seu blog

•  Ir para o painel do blogger->layout 
•  Clique em Adicionar um Gadget. 
•  Na janela Adicionar um gadget->Html/JavaScript. 
•  Copie o código HTML abaixo e cole-o dentro da caixa de conteúdo. 
•  Salvar o gadget. 
• Arraste o gadget e reposicione-o onde você quer mostrá-lo. 
•  Clique no botão Salve (canto superior direito). 

Configurações

•  Estão todas no código, copie o código em um bloco de notas proceda as alterações e adicione seu widget. 

 Isto é tudo.

<div class="outer-most">
<table>
<tr>
<td>
<div id="social-widget-2" class="widget widget_socials white_box">

<div class="social_wrapper">

<div class="social_inner">
<a class="facebook" title="Facebook" href="FACEBOOK LINK"></a>
<a class="twitter" title="Twitter" href="TWITTER LINK"></a>
<a class="rss" title="RSS Feed" href="RSS LINK"></a>
<a class="youtube" title="Youtube" href="YOUTUBE LINK"></a>
<a class="linkedin" title="Linkedin" href="LINKEDIN LINK"></a>
<a class="tumblr" title="Tumblr" href="TUMBLR LINK"></a>
<a class="google_plus" title="Google_plus" href="GOOGLE+ LINK"></a>
<a class="pinterest" title="Pinterest" href="PINTEREST LINK"></a>
<a class="instagram" title="Instagram" href="INSTAGRAM LINK"></a>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>

<div class="widget widget_newsletter white_box blue">
<div class="border_b">
<div class="newsletter_inner">
<h3>Boletim informativo</h3>
<p>Receba atualizações por e-mail!</p>
<form target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER ID', 'popupwindow', 

'scrollbars=yes,width=550,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input class="letter_email" type="text" placeholder="Endereço de email" name="email">
<input class="letter_submit" type="submit" value="Ok" name="submit">
<input type="hidden" value="SEU ID FEEDBURNER" name="uri">
<input type="hidden" value="pt_BR" name="loc">
</form>
</div>

<center><div id="credits"><Script Language='Javascript'>
<!--Mult-focos//-->
</Script> </div></center>
<style>#credits a{font-size: 10px; text-decoration:none; color:white;} </style>
</div>

</div>


<style>

.widget_socials .social_wrapper {
    padding: 0px 20px 10px;
}
.widget_socials .social_inner {
    margin-right: -20px;
}
.widget_socials a {
    background-color: #888888;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    float: left;
    height: 55px;
    margin-bottom: 10px;
    margin-right: 10px;
    overflow: hidden;
    text-indent: 9999em;
    width: 55px;
}
.widget_socials a:hover {
    background-color: #666666 !important;
}


.widget_socials a.facebook {
    background-color: #6F85AE;
    background-image: url("https://lh6.googleusercontent.com/-_X1tDVFSVdQ/VFpGvA47CNI/AAAAAAAAIHk/w1uWNnoXpmQ/s24-no/0Bz2zRMjP8YuqVWo5dDBFSnVrdkE.png");
}
.widget_socials a.twitter {
    background-color: #23B6C6;
    background-image: url("https://lh6.googleusercontent.com/-nYf_H1wItyU/VFpG6TliszI/AAAAAAAAIH0/TE6I0L5WN_E/s24-no/twitter1.png");
}

.widget_socials a.tumblr {
    background-color: #2E4B68;
    background-image: url("https://lh5.googleusercontent.com/-gsGL-GrKRRc/VFpHinooQpI/AAAAAAAAIIc/M8cOa0kXgPc/s24-no/tumblr.png");
}
.widget_socials a.rss {
    background-color: #FA7204;
    background-image: url("https://lh4.googleusercontent.com/-txD8qfR-6RI/VFpHtscV-bI/AAAAAAAAIIs/-JU6kHk0iSU/s24-no/rss.png");
}
.widget_socials a.linkedin {
    background-color: #006699;
    background-image: url("https://lh5.googleusercontent.com/-AVbFAV2SMSg/VFpH5Eo-EII/AAAAAAAAII8/8fj3CqupvPM/s24-no/linkedin.png");
}
.widget_socials a.youtube {
    background-color: #DD3D3D;
    background-image: url("https://lh6.googleusercontent.com/-Qv9tA8BYei4/VFpIDUUEoSI/AAAAAAAAIJM/1jRviSt4dn4/s24-no/youtube.png");
}
.widget_socials a.google_plus {
    background-color: #DD3D3D;
    background-image: url("https://lh5.googleusercontent.com/-5NvaUIUqSbU/VFpIPR0AezI/AAAAAAAAIJc/Q0iqBqfeQHM/s24-no/google%2B.png");
}
.widget_socials a.pinterest {
    background-color: #C9242D;
    background-image: url("https://lh3.googleusercontent.com/-DvG8FB7z32o/VFpIemLqIgI/AAAAAAAAIJs/PzWkXMy0_eo/s24-no/0Bz2zRMjP8YuqTE1Sb21WSkNONUk.png");
}
.widget_socials a.instagram {
    background-color: #1B577D;
    background-image: url("https://lh5.googleusercontent.com/-HNT25kJ_XOE/VFpIvnyY-rI/AAAAAAAAIJ8/Dkq_lTTqQ_k/s24-no/instagram.png");
}
.widget.facebook_like_box .facebook_wrapper {
    padding: 11px 20px 15px;
}
.widget.facebook_like_box .fb_inner_wrapper {
    overflow: hidden;
}
.twitter_widget .tw_btn {
    padding-bottom: 20px;
    padding-left: 20px;
}
.twitter_widget em {
    color: #999999;
    font-size: 12px;
}
.flickr_widget .flickr_wrapper {
    padding: 20px 20px 7px;
}
.flickr_widget .flickr_wrapper .flr_wrapper_inner {
    overflow: hidden;
}
.flickr_widget .flickr_wrapper .flr_inner {
    margin-right: -13px;
}
.flickr_widget .flickr_wrapper a.flickr_item {
    display: block;
    float: left;
    height: 55px;
    margin-bottom: 13px;
    margin-right: 13px;
    text-decoration: none;
    width: 55px;
}
.flickr_widget .flickr_wrapper a.flickr_item img {
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    display: block;
    height: 35px;
    width: 35px;
}

.widget_newsletter.blue {
    background-color: #93D0EA;
}
.widget_newsletter.green {
    background-color: #80AA2A;
}
.widget_newsletter.red {
    background-color: #F4836A;
}
.widget_newsletter.black {
    background-color: #444444;
}
.widget_newsletter.pink {
    background-color: #E38ADB;
}
.widget_newsletter.orange {
    background-color: #F57E4B;
}
.widget_newsletter h3 {
    color: #FFFFFF;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.widget_newsletter .newsletter_inner {
    background: url("https://lh6.googleusercontent.com/-rPPP8rfBvkQ/VFpGKtEx8vI/AAAAAAAAIHU/oUJkyhxVMT0/w114-h85-no/0Bz2zRMjP8YuqVWo5dDBFSnVrdkE.png") no-repeat scroll 

right 20px transparent;
    padding: 25px 20px;
}

.widget_newsletter .letter_email {
    line-height: normal;
    margin-right: 5px;
    width: 200px;
}
.widget_newsletter .letter_submit {
    background: #666666;
}
.widget_newsletter {
    color: #FFFFFF;
}

input[type="text"], input[type="password"], input[type="email"], textarea, select {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #F9F9F9;
    border: medium none;
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset;
    color: #888888;
    display: inline-block;
    font-size: 0.9em;
    line-height: 1em;
    margin: 0;
    max-width: 100%;
    outline: medium none;
    padding: 1em;
    width: 300px;
}
.button, .post_tag a, .tagcloud a, a.comment-reply-link, .form-submit #submit, input[type="submit"], input[type="button"] {
    background: url("images/button.png") repeat-x scroll center bottom transparent;
    border: medium none;
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-size: 0.9em;
    font-weight: bold;
    line-height: 1em;
    outline: medium none;
    padding: 1em;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
}
.outer-most {width:340px;}
</style>

</td>
</tr>
</table></div>

See the Pen Csyav by Mairink (@Oemes) on CodePen.

---

---