• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

30 de dezembro de 2013

Menu para Marcadores*

Fiquei feliz pelos comentários na antiga postagem minha, mas fiquei ao mesmo tempo triste por ter a leve impressão que vocês não leram o post, espero que seja só impressão mesmo. ^^  Estou preparando algumas postagens para ser postado aqui programado. Eu irei viajar e vocês?

Para o post de hoje trouxe um tutorial de menu para marcadores ou se preferir tags.
Créditos (www)

Resultado:


Procure por:
]]></b:skin> 
 Acima do código achado cole:
/***Menu para marcadores***/
.tag {
font-family: verdana; /*Fonte do menu*/
font-size: 10px; /*Tamanho da fonte*/
height: 16px;
background: url('URL_DA_IMAGEM') no-repeat left; /*Imagem que fica ao lado do link (16x16 px)*/
display: block;
margin-bottom: 5px; /*Espaço inferior entre cada link*/
padding-left: 18px; /*Não mude*/
transition:All 0.5s ease; -webkit-transition:All 0.5s ease; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease;}
.tag a {color: #fe97cd !important; /*Cor dos links*/}
.tag a:hover { color: #bb588b !important; /*Cor dos links quando passa o mouse em cima*/
font-weight: bold; /*Deixa os links em negrito quando passa o mouse, apague se não quiser este efeito*/
transition:All 0.5s ease; -webkit-transition:All 0.5s ease; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease;}
/***Por cherry-liah.blogspot.com - não retire os créditos***/

Mude apenas o que está de rosa.

Adicione um gadget html/js e cole:
 <div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
Repita o código para casa tag/marcador que quiser

Caso queira que fique dividida em três colunas é só você substituir o código acima por esse:
<div style="float: left; width: 30%">
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
</div>
<div style="float: left; width: 30%">
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
</div>
<div style="float: left; width: 30%">
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
</div>
<div style="clear: both"></div> 

E aí, gostou do tutorial? Visite questão de opinião e leia outros posts meus. Beijo <3

9 comentários:

  1. Lindo,vou tentar colocar no meu.
    Obrigada por partilhar,bjs

    ResponderExcluir
  2. Adorei esse tutorial,bem util.
    O menu fica bem legal,obrigada!
    http://mundopequenoo.blogspot.com.br

    ResponderExcluir
  3. Vou colocar no proximo layout!
    cate-land.blogspot.com ♥

    ResponderExcluir
  4. Ah, eu odeio esse marcador. Sempre que eu tentava colocar não funcionava, isso que é guardar rancor. Mas enfim, ótimo tuto.

    Visite o blog :3 | Etc For Me :3

    ResponderExcluir
  5. Hey, acabei de criar um blog de HTML. Se chama HTML para Leigos, poderia visitar? Se gostar seguir e comentar? (ok, parei de pedir tanto =^.^=)
    Espero mesmo ('-') a sua visita lá: http://html-para-leigos.blogspot.com.br/
    Obrigada desde já! e que o ]]>< te abençoe!

    interesses-sutis.blogspot.com

    ResponderExcluir
  6. Adorei o tutorial, nunca usei no meu blog, mas o tutorial foi super explicadinho, parabéns. Não, infelizmente eu vou ficar em casa ):

    Unskilled

    ResponderExcluir
  7. Oi Lavy, adorei o tutu! Posso te dar uma dica? é-e
    Então esses tutoriais do Cherry Bomb já são muito famosos acho que todos já viram (Não custa rever não é?) mas então acho que de tanto que já vi no CB penso que outros tambem podem ter visto,afinal era o Cherry Bomb né? kkk <3
    Bom de qualquer forma você faz tutoriais divinos! Um Beijo para você e toda a equipe A.N

    ResponderExcluir
  8. Adorei o menu , só não uso porque acho que não combina com meu blog , mas é lindo ! Bjs .

    http://meninademai.blogspot.com.br/

    ResponderExcluir
  9. Adoreii! Super fofo! Ainda tem vaga para afiliados? Se sim, gostaria de fazer uma parceria: meu blog: http://sweettoxin.blogspot.com.br/

    ResponderExcluir