quarta-feira, 23 de fevereiro de 2011

Adicionando Avatar Pessoal ao lado do Título do Post

Bom, Criei esse artigo no meu Site Oficial e hoje venho traze-lo para os Leitores do Códigos Blogger. Ele é Muito Útil para Blogs que contém multiplos autores e se cansou do comum e simples nome abaixo do título da Postagem. Então vamos lá....
  • Edite a imagem que deseja utilizar. Deixe-a nas proporções adequadas e a hospede, por exemplo, no ImageShack;
  • Abra o painel do Blogger e clique em Layout — HTML;
  • Marque a opção Expandir modelos de widgets;
  • Procure a linha <b:if cond='data:post.title'>;
  • Acima dela, digite, após substituir as partes em negrito pelos valores correspondentes a sua figura:<img src="endereço da imagem" width="largura" height="altura" alt="Avatar" style="float:left;margin:0 5px 5px 0" />
Salve o código e abra qualquer texto seu. Verá sua representação gráfica em todo o esplendor.8-D

Imagens diferentes para cada autor

Se você tiver um blog com mais autores, poderá adicionar um avatar diferente para um. Assim, os leitores identificarão rapidamente quem escreveu cada post.;) Basta adicionar um código extra por volta da imagem, como neste exemplo, que mostra uma figura específica para as publicações de João":
<b:if cond='data:post.author == "João"'><img src='http://www.example.net/joao.gif' height='50' width='60' alt='Avatar'/></b:if>

Marcadores: , ,

apague a luz no blogger

[]
 NOVO TUTORIAL COM UM CODICO NOVO 2 (CLIQUE AQUI)

codico para videos
para bota va em Design >Elementos da página >adicionar um gadget > HTML/JavaScript e cole o codico a baixo
                   




<div style="background-color: white; color: black; font-family: &quot;Trebuchet MS&quot;,sans-serif;">


<style type="text/css">


<!--


#lightbox{background-color:#eee;padding: 10px;border: 2px solid #000000;}


#lightboxCaption{font-size: 0.8em;padding-top: 0.4em;}


#lightbox img{ border: none; }


#overlay img{ border: none; }


#overlay{background-image: url(http://lh6.ggpht.com/_Ls_VsVzJsxs/TM30dz8RQDI/AAAAAAAAAqI/lgHyuNUYxXE/dark-bg.png);}


* html #overlay{


background-color: #333;background-color: transparent;background-image: url(http://img43.imageshack.us/img43/3623/fundomg.gif);filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://lh6.ggpht.com/_Ls_VsVzJsxs/TM30dz8RQDI/AAAAAAAAAqI/lgHyuNUYxXE/dark-bg.png", sizingMethod="scale");}


-->


</style></div>


<div style="background-color: white; color: black; font-family: &quot;Trebuchet MS&quot;,sans-serif;">


<script src="http://acessoriosparablogs.com.br/scripts/lightbox.js" type="text/javascript">


</script></div>


<div style="background-color: white; color: black; font-family: &quot;Trebuchet MS&quot;,sans-serif;">


<a href="http://www.imgfans.com.br/NR/Fev11/23/overlayo.png" rel="lightbox" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" title="apague a luz"><img alt="http://support.sony-europe.com/tutorials/dime/DSC_troubleshooting/Pictures/vibration.png" src="http://support.sony-europe.com/tutorials/dime/DSC_troubleshooting/Pictures/vibration.png" /></a><b><a href="#" rel="lightbox" title="apague a luz">apague a luz</a></b></div>

Marcadores: , ,