Oi gente! Mal criei meu blog e já tem tanta gente me apoiando! Queria agradecer a Miyukii é uma fofa, gente, vale super apena visitar o KE. A Caciana Maria, do blog Curiosidades Teen, me pediu esse tutorial, e aqui está! Espero que gostem. Gente é super confiável esse tutorial, eu mesmo usei para fazer o daqui do blog.
Para personalizar que nem a minha, precisamos de dois tutoriais:
Primeiro: Separar os títulos dos gadgets.
Para fazer isso você deverá ir em
Modelo >> Personalizar >> Avançado >> Plano de fundo da barra lateral >> Cor do plano de fundo
Para fazer isso você deverá ir em
Modelo >> Personalizar >> Avançado >> Plano de fundo da barra lateral >> Cor do plano de fundo
E escolher a opção Transparente, agora salve e visualize.
Segundo: Colocando os títulos dos gadgets em caixinhas.
Vá para o Modelo do blog, clique em Editar HTML, aperte a tecla F3, e procure por:
Segundo: Colocando os títulos dos gadgets em caixinhas.
Vá para o Modelo do blog, clique em Editar HTML, aperte a tecla F3, e procure por:
.sidebar .widget {
Então logo abaixo desse trecho, cole o seguinte código:
background: #ffffff;
margin: 10px 0;
Visualize, e se estive tudo ok, salve.
Agora procure por:
/* Headings
E abaixo dele haverá um "linha", mais ou menos assim:
/* Headings
----------------------------------------------- */
Então abaixo da linha estará o seguinte código:
h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
}
.main-inner h2.date-header {
font: $(date.font);
color: $(date.text.color);
}
Apague-o e no lugar dele cole o código abaixo:
.sidebar h2 {
font-family: arial;
font-size: 14px;
color: #fff;
background: #fff;
height: 12px;
width: 150px;
text-align: center;
-webkit-border-radius: 0px;
}
E agora para finalizar procure por:
]]></b:skin>
E acima dele, cole esse código:
.sidebar .widget {
padding: 10px;
margin-bottom: 50px; /*Espaço entre um gadget e outro*/
}
.sidebar .widget h2 {
background: #ffb5c5; /*Cor do fundo do título, mude de acordo com a sua vontade*/
width: 135px; /*Largura do fundo, aumente se precisar*/
font-family: Arial; /*Fonte do titulo*/
color: #ffffff; /*Cor da fonte, mude de acordo com a sua vontade*/
font-size: 15px; /*Tamanho da fonte*/
text-transform: uppercase; /*Apague essa linha caso não queira que fique em maiúsculo*/
font-weight: normal;
line-height: 17px; /*Altura da linha*/
margin-top: -30px; /*Quantos pixels o título "sobe"*/
margin-left: -0px;
padding-left: 5px;
No próprio código já tem tudo explicado. Altere de acordo com a sua vontade, visualize, e se estiver tudo certo, salve.
Beijos,
Créditos: Monalisa com S
Adoro personalizar a barra lateral, tem tantos modelos que dão para usar, né?! :D Adorei o tutorial, super útil <3
ResponderExcluirChuu ~ ♥
we-lovesweets.blogspot.pt
São mesmo. Awn fofa, que bom que adorou.
ExcluirBeijos!
Ótimo tutorial, amei seu blog ~Estou seguindo.
ResponderExcluirspace-sweet-girl.blogspot.com.br
Que bom que gostou, mt obg!
ExcluirBeijos!
HAHA a miyukii é muito fofa ela sempre ta ajudando blogs iniciantes c: q Eu acho, lindo em blogs com layouts assim como o seu mais não curto muito não dispensei o tutorial pelo contrário perfeito u3u
ResponderExcluirKisses.
Ela é muito fofa mesmo :D Awn linda obg!
ExcluirBeijos!
Concordo totalmente com oque você disse! Awnnn obg! Claro que ia vim no seu no seu blog! Espero você mais vezes! Seguindo!
ResponderExcluirbeijus
sweetsecretfantasy.blogspot.com.br
Awn linda, obg, que bom que gostou do blog, beijos!
ExcluirAmo personalizar tudo no blog, esse tuto nunca falta, é essencial! hahaha
ResponderExcluirBeijos, Nathália - Bedside book ♥
Também amo, fica lindo haha.
ExcluirBeijos!
Obrigada pelo tutorial, as vezes faço uma confusão com a barra lateral e esse tutorial vai me ajudar bastante mesmo
ResponderExcluirBeijos
too-kawaii
Que bom que gostou linda, fico feliz com isso!
ExcluirBeijos
Awn você é uma fofa! Esse tutorial as vezes não fica bem nos meus layouts ISHUAIASHUA amei <3
ResponderExcluirKisses.
kawaii-expllosion.blogspot.com
Que bom que gostou linda, você que é!
ExcluirBeijos.
Obrigada ^^
ResponderExcluirDenada linda :D
Excluir