Trocar palavra dos marcadores por avatar



É possível trocar as palavras dos marcadores por imagens. Fica bem bacana mas tem um porém: só aceita um marcador por postagem. É necessário também que você faça vários ícones no paint ou encontre pela net imagens compatíveis com seus marcadores.




Vá até o Modelo de seu blog, clique em Editar modelo
  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011










Agora procure por: ]]></b:skin>  




Acima dele, cole o código abaixo:



/*Icone marcadores---------------------------------------------------*/
.icone-marcadores{
position:absolute; left:-70px; top:5px; display:block; }
.icone-marcadores img{
width:50px;
height:50px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-box-shadow: 0px 10px 10px -7px #888;
-webkit-box-shadow:0px 10px 10px -7px #888;
}




Procure agora por:

</head>

E acima dele cole:



<script type='text/javascript'> function lebel_logo(etiqueta)
{
imagenes = new Array();
imagenes[1] = &quot;<img src='http://4.bp.blogspot.com/-ku5FFZpKNn0/T49fBjpDkXI/AAAAAAAAHxI/6uU3o4akBFQ/s1600/imagem.png' title='Imagem'/>&quot;
imagenes[2] = &quot;<img src='http://1.bp.blogspot.com/-tAH5HC8N82s/T49iIXNZprI/AAAAAAAAHxY/CYpNr-rwtPQ/s1600/video.png' title='Video'/>&quot;
imagenes[3] = &quot;<img src='http://2.bp.blogspot.com/-yO8QJtnxkrQ/T49fASC9FeI/AAAAAAAAHww/_Egj3zeJmQM/s1600/aviso.png' title='Música'/>&quot;
imagenes[4] = &quot;<img src='http://1.bp.blogspot.com/-4x9dErrnIQw/T49fA0Hy11I/AAAAAAAAHw4/hPjorWSinOA/s1600/comentarios.png' title='Opinião'/>&quot;
imagenes[5] = &quot;<img src='http://3.bp.blogspot.com/-htGAgwc70GE/T49fB6NyOgI/AAAAAAAAHxQ/HbUb7RZohPc/s1600/texto.png' title='Texto'/>&quot;
imagenes[6] = &quot;<img src='http://3.bp.blogspot.com/-n9TYb4AZZGA/T49fBT0mpiI/AAAAAAAAHxA/1cJDH5spKxM/s1600/hacks.png' title='Dicas'/>&quot;
if (etiqueta == &quot;Imagem&quot;) {document.write(imagenes[1]);}
if (etiqueta == &quot;Video&quot;) {document.write(imagenes[2]);}
if (etiqueta == &quot;Música&quot;) {document.write(imagenes[3]);}
if (etiqueta == &quot;Opinião&quot;) {document.write(imagenes[4]);}
if (etiqueta == &quot;Texto&quot;)  {document.write(imagenes[5]);}
if (etiqueta == &quot;Dicas&quot;)  {document.write(imagenes[6]);}
}
</script>



Leitor, perceba que coloquei vários códigos com cores diferentes, os códigos em cores iguais representam o mesmo marcador. O que isso quer dizer ?

Quer dizer que, as chamadas tem que ter o MESMO nome, escrito de maneira igual, com todos os acentos, letra maiúscula no mesmo local.


Os códigos escritos com letra minúscula representam o código da imagem.


Clique em "Expandir modelos de widgets"




Procure por :

 <div class='post-header'>


Cole então o próximo código acima dele.


<b:loop values='data:post.labels' var='label'> <a class='icone-marcadores' expr:href='data:label.url' rel='tag'> <script type='text/javascript'>lebel_logo(&quot;<data:label.name/>&quot;);</script> </a> </b:loop> 

Nenhum comentário:

Postar um comentário