É 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>
/*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] = "<img src='http://4.bp.blogspot.com/-ku5FFZpKNn0/T49fBjpDkXI/AAAAAAAAHxI/6uU3o4akBFQ/s1600/imagem.png' title='Imagem'/>"
imagenes[2] = "<img src='http://1.bp.blogspot.com/-tAH5HC8N82s/T49iIXNZprI/AAAAAAAAHxY/CYpNr-rwtPQ/s1600/video.png' title='Video'/>"
imagenes[3] = "<img src='http://2.bp.blogspot.com/-yO8QJtnxkrQ/T49fASC9FeI/AAAAAAAAHww/_Egj3zeJmQM/s1600/aviso.png' title='Música'/>"
imagenes[4] = "<img src='http://1.bp.blogspot.com/-4x9dErrnIQw/T49fA0Hy11I/AAAAAAAAHw4/hPjorWSinOA/s1600/comentarios.png' title='Opinião'/>"
imagenes[5] = "<img src='http://3.bp.blogspot.com/-htGAgwc70GE/T49fB6NyOgI/AAAAAAAAHxQ/HbUb7RZohPc/s1600/texto.png' title='Texto'/>"
imagenes[6] = "<img src='http://3.bp.blogspot.com/-n9TYb4AZZGA/T49fBT0mpiI/AAAAAAAAHxA/1cJDH5spKxM/s1600/hacks.png' title='Dicas'/>"
if (etiqueta == "Imagem") {document.write(imagenes[1]);}
if (etiqueta == "Video") {document.write(imagenes[2]);}
if (etiqueta == "Música") {document.write(imagenes[3]);}
if (etiqueta == "Opinião") {document.write(imagenes[4]);}
if (etiqueta == "Texto") {document.write(imagenes[5]);}
if (etiqueta == "Dicas") {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("<data:label.name/>");</script> </a> </b:loop>
Nenhum comentário:
Postar um comentário