25 de abr. de 2012

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='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> 

3 comentários:

  1. Adorei, só tinha visto esse scrip em blogs do Wordpress, mas pesquisando pela net encontrei apenas um único tutorial sobre esse tipo de marcador e é um pouco complicado e esse seu tutorial está muito simples de entender, parabéns!

    ResponderExcluir
  2. Cara n tem como copiar o código destrava ae manow

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube