Blogger: Personalizando o indicador de marcador | Follow your dreams
Blogosfera

Blogger: Personalizando o indicador de marcador

Oi pessoal,

Uma das coisas que tenho aqui no blog e vocês me pedem muito pra ensinar é esse indicador de categoria personalizado com coraçãozinho. Pesquisei bastante e consegui uma solução para Blogger (uso WordPress), trouxe também outros modelinhos para os meninos. Espero que gostem! :)

Demonstração:
Personalizando-o-indicador-de-marcador-1

 

Atenção: só aparece quando estamos na página de um marcador/categoria.
Na página inicial ou na página de um post, por exemplo, não aparece!
 

  • 1 – No HTML do seu template, pesquise por status-msg-wrap. Você vai encontrar esse trecho:

Personalizando-o-indicador-de-marcador-2

 

  • 2 – Substitua o que está selecionado na imagem anterior por:
<div class=’status-msg-wrap’>
<li>Categoria: <data:blog.pageName/></li>
</div>

 

  • 3 – Pesquise por ]]></b:skin> (se não encontrar pesquise só por ]]>)e uma linha ACIMA cole:

/*—— MENSAGEM SOBRE MARCADORES PERSONALIZADA —–*/
.status-msg-wrap {
background: #febcc2 url(“https://lh3.googleusercontent.com/-ov5ipGzphYk/VUkooQSGBjI/AAAAAAAADyY/yQismgNdYvE/s28/Indicador-de-marcador.png”) center left no-repeat;
padding:2px 15px 2px 40px;
margin-bottom:25px;
width:96%;
color:#fff;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
font-weight:bold;
list-style: none;
}

 

OUTROS MODELOS

Modelo 2

Personalizando-o-indicador-de-marcador-3

/*—— MENSAGEM SOBRE MARCADORES PERSONALIZADA —–*/
.status-msg-wrap {
background: #ebebeb url(“https://lh3.googleusercontent.com/-qntttcvr9lE/VUkvj_bvjkI/AAAAAAAADyw/oE_mtl348vA/s28/Indicador-de-marcador-2.png”) center left no-repeat;
padding:2px 15px 2px 40px;
margin-bottom:25px;
width:96%;
color:#8972a1;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
font-weight:bold;
list-style: none;
}

 

Modelo 3

Personalizando-o-indicador-de-marcador-4

/*—— MENSAGEM SOBRE MARCADORES PERSONALIZADA —–*/
.status-msg-wrap {
background: #a5bccf url(“https://lh3.googleusercontent.com/-AjtqNW0V1T0/VUkvkC6I5tI/AAAAAAAADy4/HVSwydu3B4A/s28/Indicador-de-marcador-3.png”) center left no-repeat;
padding:2px 15px 2px 40px;
margin-bottom:25px;
width:96%;
color:#fff;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
font-weight:bold;
list-style: none;
}

 

Modelo 4

Personalizando-o-indicador-de-marcador-5

/*—— MENSAGEM SOBRE MARCADORES PERSONALIZADA —–*/
.status-msg-wrap {
background: #ecf2f5 url(“https://lh3.googleusercontent.com/-DywPoyREp1s/VUkvkOo1pZI/AAAAAAAADy0/8FpaFEDZJ1A/s28/Indicador-de-marcador-4.png”) center left no-repeat;
padding:2px 15px 2px 40px;
margin-bottom:25px;
width:96%;
color:#7c9eb4;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
font-weight:bold;
list-style: none;
}

 

E prontinho! Super fácil :)

Sugestões de tutoriais são sempre bem vindas nos comentários.
Um beijo! Coracao7

Tags : Blogger

21 Comentários

  1. OLÁ, AMEIIIII
    EU QUERIA SABER COMO FAZ PARA COLOCAR A CATEGORIA COM ESSA IMAGEM NO TÍTULO DO POST.
    E ESSE SEU MENU FIXO!!!

    luhguimaraesblog.blogspot.com

  2. Já fiz isso antes e tinha ficado super feliz, mas quando a gente modifica essa parte do código afeta também os resultados de pesquisa. Fica estranho pq não aparece nenhum texto referente a nossa pesquisa, então retirei :(

  3. Oi Karoline já faz uns dias que conheci seu blog e desde então não teve um dia em que eu não entrei aqui e não podia deixar de fazer um comentário elogiando o seu blog, estou completamente apaixonada por tudo, seus tutoriais me ajudaram muito e me inspiraram muito também. Ganhou não só uma leitora, mas uma admiradora <3 Beijos!

  4. Ka, você sempre me surpreendendo em cada tutorial seu. Adorei este, e queria pedir um tutorial para você, queria que ensinasse como deixar o “Assinar o blog com Newsletter” personalizado, tipo, como colocar imagem invés de título escrito “Assine aqui e bla bla bla” entende? ahha. Obrigada desde já <3

  5. Olá lindaaa! Amo seu blog! Seus tutos sempre me salvam!!! rsrs Você sabe me dizer como faço para substituir “0 comentários” no post footer por uma imagem?? Eu já tentei tudo quanto é tutorial da internet, já tentei váaaarios e nenhum deu certo…
    Será que pode me ajudar?!
    Beijinhos!

    1. Val, substituir o link todo por uma imagem é mais complicadinho, mas fácil seria colocar uma imagem de plano de fundo mudando o código “background” pra “background: url(“URLDAIMAGEM”) center no-repeat;” e depois ir ajustando os valores em “padding” pra que a imagem não fique cortada.
      Bjs

  6. Oii!!
    Então, eu usei um HTML pra colocar minha foto do perfil redonda, e para inserir minhas redes sociais, e agora quando comento em algum blog ou respondo comentários no meu blog, não aparece foto nenhum minha no perfil. Sabe dizer como posso ajeitar isso??

    No mais, amei seu blog. está nos meus favoritos. Dicas super úteis e simples, principalmente para quem ta começando.
    Beijos!!

  7. Amei o tuto, ei eu tenho uma sugestão de tutorial, bem não é exatamente um tutorial mas um pedido, que eu acho que muitos leitores também querem: Um novo modelo de categorias, assim como vc fez em formato de bolinhas, só que agora poderia ser de outro jeito, por exemplo em formato de coração ou sla, esperando atenciosamente! *-*

  8. Olá, bom dia!
    Eu tentei colocar isso no template, mas eu não achei o trecho que você falou para substituir! Eu utilizo o template chamado Petit Formal. Na verdade, usando esse template, eu não consegui colocar slides automáticos, e isso..

    Gosto muito dos seus tutorias!
    Continue assim.. com essa criatividade para fazer coisas lindas!

    Fique com Deus, beijos <3'

  9. Olá Karol, primeiramente parabéns pelo seu blog ele é simplesmente maravilhoso!!! Continue assim!
    Infelizmente tive problemas com a segunda fase do tutorial, nenhum dos códigos do modelo funcionou no meu blog. O que pode ter acontecido? XOXO

  10. Oii, bem legal o tutorial amo seus tutoriais ♥ inclusive queria lhe pedir um, teria como você ensinar a colocar o marcador do post ao lado do título? Igual ao seu? Tipo o ícone do marcador sabe? Que nem o seu que fica o computadorzinho do lado, ai depois se clicar em dicas aparece uma lampada, pode ensinar? Eu agradeceria muito ♥♥♥ beijos Ka!

Deixe uma resposta