Faça sempre backup do seu template antes de modificá-lo , ou tenha um blog de testes, caso algo dê algo errado.ex:
Existem bons sites que oferecem ícones gratuitos:
Voce também pode fazê-los em um editor de Imagens: Photoshop, PhotoScape, Photofiltre, etc.
Agora é só hospedar as Imagens, voce pode hospedar no próprio blogger:
Abra o rascunho da postagem, carregue com os ícones e com o botão direito do mouse salve em: Copiar endereço do link. Esse é o endereço da imagem.
Agora vamos colocar os códigos
1 - Vá em Modelo => HTML => Crtl F => </head> Acima desta tag coloque o script abaixo.
1 - Vá em Modelo => HTML => Crtl F => </head> Acima desta tag coloque o script abaixo.
<script type='text/javascript'>function lebel_logo(etiqueta) {imagenes = new Array();imagenes[1] = "<img src='AQUI O ENDEREÇO HTTP DE SEU ÍCONE 1' title='NOME DA CATEGORIA'/>"imagenes[2] = "<img src='AQUI O ENDEREÇO HTTP DE SEU ÍCONE 2' title='NOME DA CATEGORIA'/>"imagenes[3] = "<img src='AQUI O ENDEREÇO HTTP DE SEU ÍCONE 3' title='NOME DA CATEGORIA'/>"imagenes[4] = "<img src='AQUI O ENDEREÇO HTTP DE SEU ÍCONE 4' title='NOME DA CATEGORIA'/>"imagenes[5] = "<img src='AQUI O ENDEREÇO HTTP DE SEU ÍCONE 5' title='NOME DA CATEGORIA'/>"imagenes[6] = "<img src='AQUI O ENDEREÇO HTTP DE SEU ÍCONE 6' title='NOME DA CATEGORIA'/>"imagenes[7] = "<img src='AQUI O ENDEREÇO HTTP DE SEU ÍCONE 7' title='NOME DA CATEGORIA'/>"imagenes[8] = "<img src='AQUI O ENDEREÇO HTTP DE SEU ÍCONE 8' title='NOME DA CATEGORIA'/>"
if (etiqueta == "NOME DA CATEGORIA 1"){document.write(imagenes[1]);}if (etiqueta == "NOME DA CATEGORIA 2"){document.write(imagenes[2]);}if (etiqueta == "NOME DA CATEGORIA 3"){document.write(imagenes[3]);}if (etiqueta == "NOME DA CATEGORIA 4"){document.write(imagenes[4]);}if (etiqueta == "NOME DA CATEGORIA 5"){document.write(imagenes[5]);}if (etiqueta == "NOME DA CATEGORIA 6"){document.write(imagenes[6]);}if (etiqueta == "NOME DA CATEGORIA 7"){document.write(imagenes[7]);}if (etiqueta == "NOME DA CATEGORIA 8"){document.write(imagenes[8]);}}</script>
Em Vermelho - Endereço do seu ícone
Em Azul - Nome da categoria (marcador)
Em Verde - Repetir o nome da categoria
2 - Vá em Modelo => HTML => ]]></b:skin>
/*----------Categorias em formato ícone by Elaine Gaspareto----------*/.icone-marcadores{position:absolute; /* NÃO ALTERE */left: 50%; /* DEFINE O POSICIONAMENTO À ESQUERDA, QUANTO MAIOR O NÚMERO MAIS PARA A DIREITA O ÍCONE VEM */top:-6px; /* DEFINE O POSICIONAMENTO DO TOPO, AUMENTE PARA SUBIR, DIMINUA PARA DESCER */display:block; /* NÃO ALTERE */}.icone-marcadores img{width:60px; /* DEFINE A LARGURA DA IMAGEM, COLOQUE COMO VOCÊ DEFINIU AO CRIAR*/height:60px; /* DEFINE A ALTURA DA IMAGEM, COLOQUE COMO VOCÊ DEFINIU AO CRIAR */}
3 - Vá em Modelo => HTML => Crtl F=> <div class='post-header">
<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>
Salve , se tudo estiver certo, já estará aparecendo os ícones no seu blog.
Créditos: Elaine Gaspareto
Nenhum comentário:
Postar um comentário