Novo




Continuando nas postagens este pack tem mesmos Logos ... Não está completo como pack cinza mas tem varias cores nos Logos,red,green.gold,blue...vermelho,verde.amarelo,azul. Abaixo fica os links de download,no qual é rápido e simples.





Bom este foi ultimo post de hoje ,não sei quando trago mais alguma postagem...B-T...



Best-tuga




Aqui trago mais um post com 21 Logos . São varios tipos de logos todos côr cinza n são todos mesmo tamanho,mas formato está em png ,fundo transparente. Para baixar deixo 2 links abaixo ,rápido e simples...





Simples assim com uma partilha mais,alguma coisa comente...B-T...



21 logos cinza

0
► Cartita
Best-tuga








Boas depois de algum tempo sumido estou retornando com uma partilha de 3 logos . Pode visualizár acima de como são e pode fazer download no link que abaixo deixarei,rápido e prático... Formato dos logos estão em png ,sem fundo ou fundo transparente,como é logo as medidas n são muito grandes...




E aqui fica mais um post,partilha alguma coisa deixe recado,até mais...B-T...


3 Logos the dragon

1
► Cartita
Best-tuga



De novo aqui com mais uma partilha para google+. E como acima mostra a imagem este é resultado do banner. Banner em png fireworks com nick,nome editavel. Abaixo fica as opções para download rápido e simples...




Alguma coisa deixe mensagem até mais...


Banner p/ google+ fire

0
► Cartita
Best-tuga



Fim de semana uhu... Bem venho trazer uma partilha de banner para google+ fundo preto bem simples ,como a imagem acima mostra. Este banner tem o nick,nome editavel assim poderá colocar ao seu gosto ou retirar conforme s preferençia. Banner em png fireworks... Abaixo fica as opções para download rápido e simples assim.



Foi esta a partilha,alguma coisa deixe recado...


Banner p/ google+ black

0
► Cartita
Best-tuga



Voltei com mais uma capa para facebook ,capa vintage toda editavel. Bem é so usar fireworks e ai pode mudar editar tudo a seu gosto fundos glows nomes ,fontes etc . Como a imagem açima mostra é resultado finál ,uma capa bem vistosa tamanho de fundo e tamanho de barrinha para nome que apareçe nosso façe. Então sem mais demoras abaixo fica botão de download , simples e rápido...



Espero ajudar com minha partilha alguma coisa deixe recado...


Best-tuga



Bom e feliz fim de semana,venho trazer uma capa para facebook retro com o nick editável. Formato em png fireworks então use o programa e pode trocár nick,nome tamanho da fonte côr letra,etc. Como mostra a imagem açima assim é resultado só tem editár nome trust ao seu gosto sua vontade. Abaixo deixo botão para download ,simples e rápido ...



Espero que seja útil,alguma coisa deixe recado...


Best-tuga



Oié aqui com uma 2 alternativa de fundo terminadinho de fazêr . Como pode visualizár a imagem açima esse e resultado pode baixar simples,rápido e prático. Abaixo fica botão de download .



Alguma questão deixe recado ,serei breve a responder...


Fundo p/xat bt

0
► Cartita
Best-tuga



Boa gente aqui venho deixár uma partilha de fundo para xat.com. Como a imagem acima mostra esse e resultado pode baixar aqui no botão de download,fáçil,rápido e prático.



Para alguma dúvida deixe recado ,responderei breve...


Fundo bt p/ xat.com

0
► Cartita
Best-tuga







  Voltei trazendo 4 capas para facebook diferentes como açima mostra nas imagens e video. Basta colocar nick ,nome e aplicár ao seu facebook , tinha um tempinho então fiz e estou postando de boa. Bem para baixár o pack eu vou colocár todas as capas em ficheiro zip ou rar,ai é só extrair. Abaixo fica botão para download simples,rápido e prático.



4 capas p/ facebook,alguma questão deixe recado...


4 capas p/ facebook

0
► Cartita
Best-tuga



Voltando e trazendo um outro modelo de capa para facebook,acabado de fazer. É isso ai como pode visualizar a imagem ou video acima ,capa (Love) uma capa para meninas... Abaixo fica botão de download simples,rápido e fáçil.



Alguma coisa fique vontade para perguntar...

Capa love p/ facebook

0
► Cartita
Best-tuga



Boa aqui estou trazendo um banner para facebook como acima pode visualizár imagem e video. Capa com as medidas certas , é colocar nick ,nome,que queira e pronto . Abaixo botão de download ,simples ,rápido e prático.



Para alguma dúvida deixe recado...

Capa p/ facebook

0
► Cartita
Best-tuga





Trazendo uma partilha mais,uma gif com nick (boss) e com imagem de anime. Alguns efeitos no nick e também na foto assim como a imagem e video acima mostram. Pode fazer download abaixo rápido,simples e prático...


