30 junho 2016
PERSONALIZE OS MARCADORES DO BLOG (4 MODELOS)
Uma das ótimas fontes de inspiração para criar novos posts sem sombra de dúvidas são os marcadores. Em 20 ideias de posts para o seu blog eu citei a importância da escolha dos marcadores e/ou categorias pois serão através delas que os futuros posts surgirão.
Pensando nisso, eu preparei 4 modelos de marcadores para você usar em seu blog. Lembrando que esse post pertence a nossa série Layout dos Sonhos e essa é a aula de número 14. No último post da série eu ensinei a criar um arquivo em forma de calendário corre lá pra conferir. Agora vamos ao tutorial!
1. Primeiro, acesse o painel do blogger e vá em: Layout - Adicionar um Gadget - Marcadores e selecione as opções como a imagem ilustra:
2. Ainda no painel do blogger, clique em Modelo - Editar HTML e procure por ]]></b:skin> e acima dessa linha cole o código do modelo desejado, visualize e estiver tudo ok, salve:
MODELO 1
#Label1 ul li {float:left;padding-left:10px;font-family: 'Arial Narrow', sans-serif;font-size: 14px;background: #F2F2F2;text-indent: 8px;width:100px;-webkit-transition-duration: .40s;-webkit-transition-duration: .40s;margin-left: 30px;border-bottom: 2px solid #FFFFFF;}#Label1 ul li:hover{background:url(http://migre.me/uesAP) no-repeat left;}#Label1 ul li a {color: #2E2E2E;}#Label1 ul li a:hover {color: #FA5882;}
MODELO 2
#Label1 ul li {float:left;padding-left:10px;font-family: 'Arial Narrow', sans-serif;font-size: 14px;background:url(http://migre.me/uf90c) no-repeat left;text-indent: 8px;width:100px;-webkit-transition-duration: .40s;-webkit-transition-duration: .40s;margin-left: 30px;border-bottom: 1px dashed #151515;list-style: none;
}#Label1 ul li:hover{background:url(http://migre.me/uf90c) no-repeat left;}#Label1 ul li a {color: #2E2E2E;}#Label1 ul li a:hover {color: #FA5882;}
MODELO 3
#Label1 ul li {float:left; padding-left:15px; font-family: 'Arial Narrow', sans-serif;font-size: 14px;background:url(http://migre.me/uf9uY) no-repeat left;text-indent: 8px;width:220px; -webkit-transition-duration: .40s;-webkit-transition-duration: .40s;margin-left: 30px;border-bottom: 1px dashed #BDBDBD;list-style: none;
} #Label1 ul li:hover{background:url(http://migre.me/uf9zq) no-repeat left;}#Label1 ul li a {color: #2E2E2E;} #Label1 ul li a:hover {color: #FA5882;}
MODELO 4
#Label1 ul li {float:left; padding-left:15px; font-family: 'Arial Narrow', sans-serif;font-size: 14px;background:url(http://migre.me/uf9Nw) no-repeat left;text-indent: 8px;width:100px; -webkit-transition-duration: .40s;-webkit-transition-duration: .40s;margin-left: 30px;border-bottom: 1px dashed #626262;list-style: none;
} #Label1 ul li:hover{background:url(http://migre.me/uf9Nw) no-repeat left;}#Label1 ul li a {color: #2E2E2E;} #Label1 ul li a:hover {color: #626262;}
Caso não dê certo, verifique se o código ID do gadget marcador está correto. Como base eu coloquei Label1 mas pode ser que no seu template seja outro, pra saber, basta clicar em Ir para um widget como a imagem abaixo ilustra:
Qualquer outro erro que aparecer por favor, me informe através dos comentários. E logo abaixo você conferi as últimas aulas da nossa série Layout dos Sonhos:
- Baixe o layout base
- Background personalizado
- Cabeçalho com largura total
- Categorias em imagem
- Centralizando o título do post
- Personalizando o rodapé do post
- Postagem Relacionada
- Títulos dos Gadgets Personalizados (5 Modelos)
- colocar a foto do perfil arredondada
- Exibir último vídeo do youtube no blog
- Arquivo em forma de calendário
Espero que tenha gostado e não esqueça de me contar qual modelo vai usar. E se você tiver alguma sugestão de post, é só deixar nos comentários. Um super beijo e até a próxima!
Adorei o tutorial, o segundo modelo é meu preferido!
ResponderExcluirPreciso lhe dizer que não consigo mais sair do seu blog, conheci-o a quase uma hora e já li mais posts aqui do que em qualquer outro blog durante toda a semana. Adorei a forma como você coloca seu conteúdo e o layout é maravilhoso. Ganhaste uma nova leitora e seguidora. Muito sucesso :)
www.lagrimasdediamante.com
Luisa, minha linda <3 Muito obrigada! Suas palavras são músicas para os meus ouvidos. É muito gratificante ler isso! Eu que agradeço sua presença aqui no Manual <3 Espero que volte mais vezes. Bjs linda :*
ExcluirNão consigo deixar os marcadores lado a lado, me ajuda por favor??
ResponderExcluirAdorei seu blog, amando todas as dicas.
Oi Drika! Tente diminuir o tamanho da fonte. Em font-size: 14px; troque o número 14 por um menor. Espero ter ajudado. Bjs linda :*
ExcluirAmeiiii o Post, amei o modelo 4 s2
ResponderExcluirFico feliz que tenha gostado Cacau <3
ExcluirBjão :*
Tem como trocar a fonte do titulo do marcador?
ResponderExcluirA fonte do título do marcador não está incluso nesse código. Aquela fonte está presente em meu blog de testes. Os únicos elementos que sofrerão mudanças através dos códigos desse post, são os marcadores. Espero que eu tenha te ajudado. Bjs :*
ExcluirBOA NOITE AMORE, SEM DUVIDAS O SEU BLOG É UM DOS MELHORES QUE JÁ VI. JÁ AMO <3
ResponderExcluirPORÉM NÃO CONSIGO DEIXAR ALINHADO O MARCADOR COM O TEMA DO GADGET TIPO FICA MUTO PRA DIREITA NÃO FICA ALINHADO. VOCÊ PODE AJUDAR?
MEU BLOG É permariae.blogspot.com.br se vc poder dar uma olhada vc vai ver que os marcadores não estão alinhados
Maria, primeiramente agradeço o elogio <3 é uma alegria saber que concidera o Manual um dos melhores blogs <3 vc é um amor =) E sobre o probleminha, bom o que deve está acontecendo é so seguinte, a estrutura do seu blog está errada, a largura está elevada. O tamanho ideia seria de 1300 no máximo. Espero ter ajudado. Bjão :* <3
ExcluirAdorei o blog
ResponderExcluirObrigada Márcia <3 Bjs :*
ExcluirComo faço para deixar os marcadores em maiusculo? eu ate tentei adicionar antes da fonte, o text-transform: uppercase, só que não deu certo a letra ficou grande e mesmo que dimunia a fonte continua do mesmo tamanho
ResponderExcluirOi Laysla,
ExcluirO problema é o os marcadores são links, e não é possível fazer certas modificações nesse código, você tem que modificar em a:link {
Depois me conta se deu certo! Espero ter te ajudado. Bjão :*
Olá, linda também não funcionou, acho que não fiz da maneira certa, como é essa modificação tenho que colocar a baixo ou um outro código em a:link{ ? Eu uso um dos seus layout free
ResponderExcluirOi Laysla,
ExcluirEm a:link { você pode fazer algumas alterações, mas todos os links do blog serão alterados também. Fora isso o tutorial é bem simples e fácil de fazer. Depois me conta se deu certo. Abraços 0/\0
Oi lindona! Eu até consegui fazer mais os meus marcadores não ficam lado a lado de jeito nenhum ): Já tentei diminuir a fonte e nada..
ResponderExcluirBeijos ♥
Oi Larrisa, tenta diminuir o tamanho da lateral do seu blog. Talvez os seus marcadores são palavras grandes, isso pode atrapalhar também. Manda o link do seu blog pra eu dar uma olhadinha, quem sabe eu posso te ajudar =)
ExcluirMil bjos :*
Que legal, estou usando o modelo 3!!
ResponderExcluirMeu blog: https://blogfelicidadeb.blogspot.com.br/
Olá Bruna, tudo bom?
ResponderExcluirFui visitar seu blog, e vi seus marcadores. Ficaram lindos.
Obrigada por usar em seu cantinho.
Sucesso pra você e seu blog!
Bjs :*
Oi Lorena! Meus marcadores não ficam lado a lado, já diminui e aumentei a lateral do blog e fica igual
ResponderExcluirSuper lindo, eu queria o modelo 1 e vim pesquisar aqui pensando que você tinha e dei sorte encontrei bem como eu queria e já coloquei no meu blog, obrigado!
ResponderExcluirhttps://thifanysantosoficial.blogspot.com
Que lindo,usei o modelo 3 dá uma olhadinha lá,ficou show. www.mulhernovaera.com.br
ResponderExcluirMais uma vez tentei visitar seu blog, mas diz que só aceita visita de leitores convidados. Você precisa deixar o blog em modo PÚBLICO caso contrário, as pessoas não vão conseguir acessa-lo =) Bjão!
Excluir