Bom dia voltei com mais uma partilha. Uma box mais profissional de feed com redes sociais , na imagem acima mostra como fica. A box não tem fundo isto é não tem background, então irá subressair com sua sidebar. Mas veja online aqui:Click para visualizár!
Visto então vamos lá colocar no seu blog, na sua sidebar.
Para isso entre em (esquema) adicione um gadget html/javascript e cole este meu código...
<center>
<style type="text/css">
#upupbox-bt{width:270px;padding:0px;}
#email-notice{background:#666; box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;text-align: left;
color:#fff;font-size:13px;line-height:1.5;position:relative;text-shadow:0 -1px 0 rgba(0,0,0,0.2);margin:20 0 15px;padding:10px 50px;}
#email-notice span{border-left:14px solid transparent;border-right:14px solid transparent;border-top:10px solid #666;
bottom:-10px;height:0;position:absolute;left:120px;width:0;}
#email-form form{margin:0;padding:12px 18px;}
#email-form input.input-text{background:#fcfcfc;box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;font-family: Montez;color:#666;text-align:center;text-shadow: 1px 1px 2px #ccc;font-size:16px;
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;border-radius: 3px;border:1px solid #666;width:217px;margin:0 0 10px;padding:8px;}
#email-form .button{border-radius: 3px;border:1px solid #666;-moz-border-radius: 3px;-webkit-border-radius: 3px;background-color: #666;box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;color: #fcfcfc;
font-weight: bold;margin-bottom: 2em;text-transform: uppercase;width: 236px;padding:10px;}
#email-form .button:hover{background:#fff;border:1px solid #666;color: #666;}
#email-form p{color:#CCC;font-size:12px;line-height:16px;margin:0;}
.in-bt {background: #000;border-radius: 50%;display: inline-block;height: 20px;line-height: 20px;margin: 0 10px 0 0;text-align: center;width: 20px;}
#social-icon {width:180px; height:30px;background:#666; margin-bottom:0px;}
#social-icon a { transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; -webkit-transition: all 0.6s; }
#social-icon a:hover {transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; -webkit-transition: all 0.6s; }
#social-icon a.facebook { display:block; float:left; height:30px; width:30px; text-indent:-9999px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FJiRp8obXvGilWVZsaotOtCX-l5uAJ1e1rDl-ADAPcgb_iZvfzo0Ei1xiiuSao6DhMlLYOeWOCchMUaWiTamkqmobdE2-pVJgpUZVRbl93MnLj6sIVcMvGFvhUlEMm_xbK5DOYQs9ec5/s1600/socials@2x.png'); background-position:0px -30px; background-size: 270px 60px; }
#social-icon a:hover.facebook { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FJiRp8obXvGilWVZsaotOtCX-l5uAJ1e1rDl-ADAPcgb_iZvfzo0Ei1xiiuSao6DhMlLYOeWOCchMUaWiTamkqmobdE2-pVJgpUZVRbl93MnLj6sIVcMvGFvhUlEMm_xbK5DOYQs9ec5/s1600/socials@2x.png'); background-position:0px 0px; background-size: 270px 60px; background-color:#436eac; }
#social-icon a.twitter { display:block; float:left; height:30px; width:30px; text-indent:-9999px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FJiRp8obXvGilWVZsaotOtCX-l5uAJ1e1rDl-ADAPcgb_iZvfzo0Ei1xiiuSao6DhMlLYOeWOCchMUaWiTamkqmobdE2-pVJgpUZVRbl93MnLj6sIVcMvGFvhUlEMm_xbK5DOYQs9ec5/s1600/socials@2x.png'); background-position:-30px -30px; background-size: 270px 60px; }
#social-icon a:hover.twitter { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FJiRp8obXvGilWVZsaotOtCX-l5uAJ1e1rDl-ADAPcgb_iZvfzo0Ei1xiiuSao6DhMlLYOeWOCchMUaWiTamkqmobdE2-pVJgpUZVRbl93MnLj6sIVcMvGFvhUlEMm_xbK5DOYQs9ec5/s1600/socials@2x.png'); background-position:-30px 0px; background-size: 270px 60px; background-color:#0598c9; }
#social-icon a.flickr { display:block; float:left; height:30px; width:30px; text-indent:-9999px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FJiRp8obXvGilWVZsaotOtCX-l5uAJ1e1rDl-ADAPcgb_iZvfzo0Ei1xiiuSao6DhMlLYOeWOCchMUaWiTamkqmobdE2-pVJgpUZVRbl93MnLj6sIVcMvGFvhUlEMm_xbK5DOYQs9ec5/s1600/socials@2x.png'); background-position:-60px -30px; background-size: 270px 60px; }
#social-icon a:hover.flickr { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FJiRp8obXvGilWVZsaotOtCX-l5uAJ1e1rDl-ADAPcgb_iZvfzo0Ei1xiiuSao6DhMlLYOeWOCchMUaWiTamkqmobdE2-pVJgpUZVRbl93MnLj6sIVcMvGFvhUlEMm_xbK5DOYQs9ec5/s1600/socials@2x.png'); background-position:-60px 0px; background-size: 270px 60px; background-color:#e33b7e; }
#social-icon a.pinterest{ display:block; float:left; height:30px; width:30px; text-indent:-9999px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FJiRp8obXvGilWVZsaotOtCX-l5uAJ1e1rDl-ADAPcgb_iZvfzo0Ei1xiiuSao6DhMlLYOeWOCchMUaWiTamkqmobdE2-pVJgpUZVRbl93MnLj6sIVcMvGFvhUlEMm_xbK5DOYQs9ec5/s1600/socials@2x.png'); background-position:-90px -30px; background-size: 270px 60px; }
#social-icon a:hover.pinterest { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FJiRp8obXvGilWVZsaotOtCX-l5uAJ1e1rDl-ADAPcgb_iZvfzo0Ei1xiiuSao6DhMlLYOeWOCchMUaWiTamkqmobdE2-pVJgpUZVRbl93MnLj6sIVcMvGFvhUlEMm_xbK5DOYQs9ec5/s1600/socials@2x.png'); background-position:-90px 0px; background-size: 270px 60px; background-color:#cb2027; }
#social-icon a.googleplus { display:block; float:left; height:30px; width:30px; text-indent:-9999px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FJiRp8obXvGilWVZsaotOtCX-l5uAJ1e1rDl-ADAPcgb_iZvfzo0Ei1xiiuSao6DhMlLYOeWOCchMUaWiTamkqmobdE2-pVJgpUZVRbl93MnLj6sIVcMvGFvhUlEMm_xbK5DOYQs9ec5/s1600/socials@2x.png'); background-position:-120px -30px; background-size: 270px 60px; }
#social-icon a:hover.googleplus { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FJiRp8obXvGilWVZsaotOtCX-l5uAJ1e1rDl-ADAPcgb_iZvfzo0Ei1xiiuSao6DhMlLYOeWOCchMUaWiTamkqmobdE2-pVJgpUZVRbl93MnLj6sIVcMvGFvhUlEMm_xbK5DOYQs9ec5/s1600/socials@2x.png'); background-position:-120px 0px; background-size: 270px 60px; background-color:#d64b2e; }
#social-icon a.vimeo { display:block; float:left; height:30px; width:30px; text-indent:-9999px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FJiRp8obXvGilWVZsaotOtCX-l5uAJ1e1rDl-ADAPcgb_iZvfzo0Ei1xiiuSao6DhMlLYOeWOCchMUaWiTamkqmobdE2-pVJgpUZVRbl93MnLj6sIVcMvGFvhUlEMm_xbK5DOYQs9ec5/s1600/socials@2x.png'); background-position:-150px -30px; background-size: 270px 60px; }
#social-icon a:hover.vimeo { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FJiRp8obXvGilWVZsaotOtCX-l5uAJ1e1rDl-ADAPcgb_iZvfzo0Ei1xiiuSao6DhMlLYOeWOCchMUaWiTamkqmobdE2-pVJgpUZVRbl93MnLj6sIVcMvGFvhUlEMm_xbK5DOYQs9ec5/s1600/socials@2x.png'); background-position:-150px 0px; background-size: 270px 60px; background-color:#86ae24;}
</style>
<div id='upupbox-bt'>
<div id='social-icon'>
<a class='facebook' href='http://www.facebook.com/'/>
<a class='twitter' href='https://twitter.com/'/>
<a class='flickr' href='http://www.flickr.com/'/>
<a class='pinterest' href='http://pinterest.com/'/>
<a class='googleplus' href='https://plus.google.com/'/>
<a class='vimeo' href='http://vimeo.com/'/>
<a class='youtube' href='http://www.youtube.com/'/>
</a></a></a></a></a></a></a></div>
<p id='email-notice'>
Subscreva o meu feed por email e fique por dentro de todas as novidades...
<span/></span></p>
<div id='email-form'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='nice custom' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=best-tuga', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='' target='popupwindow'>
<input class='input-text' name='email' onblur='if (this.value == '') {this.value = 'Seu email aqui';}' onfocus='if (this.value == 'Seu email aqui') {this.value = '';}' type='text' value='Seu email aqui'/>
<input name='uri' type='hidden' value='best-tuga'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='button' type='submit' value='Assine!'/>
<p><span class="in-bt">?</span>Dúvidas me contacte.
</p>
</form>
</div>
</div>
</center>
Feito isso veja como ficou...
Notas;abaixo deixo onde fazer alteraçoes , modificações...
(1) width:270px; largura box no geral
(2) width:217px; largura box email
(3) width:236px; largura botão assine!
(4) width:180px; largura redes sociais
(5) http://www.facebook.com/ coloque nomes s rede social
(6) best-tuga aqui troque seu nome de feedburner
Estes trechos estão assinalados para caso queres trocar medidas...
Agora se quiser a box com fundo, borda e borda redonda abaixo deixo que deve acrescentár.
upupbox-bt{ agora aqui coloque isto.... background: #222;border-radius: 4px;border:1px solid #666;
Pronto feito isso irá ter box na sua sidebar...
