Hoje vim trazer um tutorial que encontrei lá no Cherry Bomb para os blogueiros e blogueiras organizarem melhor os assuntos abordados no seu blog.
Muitas vezes ao escrever os posts nós criamos vários marcadores sem nos dar conta e quando visualizamos nossa coluna lateral encontramos uma situação parecida com essa:
E se você não aguenta mais essa situação e quer organizar melhor os assuntos abordados no seu blog leia esse post até o fim!
Você pode fazer um menu assim:
Ou com três colunas, como o da foto abaixo:
Instalá-lo é muito simples. Para realizar esse modelo é necessário que você abra o modelo HTML do seu blog, aperte as teclas ctrl+F e cole ]]></b:skin> na caixa de pesquisa.
Código
/***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***/
.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***/
Edite como quiser e salve o modelo do seu blog. Agora vá na guia layout do blogger e adicione um gadget de HTML/Javascript onde quiser que o menu fique. Dentro do gadget cole o seguinte código:
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
Repita este código para cada tag que quiser no seu menu.
Se quiser o menu em três colunas como mostra o exemplo da segunda imagem, ao invés de usar o código acima no gadget de HTML/Javascript, use esse:
Código
<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>
Cada bloco de código corresponde a uma coluna. É só editar com atenção que fica tudo certinho.<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>
Abaixo tem algumas imagens para serem usadas neste menu!
uma das coisas para ter um bom blog é a organização né ?? pq ngm merece ir em um blog e não conseguir achar algo né
ResponderExcluirÉ verdade, fica bem mais fácil quando podemos identificar as coisas com facilidade!
Excluirbela diga vou usa-la quando reformar o meu blog
ResponderExcluirporqueestrelas.blogspot.com
Usa sim, aposto que ajudará bastante na organização do seu blog!
ExcluirMarcadores são ótimos pra organizar mesmo! Eu não usava, e agora percebo quanto é necessário
ResponderExcluirBeijo
cindereladeallstar1.blogspot.com.br
Pois é, são indispensáveis né? haha
ExcluirVou colocar no meu blog os marcadores acho que fica muito mais organizado !
ResponderExcluirbeijos
http://londresmeussonho.blogspot.com.br/
Fica sim, quando você colocar vai perceber a diferença! haha
ExcluirSinceramente esse post nos alerta a um erro que cometemos sem perceber , amei o post :D
ResponderExcluirPois é, nos vamos criando tantos marcadores que nem percebemos haha
ExcluirQue bom que gostou do post :D
Bem legal, adorei seu blog!
ResponderExcluirhttp://www.expressomarshmallow.com/
Fico feliz em saber que você gostou do blog :D
ExcluirOii flor, adoreeeei a dica para organizar o blog, o meu ainda nao tem as categorias pq tenho pouco conteudo ainda, mas penso em fazer quando tiver mais assuntos postados. adorei seu blog viu, sucesso ;)
ResponderExcluirQuando tiver mais assuntos coloca as categorias, vai ficar bem mais organizado!
ExcluirFico feliz em saber que você gostou do meu blog e te desejo muito sucesso também!
Amei as dicas, amo organização.
ResponderExcluirhttp://www.papodemeninasaer.com/
Que bom que gostou <3
ExcluirRealmente, esse tutorial deixa o blog muito mais organizado <3
ResponderExcluirxoxo
Imagine Belle
Deixa mesmo e um blog organizado é tudo de bom né?
ExcluirAdorei as dicas, as vezes entro em blog com conteúdos até bom, mas péssima organização e acaba não valorizando o blog de tal forma !http://www.papodemeninasaer.com/
ResponderExcluirOrganização valoriza muito o blog !
ExcluirAdorei , amo blogs organizados *-*
ResponderExcluirBeijos , Deus abençoe ♥
mundodasgarotasforever.blogspot.com.br { Retribui a visita ? }
Quem não gosta né? haha
ExcluirNo meu blog eu personalizo essa área porque fica feio esse moooonte de marcadores! Organizado fica muito mais fofinho, né? Lindos modelos!
ResponderExcluirBeijocas ♥
belasenhorita.net.br
Fica feio mesmo, o jeito é personalizar e organizar, o ambiente fica bem mais agradável para os leitores.
ExcluirEu já tinha visto esses modelos em alguns blogs, são realmente bem organizadinhos, o daqui do seu blog chamou minha atenção logo na primeira vez que entrei: é lindo!
ResponderExcluirO do meu canto está em forma de nuvem e, particularmente, gosto muito dele, apesar de saber o risco que corro de chegar ao ponto da 1 imagem... Mas vou ter cuidado! hehehe
Ananda Maciel ∞̕
Que bom que gostou do meu, usar os marcadores com ícones é boa estratégia, pois assim chama mais atenção, fazendo com o leitor procure outros assuntos que o interesse.
ExcluirSe você tiver bastante cuidado com certeza não vai ficar como na imagem 1 ! haha
Gostei dessa personalização!! No meu blog, a minha designer organizou tudo em 2 colunas e me pediu as tags que eu queria mostrar!! Parabéns pelo post!!!
ResponderExcluirBlog Paixão por Makes | Canal do blog
É bom modo de organizar também né?
ExcluirObrigada, fico feliz em saber que gostou (:
Adorei essa organização, porém nunca consigo colocar nada desses códigos de html rs, tenho uma séria dificuldade kk... Linda você me perguntou que cirurgia que fiz né, então eu tive que colocar um central pra receber medicamentos, fico muito internada, então acabaram as veias pra furar, ai tive que colocar o central pra furar somente nesse lugar. Beijos lindona, fica com Deus!
ResponderExcluirhttp://nathalianatth.blogspot.com.br/
Page:https://www.facebook.com/pages/Nathalia-Oliveira/423605667681407
Sério?
ExcluirÉ super simples, mas para pegar o jeito tem que ir tentando e se arriscando mesmo!
Você já está bem pela cirurgia? Fiquei muito preocupada quando li o post do seu blog!
Eu sinto muita falta do Cherry Bomb. :( As dicas de lá eram incríveis.
ResponderExcluirTwitter ♥ Blog
- xoxo –
Eram mesmo, todos nós sentimos ):
ExcluirGostei muito do tutorial, vou tentar fazer no meu blog!
ResponderExcluirBeijos!
http://temponaoperdido.wordpress.com/
Que bom que gostou, tenta sim, aposto que vai deixar seu blog bem mais organizado!
ExcluirAcho super legal, eu sempre me perco com as tags, tanto que tirei elas queria mesmo uma forma de colocar esses assuntos, quando definir o que vai ser vou colocar.
ResponderExcluirBeijos!
www.yarasousa.com
São tantas tags que não tem como não se perder né? haha
ExcluirOi , tudo sim e com você?
ResponderExcluirFico feliz em saber que você gostou <3
Eu prefiro organizadinho também assim, mas acho que os marcadores são bons para as pessoas procurarem por tags, sabe? Estou pensando até em colocar lá no meu blog. Dai fica dos dois jeitos.
ResponderExcluirBitocas!
www.likeparadise.com.br
É verdade, eles são bons mesmo !
ExcluirColoca sim...
Adorei a dica! Além de ficar mais organizado, o blog fica muito mais bonito!
ResponderExcluirBeijos! :**
http://de-repente-eu.blogspot.com.br/2014/01/resenha-eu-me-chamo-antonio.html
Que bom que gostou!
ExcluirEle fica mais bonito mesmo.
Gostei da dica, é isso aí!
ResponderExcluirFica mais fácil pras blogueiras de primeira viagem. Adorei!
Beijão!
Fica bem mais fácil né?
ExcluirÉ bom saber que você gostou haha
Muito boa sua dica gostei muito pramin foi uma grande ajuda Parabéns!
ResponderExcluirFico muito feliz em saber que minha dica foi útil para você.
ExcluirO que chama a atenção de um blog é isso! A organização! E o seu tem tudo isso! É por isso que eu gosto tanto dele!!
ResponderExcluirÉ verdade, organização é tudo.
ExcluirÉ muito bom ler um comentário desses e saber que tem pessoas, como você, que gostam do meu trabalho (:
Adorei o post e eu estava procurando sobre como fazer essa organização dos marcadores. Mas como faz para deixar em 2 colunas?
ResponderExcluirBeijoss
http://algodaodeprimavera.blogspot.com.br/
Oi td bom ? bem eu queria saber como colocar aquele quadro de fotos que passão e como colocar aquelas imagensinha da rede social e aqueles mimos como aqueles riscos que separão um gadget do outro bjs amei o post *-*
ResponderExcluirmariiiabonita.blogspot.com.br