Box feed/redes sociais

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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=best-tuga&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='' target='popupwindow'>
<input class='input-text' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Seu email aqui&apos;;}' onfocus='if (this.value == &apos;Seu email aqui&apos;) {this.value = &apos;&apos;;}' 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...

Leia +

Box feed/redes sociais

► 0

► box r sociais vários

► Cartita

Autor box c/ addthis

Boa sexta feira,vamos lá a mais uma partilha. Como na imagem acima mostra trago uma box autôr com redes sociais, online (addthis). Box simples com icones no nick e no resumo e efeito simples no hover da foto,avatar e claro com botões addthis. Mas veja online aqui:Entre Aqui!!!
Agora vamos aplicár só de uma vez só, entre em modelo do seu template e vá html .

Antes de tudo faça uma cópia do seu template...

(1)Procure este código:

E acima coloque o meu código que deixo abaixo:
Outras opções caso não tenha este código no seu template,pois consuante o tema pode alterar:

Aqui se optar este código coloque abaixo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <style type='text/css'>
.perfillbt{font:11px Lobster;text-transform:none;font-weight:400;border-radius:2px;border:2px solid #000; margin: 10px 0px;-moz-box-shadow:0 0 3px #e0e0e0;
  -webkit-box-shadow:0 0 3px #e0e0e0;
  box-shadow:0 0 3px #e0e0e0; padding: 10px; width: auto; height: 80px;  background:#666;
-moz-box-shadow: 0 1px 0  inset;}
.title{color:#fcfcfc;text-shadow: 0 0.06em 0 #fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvzjlXxgpAYfTDZysQwm8Q70VnYEfg9hAJrScKa2WCPzEx-_5f4u0-Fk6_JnWXIZiYjstSyOW1rgmVMcpXRoulY98w7qyfps_yscJYlqITAvdDUzjtW59x4Mv0jjGE6kybd88AwtygtBQ/s1600/photo.gif) left center no-repeat;padding:1px 5px 1px 15px}
.resaut{color:#fff;text-shadow: 0 0.06em 0 #f0f0f0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3S-xuRTsmJI8unhoCC7HG6nd_elbG6zOhV30FkFmwgwV-8ZOJ-QinpvriE_VNGhTCdWty4hwyokRrSy6uHZxemNfc9fMVLS2YHDmOPa5IxN3b7wU_7Yb2tXqDZZBkBOf5DOf8onWR38/s1600/bookmark.gif) left center no-repeat;padding:1px 2px 1px 15px}
.perfillbt img{border-radius:8px;width:77px;height:77px;margin:0 10px 0 0;float:left;padding:2px;background:#555;-moz-box-shadow:1px 1px 4px #000;-webkit-box-shadow:1px 1px 4px #000;box-shadow:1px 1px 4px #000;}
.perfillbt img:hover{ border-radius: 50%;}
.social{float: left;width: 200px;overflow: hidden;position: relative;margin-left: 80px;top:10px;height: 35px;padding: 4px 5px;background: #666;border-radius: 2px;border: 1px solid #000;}
.social span{float:left;padding:6px 0}
.addthis_toolbox{height:20px;width:200px;float:left;overflow:hidden;margin:8px 0}
</style>
<div class='perfillbt'>
<img src='http://i.imgur.com/tL21RaB.png'/>
<span class='title'>Autôr:</span><br/><br/><br/>
<span class='resaut'>Espaço de partilha,troca ideias...</span><br/><br/>
<div class='social'>
<div class='addthis_toolbox addthis_default_style'>
    <a class='addthis_button_preferred_1'/>
    <a class='addthis_button_preferred_2'/>
    <a class='addthis_button_preferred_3'/>
    <a class='addthis_button_preferred_4'/>
    <a class='addthis_button_preferred_5'/>
    <a class='addthis_button_preferred_6'/>
    <a class='addthis_button_preferred_7'/>
    <a class='addthis_button_preferred_8'/>
    <a class='addthis_button_preferred_9'/>
    <a class='addthis_button_compact'/>
</div>
<script src='http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-577d901c564e1c6f' type='text/javascript'/>
</div>
</div>
</b:if>

Pronto feito isto aqui deixo como alterar a box autôr/redes sociais:

(1) http://i.imgur.com/tL21RaB.png /troque pela sua imagem.
(2) Autôr: / escreva quiser.
(3) Espaço de partilha,troca ideias... / escreva quiser.
(4) Entre neste link: AddThis   e faça sua conta,depois pegue id e troque por este(577d901c564e1c6f)
Pronto feito isto já tem tudo certinho no seu blog,até um próximo tutorial/partilha.

Leia +

Autor box c/ addthis

► 0

► box dicas r sociais vários

► Cartita

Box social p/ área d/ posts

Boas noites ,como tenho um tempinho vim aproveitar e trazer uma partilha .
Trago uma box de icones sociais de partilha de posts ,e fica abaixo titulo dos posts ...
O resultado final é como a imagem acima ...
Confuso então visualize online:  ENTRE AQUI...
Agora que viu vamos começar entre em modelo e depois click editar html...
Procure este código;

Agora click setinha preta e encontre isto:

Encontro então abaixo como na imagem coloque meu código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <style>
.coolboxx-bt{background:#f4f6ff;
padding:2px 8px;
border-bottom:2px solid #ddd;float:center; padding-top:10px;
text-transform: none;
   }
  </style>
<div class='coolboxx-bt'>
<a href='aqui/feeds/posts/default/'>
<img src='http://i.imgur.com/g03VyNW.png'/>
   
     </a>
<a href='https://twitter.com/aqui' title=''>
<img src='http://i.imgur.com/NbZdk4D.png'/>
   
     </a>
<a href='https://www.facebook.com/aqui' title=''>
<img src='http://i.imgur.com/oOIO8Uz.png'/>
   
     </a>
<a href='https://tumblr.com/aqui' title=''>
<img src='http://i.imgur.com/YR487i6.png'/>
   
     </a>
<a href='https://linkedin.com/aqui' title=''>
<img src='http://i.imgur.com/vN8AdsI.png'/>
   
     </a>
<a href='https://youtube.com/aqui' title=''>
<img src='http://i.imgur.com/cfsIkrx.png'/>
   
     </a>
<a href='https://myspace.com/aqui' title=''>
<img src='http://i.imgur.com/3ycTBQd.png'/>
   
     </a>
<a href='https://delicious.com/aqui' title=''>
<img src='http://i.imgur.com/MkHgc47.png'/>
   
     </a>
<a href='https://digg.com/aqui' title=''>
<img src='http://i.imgur.com/fLrTzAL.png'/>
   
     </a>
<a href='https://google.com/aqui' title=''>
<img src='http://i.imgur.com/LbPdI1g.png'/>
   
     </a>
<a href='https://technorati.com/aqui' title=''>
<img src='http://i.imgur.com/LSdrA0D.png'/>
   
     </a>
</div>
</b:if>

NOTA;

Troque onde diz aqui para nome de sua rede social
Exemplo:  https://google.com/best-tuga
É só fazer em todos trocando pelo nome sua rede social ,até mais...

Leia +

Box social p/ área d/ posts

► 0

► box r sociais

► Cartita