TUTORIAL AVATAR

Questionaram-me sobre como adicionar um avatar (uma imagem) ao lado dos títulos de posts, assim como em André Felipe.net. Neste guia, mostro como é simples.
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.
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>

TUTORIAL DO XAT

Então vamos lá

Primeiramente abra o painel do blogger, clique em Design, Editar HTML

agora aperte CTRL+F e procure pela linha

]]></b:skin>

Após encontrar a linha, cole o seguinte código imediatamente acima dela:

#gb {

position:fixed;

top:150px;

z-index:+1000;

left:-610px;

}

* html #gb {

position:relative;

}

.gbtab {

height:161px;

width:47px;

float:right;

cursor:pointer;

background:url(‘http://i.imgur.com/HWwgK.png’) no-repeat;

margin-top:20px;

}

.gbcontent {

float:left;

border:2px solid #8c00c1;

background:#fff;

opacity:0.80;

-moz-opacity: 0.80;

filter: alpha(opacity=80);

-webkit-border-radius: 20px;

border-radius: 20px;

-khtml-border-radius: 20px;

padding:8px;

}

Agora procure por:

</body>

Cole o seguinte código imediatamente acima:

<script type=’text/javascript’> function showHideGB(){ var gb = document.getElementById(&quot;gb&quot;); var w = gb.offsetWidth; gb.opened ? moveGB(0, 47-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById(&quot;gb&quot;); var dx = Math.abs(x0-xf) &gt; 10 ? 5 : 1; var dir = xf&gt;x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.left = x.toString() + &quot;px&quot;; if(x0!=xf){setTimeout(&quot;moveGB(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);} } </script> <div id=’gb’> <div class=’gbtab’ onclick=’showHideGB()’> </div> <div class=’gbcontent’> <div style=’line-height:0;background-position:center;width:590px;height:310px;’> <embed align=’middle’ allowscriptaccess=’sameDomain’ flashvars=’id=167565598′ height=’310′ name=’chat’ pluginspage=’http://xat.com/update_flash.shtml’ quality=’high’ src=’http://www.xatech.com/web_gear/chat/chat.swf’ type=’application/x-shockwave-flash’ width=’590′ wmode=’transparent’/> </div> </div> </div>