29/04/2013

Tutorial: Menu para marcadores em colunas

||
♥ Postagem Programada♥ 

Aê bunnys? Tudo joia? Venho trazer um tutorial que achei no Cherry Bomb , achei ele super organizado e otimo para quem tem muitos marcadores principais como meu caso bububu... Ádalia o utilizou no seu template anterior e teve uma grande repercussão nos comentários, ou seja, muita gente querendo aprender. E então decidi reblogar para vocês, vamos dar uma olhadinha?



O menu é assim!!!

Cherry Bomb

Vá ate seu  HTML procure por  ]]></b:skin>  e acima 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***/


Feito isso salve indo ate seu layout. Abra um Gadget HTML/JavaScript cole:

<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>

Se deseja usar o menu em três colunas como na imagem, use então este código no gadget:

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

Você pode optar em adicionar mais colunas mas para isso sua sidebar tera que ser maior, ou ficara desorganizado. Caso queira apenas em duas colunas remova da parte vermelha ate a endicada em azul. E depois a onde esta 30% coloque 50% em ambos que restarem.

<div style="float: left; width: 30%">
Restante do código...
</div>
<div style="clear: both"></div>


Bom é só espero que gostem, ate a proxima e bye bye...

19 comentários:

  1. Wendy, pode mudar o link do meu blog nos afiliados? Eu perdi o dominio...
    Soqnunca

    ResponderExcluir
  2. Aqui é a Roh Chan, me desculpe mas tentei achar o seu blog pelo o seu perfil e não achei, manda o link que eu mesmo mudo para você ;)

    ResponderExcluir
  3. Sempre quis aprender esse menu ! Awn agora eu sei !! *u* ~ Obrigada , você sempre ajuda u-----ú

    Vaga para Afilidos ~ Corre !

    ResponderExcluir
  4. Opa, marquei você nessa publicação do blog I Hate Comic Sans ♣
    Espero que goste das minhas perguntas. ;)
    http://z0boomafoo.blogspot.com.br/2013/04/opa-fomos-selados-novamente.html

    Xx.

    ResponderExcluir
    Respostas
    1. Ahhhh obrigada irei responder sim

      Excluir
  5. Amei, fica muito lindo!
    Bjs
    all-2you.blogspot.com

    ResponderExcluir
  6. Já utilizei esse menu no meu layout hehe é muito lindo ♥
    Volta logo, Wendy ^^

    ResponderExcluir
  7. Yoo, é a Misa Misa... adoraria colocar no meu blogger, mas infelizmente eu não encontro as coisas no meu HTML :( Acho que é porque o modelo é diferente, Cherry Bomb vive fazendo pro modelo Travel, e o meu não é esse :/
    Esse e Cherry Bomb são dois blogs que curto muito!

    ResponderExcluir
    Respostas
    1. Prazer Misa e que boa parte das pessoas fazem para o modelo Travel mas creio eu que esse de sim porque só mexe no ]]> Mas também da pra usar no modelo Minina.

      Hihi serio? Que bom fico grata em saber disso.

      Excluir
  8. Vou usar, amei >3<

    hoy-beardesigner.blogspot.com

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram