Trocar palavra dos marcadores por avatar

DEMO

É 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnuc0CGr5dj-kL53agINHo-KVGjDHKDr1plTYMKIfdLGQmt-zeDEh50BPO1FY8VgbCGtuttCVThyfPB-JLwAuEiagsTPWI0Gc6Ru-qn6OIMJXFcrOTZRXmiw_ELX72WzJl-wDF_ABh8x4H/s1600/imagem.png' title='Imagem'/>&quot;
imagenes[2] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTt2BTNSlzxgYQi3IFwnXv4fxlvJnR0YeHDcn3ECAWcbHEhqDt5pE0xWH-m03vJU0qlaIvgiXsItj5VkK4-uoRyhgpqbJrNr1-vR_povj31Py2t2T6wLuBncRg4utoYV8I6vnd6gNoOiK/s1600/video.png' title='Video'/>&quot;
imagenes[3] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNaRNf3WjvGIxb7YdtYe3dSiXwenugkUs4rjx4BRe1BFwaYN0OQH3M47WU3tkwlWln8GPBSZ3QPAXt4BxmLzhc6SEYpRTSd4AKgYE2I7oHp1-YW-hXl-aWGku3jjfKNAJrcFLljgfv7Cb4/s1600/aviso.png' title='Música'/>&quot;
imagenes[4] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEililWnuvNSUOzG0SVCpEo5-kTIIzan9Iz3kazCe9F775LWQX0jUk97iq1KUJosTuU_EWQF2ELT9WKZYkXcqDzopSt46Za9Udmq2fPDxuL3QhqODXjcONoo9V0WEQHrfnZVPiIwTOZ5LsUq/s1600/comentarios.png' title='Opinião'/>&quot;
imagenes[5] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4biYDCW01rKtOodbIZMfVXr8DSimh6YE263pUiqN7Bwkphqid7hOMo_pQ4GwBvsVcDS-YTuv2aQstSyYXcjIQLbeRETg6y7SE1fiyfx2zk7izyO_rdJWbFd2q-u753is6TlGx56KFotrK/s1600/texto.png' title='Texto'/>&quot;
imagenes[6] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ79jHWHfsvRAm8TCRCUB1SGLrAKehqgNObp6bdyHth3ED4JoLNWs2wsZwv_hMDK6ImV8zDrh9dtUOaCcKPJmFSxyvvkyGaOafbQYVcy8oVmxfkrr5vdPe_WXuKimeomWRon6odmvkwMXO/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>