PERSONALIZE OS TÍTULO DOS GADGETS (5 MODELOS)

11 maio 2016


Mais um post da nossa série LAYOUT DOS SONHOS onde estou disponibilizando 21 tutoriais, para que sozinha, você possa criar seu próprio layout. Hoje você vai aprender a personalizar os títulos dos gadgets. Pra quem não sabe, gadgets são os itens que ficam na lateral do blog, geralmente do lado direito, também conhecida com sidebar.

Além do tutorial, eu preparei 5 modelos para você escolher. Veja qual se encacha melhor com o design do seu blog. Esse tutorial se aplica somente para a plataforma blogger.

Você está acompanhado nossas aulas? Para que não fique perdida e consiga acompanhar a série, vou te mostrar as aulas anteriores: 

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 
- Postagens Relacionadas em miniatura



Agora  você já pode acompanhar a série! Então chega de conversa, e vamos logo para o tutorial.


1° Acesse a caixa de códigos HTML do blog e procure por: .sidebar .widget h2 {


2º Abaixo do código pesquisado, cole o modelo da sua escolha.





MODELO 1


font-family: 'Roboto';
color: #FFFFFF;
font-size: 18px;
text-align: center;
font-weight: normal;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
background: #5D18F0;
height: 20px;





MODELO 2

font-family: 'Cookie';color: #FFFFFF;background: #FF2063;font-size: 30px;text-align: center;font-weight: normal;border-top-right-radius: 10px;border-top-left-radius: 10px;height: 20px;








MODELO 3

border: 1px dashed #151515;font-family: 'Roboto';color: #FF2063;font-size: 25px;text-align: center;font-weight: normal;text-transform: uppercase;






MODELO 4

font-family: 'Roboto';color: #222323;font-size: 15px;text-align: center;font-weight: normal;text-transform: uppercase;background: #90E6FF;float: right;padding-bottom: 10px;





MODELO 5

font-family: 'Roboto';color: #222323;font-size: 18px;height: 15px;text-align: center;font-weight: normal;text-transform: uppercase;border-bottom: 3px solid #151515;


Vale lembrar que é recomendável fazer essas personalizações em um blog de testes, de preferência no modelo base que disponibilizei para essa série. Espero que tenham gostado, quero muito saber qual modelo você mais gostou, e qual vai usar em seu novo layout. Qualquer dúvida, deixe nos comentários. 

Siga o blog e participe das minhas redes sociais para nunca perder as atualizações. 
Um grande beijo e até a próxima!

9 comentários:

  1. Lory, no meu blog essa personalização fica no titulo dos posts e nos gadgets, como faço pra colocar só nos gadgets?

    ResponderExcluir
    Respostas
    1. Olá Giooh! Bom eu teria que ter acesso á área de códigos do seu blog, pra saber o que está causando o erro, porque isso não é normal. Refaça o processo e veja se funciona. Esse tutorial foi feito, para personalizar um layout base que disponibilizei aqui no Manual.

      Excluir
  2. E não tinha esse codigo, o que personalizava era o H2, só que ele personalizou mais coisas do que deveria...

    ResponderExcluir
    Respostas
    1. Esse tutorial deve ser feito no layout base que disponibilizei, por isso está dando erro no seu.

      Excluir
  3. Lory eu tentei mas não ficou como deveria,eu coloquei o modelo 5,mas não ficou com o traço em baixo.O que eu faço?
    obs;Parabéns pelo blog ele é lindo <3
    http://versossimplesblog.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Maria, me manda por e-mail a sua dúvida com mais detalhes, que tentarei te ajudar. Pelo comentário é meio difícil rsrs Aguardo seu contato! Bjs :*

      Excluir
  4. lory testei todos os modelos e amei!!! porem meu favorito que foi o modelo 5 não foi.

    ResponderExcluir
  5. como eu disse, eu testei todos, mas esse deu erro. lory simplesmente n fica. fica com a fonte que vc escolhe no modelo do blog, fiquei triste pq e o q eu mais gostei.

    ResponderExcluir