Dicas para Blog

Anônimo

Como colocar ícone ao lado de cada marcador

Como sabem e já viram muitos Blogs que utilizam imagens ao lado de cada marcador, isso se torna mais fácil para os visitantes visualiza o conteúdo do Blog destacado nos Marcadores, e também serve como uma maneira de organização, pois os marcadores estarão destacados com pequenos ícones...

 




Então pessoal isso é uma maneira simples de colocar, vou explicar passo a passo
 1° você vai em Design > em Editar HTML > depois marque a opçãoExpandir Modelos de Windget 

Veja o exemplo abaixo:

2° Depois de ter marcado a opção Expandir Modelos de Windgets você vai usar a tecla de atalho:  Ctrl + F para encontrar o seguinte sequencia de códigos:


<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

3° Agora acrescente este segundo código, logo abaixo do exemplo destacado em Vermelho:

<img src='URL DO MINE GIF' style='border:0px;'/>  

Vai ficar assim:

<b:loop values='data:labels' var='label'>
<li>
<img src='URL DO MINE GIF' style='border:0px;'/>   
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>


4° Coloque agora, a URL do ícone na parte destacado em Verde: 'URL DO MINE GIF'

Depois visualize e veja como ficou:
ícone antes do marcador

Pequenos ícones animados

                                                      

Ícone depois do marcador:
Se você quiser colocar o ícone depois do marcado, faça a seguinte alteração mostrada no Exemplo a Baixo:

Exemplo:
Coloque o segundo código antes do tag destacado em Azul: </li>


Vai ficar assim:


<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
<img src='URL DO MINE GIF' style='border:0px;'/>  
</li>
</b:loop>


Pronto, depois de ter colocado a URL do ícone, clique em Visualizar o Blog, antes de salvar modelo
0 comentários
,

0 comentários:

Postar um comentário

Assinar: Postar comentários