Alguma dúvida,pergunta ou outro assunto deixe recado...

Gif nick boss

0
► Cartita
Best-tuga




Aqui de novo com uma partilha mais.eu falei iria trazer novas coisas então aqui estou. Como acima pode visualizár tanto na imagem como no video,trago banner de anime que fiz agorinha,abaixo pode fazer o download rápido,fáçil e simples.



É isso alguma coisa pergunta deixe recado até mais...

Banner anime

0
► Cartita
Best-tuga




Tarde ,vamo lá venho traze aqui uma gif do sonic ,algo tinha aqui e lembrei de partilhar. Mas vou começár a trazer mais umas partilhas de gifs,fundos,banners,logos daqui para a frente,penso irá ser util para algumas pessoas. Acima o video de como fica então pode baixar rápido ,simples e prático aqui em baixo...



Gif sonic

1
► Cartita
Best-tuga



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

Best-tuga


Boas tardes chegando do trabalho ,mas personalizei esta box, e acima está exemplo .
 É uma box de autor com redes sociais e com efeito shadow box na foto ,tambem botão para o perfil. Eu simplifiquei este gadget para usar só html um único código só para adicionar.

Nota: foi alterado,modificado,personalizado de novo...


ANTES DE TUDO FAÇA UMA CÓPIA DO SEU TEMPLATE...


Vamos lá entrar no painel do seu template e depois em modelo e click editar html.
Agora procure este código:




E abaixo de um desses trechos,linhas coloque o meu código:

/*box autor/   http://best-tuga.blogspot.pt/*/
<b:if cond='data:blog.pageType == "item"'>
<style>
.bt-boxinfo {
margin:0px;padding:8px;background-color: #666;
border:1px solid #fcfcfc;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;
overflow:hidden;width: 560px;font:normal 14px Lobster;text-transform:none;color:#000;
}
.bt-boximg {
float:left;margin: 0px 10px 0 0px;
}
.bt-boximg img {
-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px #ffffff;-moz-box-shadow: 0 0 3px #ffffff;box-shadow: 0 0 3px #ffffff;
}
.bt-boximg img:hover {
-webkit-box-shadow: 0 0 20px #000, inset 0 0 20px #000;-moz-box-shadow: 0 0 20px #000, inset 0 0 20px #000;box-shadow: 0 0 20px #000, inset 0 0 20px #000;}
.bt-boxinfo h3 {
  width: 580px;margin:0px;margin-left:-10px;text-shadow: 0px 1px 0px #000, 0px 2px 0px #fff, 0px 4px 0px #666;
  background-color: #fcfcfc;font:18px Lobster;border: 1px solid #afafaf;
    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:#666;margin-bottom: 3px;text-align: center;}
     .bt-boxinfo p{color:#fff;text-transform:normal;padding:0px;font:16px Lobster;line-height:20px;margin-bottom: 5px;padding-left: 5px;}
    .btn {
  border: 1px solid #666;color:#fff;background: #666; border-radius: 5px;margin-top: -25px;
   text-shadow: 0px 1px 0px #fff, 0px 2px 0px #000, 0px 4px 0px #000;
display: block;margin-left: 228px;padding: 5px 6px;text-transform: normal;
text-decoration:none;font:bold 12px Montez;width: 85px;text-align: center;letter-spacing:1px;
  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;}
.btn:hover {background: #fff; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
</style>
<div class='bt-boxinfo'>
<div class='bt-boximg'>
<img height='80px' src='http://i.imgur.com/ML5OYg6.jpg' width='120px'/>
</div>              
<p><a href=''></a> Leve a sério o que quer que faça. Mais tarde verá que tudo parece uma brincadeira, e então divirta-se com seu trabalho ...<br style='clear:both;'/></p>
<a href="https://plus.google.com/u/0/116651899597429747649/" class="btn">Perfil!</a>
<h3>Autôr</h3>
<div align="center">
<a class="social-icons" href="https://facebook.com/s nome aqui"><img src="http://i.imgur.com/bfYPaHB.png?1" /></a>
<a class="social-icons" href="https://twitter.com/s nome aqui"><img src="http://i.imgur.com/cDX8TEX.png?1" /></a>
<a class="social-icons" href="http://www.digg.com/seu nome aqui"><img src="http://i.imgur.com/XQDJnsf.png?1" /></a>
  </div>
</div> </b:if>


Bem feito isto pode ir até <head> bem inicio do seu template e adicione stylesheet.



Notas; troque a imagem , troque nome autor , troque a frase , e coloque nome redes sociais.
Estou modificando alguns códigos pois estão ultrapassados então modificarei mais alguns.

Best-tuga



Nota: esta box de autôr foi alterada ,modificada,actualizada...

Boas tardes chegando do trabalho ,mas personalizei esta box acima como está exemplo aqui imagem e vim postar ,partilhar aqui com vcs. É uma box de autor com redes sociais e com efeito no hover ,efeito esse de box shadow.
Não está visivel online mas é como na imagem acima..

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

Vamos em modelo no seu blog e depois editar html e procure 1 destes códigos:





Agora abaixo uma dessas linhas coloque este meu código...

/*autorbox/  http://best-tuga.blogspot.pt/*/
<b:if cond='data:blog.pageType == "item"'>
<style>
.bt-boxinfo {
  float: left;width: 560px;font:normal 14px Arial Black ;color:#000;padding: 10px;
border:1px solid #000;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;
 margin-bottom: 5px; margin-top: 5px;   background-color: #666;
box-shadow: 0px 0px 20px -5px #000;-moz-box-shadow: 0px 0px 20px -5px #000;-webkit-box-shadow: 0px 0px 20px -5px #000;-ms-box-shadow: 0px 0px 20px -5px #000;-o-box-shadow: 0px 0px 20px -5px #000;
}
.bt-boxinfo h3 {
  width: 250px ; height:40px;font:16px Lobster;text-transform:none;
  background-color: #fcfcfc;margin-left:90px;
  border: 1px solid #000;line-height: 2.5;
    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;
-webkit-border-top-right-radius:8px;-webkit-border-top-left-radius:8px;
  -moz-border-radius-topright:8px;-moz-border-radius-topleft:8px;
  border-top-right-radius:8px;border-top-left-radius:8px;  
   color:#000;text-shadow: 0 0.06em 0 #fff;margin-bottom: -53px;text-align: center;}
      .bt-boxinfo  p {font:16px Lobster;line-height: 1.5;margin-bottom: 5px;margin-left:2px;}
.bt-boximg {
        float: right;
        margin: 0px 0px 0 5px;
}
.bt-boximg img {
-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px #ffffff;-moz-box-shadow: 0 0 3px #ffffff;box-shadow: 0 0 3px #ffffff;
}
.bt-boximg img:hover {
-webkit-box-shadow: 0 0 20px #000, inset 0 0 20px #000;-moz-box-shadow: 0 0 20px #000, inset 0 0 20px #000;box-shadow: 0 0 20px #000, inset 0 0 20px #000;}
</style>
<div class='bt-boxinfo'>
<div class='bt-boximg'>
<img height='100px' src='http://i.imgur.com/ML5OYg6.jpg' width='120px'/>
</div>                
<p><a href=''></a> Leve a sério o que quer que faça. Mais tarde verá que tudo parece uma brincadeira, e então divirta-se com seu trabalho ...<br style='clear:both;'/></p>
<h3>ADM-BLOG:</h3>
<div align="right">                
<a class="social-icons" href="https://facebook.com/s nome aqui"><img src="http://i.imgur.com/bfYPaHB.png?1" /></a>
<a class="social-icons" href="https://twitter.com/s nome aqui"><img src="http://i.imgur.com/cDX8TEX.png?1" /></a>
<a class="social-icons" href="http://www.digg.com/seu nome aqui"><img src="http://i.imgur.com/XQDJnsf.png?1" /></a>
</div>  

Coloque stylesheet abaixo da header do seu blog bem inicio template...


Feito salve e veja como ficou.
Nota: procure por este código;  width: 560px; e coloque sua largura quiser.
Nota: onde diz seu nome aqui coloque seu respectivo a cada rede social.
Foi esta a partilha ,duvidas disponha até mais...

Best-tuga



Boa semana, venho com mais um tutorial,partilha. Acima pode visualizár a imagem e resultado final,labels/etiquetas/categorias, para usar na sidebar do blogger.

Caso apague as suas etiquetas ,antes faça 1 cópia do seu template...


Bom vamos lá entre em esquema no seu template adicione uma miniaplicação e adicione etiquetas...


Agora personalize desta forma como está exemplo/imagem abaixo...


Feito isso (guarde) e vamos em modelo aplicár css, procure este trecho...




Agora acima dele coloque este meu código...

/*Etiquetas*/
.sidebar .Label li {
font-family: Oswald;font-weight: 900;font-size: 12px;
line-height: 16px;border: 0 none;color: #666666;  
margin-bottom: 8px;padding: 0;text-decoration: none;}
.sidebar .Label li span {
background: #fcfcfc;border-radius: 0px 5px 5px 0px;color: #666;float: right;
padding: 5px;text-align: center;width: 10%;border: 1px solid #666;
}
.Label li a {
width: 82%;background-color: #666;border: 1px solid #666;border-radius: 5px 0px 0px 5px;
color: #fcfcfc;display: block;float: left;font-size: 12px;line-height: 16px;margin-bottom: 8px;
padding: 5px;text-decoration: none;font-family: Oswald;font-weight: 900;    
}
.Label li a:hover {color: #666;background:#f6f6f6;}


Feito isso visualize...

Nota: agora abaixo algumas coisas pode mudar,personalizar...


(1) font-family: Oswald; fonte da letra  font-size: 12px;  tamanho da letra
(2) background: #fcfcfc; cor fundo  color: #666; cor letra
(3) border: 1px solid #666; cor,espessura,e borda


Agora aqui deixo stylesheet...



Fui que fui...

Labels p/ sidebar

0
► Cartita
Best-tuga



Bom dia voltando com uma das minhas partilhas, mais uma box de feed com artigos relaçionados. Como na imagem acima mostra é este o resultado finál,mas pode visualizár online:ENTRE AQUI!!!
Uma partilha que será útil num blog por isso espero lhes sirva e seja do vosso agrado...

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


Vamos lá entre em seu modelo depois html e procure este trecho:


Agora acima coloque este meu código:

#btboxx {background:#fff url(http://i.imgur.com/iEKQJaF.png?2) no-repeat top left;width:596px!important; height:70px!important;margin-top:0px; padding:10px; border:1px solid #c6c6c6;overflow:hidden;margin-left:-17px;border-bottom: 6px solid #666;border-top: 6px solid #666;}
  #btsubs {float:left;border-right:1px solid #666;padding-right: 18px;margin-top: -12px;padding-top:9px;}
  .bt-h2 {font-size:20px; font-family:Montez; text-align:center;text-shadow:1px 1px 1px #ABABAB;font-weight:bold;margin-top: 4px;}
  .bt-email {background: url(http://i66.tinypic.com/10seq9u.png) no-repeat 7px 10px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; border:1px solid #ddd; font-family:Montez; font-size:18px; font-weight:bold;text-shadow:1px 1px 1px #ABABAB;; color:#666; width:140px; height:24px; margin-right:5px; margin-top:10px; padding:5px 15px 5px 38px;vertical-align:top; display:inline-block;}
.bt-email:hover {border:1px solid #bebebe; box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);}
.bt-button {background-color:#fcfcfc;height:36px;margin-top:10px; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #ddd;display:inline-block;width:80px;margin-right:-6px;color:#666;font-family:Montez;font-size:17px;font-weight:bold;padding:6px;text-decoration:none;text-shadow:1px 1px 0px #ABABAB;;}.bt-button:hover {border:1px solid #bebebe; box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);}.bt-button:active {position:relative;top:1px;}
ul#related-posts{font:bold 11px Oswald;list-style:none;text-transform:none;margin:0px 0;padding:0;}
#related .related-posts{width:50%;float:right;}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 10px;padding:2px 1px;}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #666;display:block;height:72px;position:relative;width:72px;color:#fcfcfc;text-decoration:none;text-shadow:0 1px 0 #666;border-radius:100px;}
ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px;border-radius:100px;}
ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7}
ul#related-posts li img{bottom:0;padding:0!important;border-radius:100px;}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px #fcfcfc}


Feito isso vamos colocar html, procure um deste trechos,pois consuante templates pode variár...







Encontrou então agora abaixo de desses códigos coloque este meu:

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='btboxx'>
<div id='btsubs'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='feedform' 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' target='popupwindow'>
<input class='bt-email' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Seu email aqui&quot;;}' onfocus='if (this.value == &quot;Seu email aqui&quot;) {this.value = &quot;&quot;;}' type='text' value='Seu email aqui'/>
<input name='uri' type='hidden' value='best-tuga'/><input name='loc' type='hidden' value='en_US'/>
<input class='bt-button' type='submit' value='Clica aqui!'/>
</form>
  <div class='bt-h2'><a href='http://feeds.feedburner.com/best-tuga'>&#10077;Assine meu feed&#10078;</a></div>
  </div>
<div class='related-posts'>
<script type='text/javascript'>
var defaultnoimage=&quot;http://i.imgur.com/mV8tS7J.png&quot;;
var maxresults=3;
</script>
<script src='http://yourjavascript.com/1198561349/relatedimg.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=3&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>              
</div></div></b:if>
                   

Notas agora troque estes trechos pelos seus...


(1)http://feedburner.google.com/fb/a/mailverify?uri=best-tuga&apos; (best-tuga)
(2)' value='best-tuga' (best-tuga)
(3)http://feeds.feedburner.com/best-tuga (best-tuga)
(4)http://i.imgur.com/mV8tS7J.png (sem imagem/troque 1 sua)

Pronto feito isso terminou,e eu estou indo,até uma próximaaaaaa...

Best-tuga

Etiquetas

Populares

 
 
Back to top

Estatísticas

  • Postagens
  • Comentários
  • Visualizações
🔗 Contato✔ Apoio 🔗
Reservado © 2016 ❝ Autôr