16 de jun de 2017

Título da Sidebar Personalizado - 4 modelos

Esse lindo bloguinho que á muito tempo esteve ás moscas voltou á ativa!!! *todas comemoram*

E para celebrar esse retorno preparei vários tutoriais pra vocês que serão postados ao longo do mês, começando com esse onde você vai deixar os títulos dos seus gadgets muito mais bonitos e personalizados, fora que é super fácil então não tem desculpa, vamos lá?





Primeiramente você vai em Modelo/Tema > Editar HTML e logo no início vai ter a tag <head>, abaixo dela cole esse trecho

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'/>

Agora pesquisa por h2 {, escolha um dos modelos abaixo, copie e depois de "}" cole o código escolhido.

Modelo 1
.sidebar h2 {
font-family: Montserrat;
font-size: 14px;
text-transform: uppercase;
text-align: center;
color: #40250A; /*Cor da fonte*/
font-weight: normal;
background: #F1BEC9; /*Cor de fundo*/
padding-left: 12px;
margin-bottom: 5px;

border-top: 3px solid #E27A8F; /*Borda*/
}

Modelo 2
.sidebar h2 {
font-family: Montserrat;
font-size: 14px;
text-transform: uppercase;
text-align: center;
color: #40250A; /*Cor da fonte*/
font-weight: normal;
background:#EBEBEB; /*Cor de fundo*/
padding-left: 12px;
margin-bottom: 5px ;

border: 3px solid #000; /*Borda*/
}

Modelo 3
.sidebar h2 {
font-family: Montserrat;
font-size: 14px;
text-transform: uppercase;
text-align: center;
color: #fff; /*Cor da fonte*/
font-weight: normal;
background: url(http://i.imgur.com/wkczmMg.png); /*Cor de fundo*/
border-bottom: 1px solid #E27A8F; /*Borda*/

}

Modelo 4
.sidebar h2 {
font-family: Montserrat;
font-size: 14px;
text-transform: uppercase;
text-align: center;
color: #333; /*Cor da fonte*/
font-weight: normal;
background: url(http://i.imgur.com/hHNc7eD.png); /*Cor de fundo*/
border-bottom: 1px solid #E27A8F; /*Borda*/

}

Agora é salvar e pronto!

Espero que tenha gostado, logo tem mais tutoriais!! Qualquer dúvida ou pedidos de tutoriais deixe nos comentários.

2 comentários :

  1. Me ajudou muito,estou criando o meu próprio Layout.Você pode e dar uma dica?"alem desse blog mara"
    Obs: me inspiro no seu Layout

    ResponderExcluir