Como Personalizar a Área das Postagens do Blogger
16:43
Olá pessoal, tudo bem com vocês?
Eu percebi que vocês gostaram muito do post que fiz da série Dicas de Blogueiros, se você não viu, clique aqui, então hoje vou ensinar para vocês um tutorial com três modelos para personalizar sua área de postagem! É super fácil e não precisa mexer na parte de HTML! Vem ver...
Como eu disse, tem três opções, mas vocês podem mudar as cores de acordo com a preferencia de vocês...
Como eu disse, tem três opções, mas vocês podem mudar as cores de acordo com a preferencia de vocês...
Para começar vá em Layout, no seu blog, e clique em Adicionar um Gadget, depois procure por HTML/JAVA SCRIPT e copie o código abaixo de sua preferencia
<style>
/** CANDY POSTS DIVIDIDOS INICIO **/
@font-face {font-family:'Salsa';font-weight:400;src:url('http://themes.googleusercontent.com/static/fonts/salsa/v3/A4KcPjUX7Ams2Jqasy0vzQ.woff') format('woff')}
.main-inner .column-center-outer {
background:transparent none !important;
_background-image: none;
}
/** post **/
.date-outer{
background:#fff;/* cor do bg */
margin-bottom:20px; /* espaço entre os posts */
padding:15px !important; /* espaço interno */
border-radius:0 0 15px 15px; /* arredondamento */
border-top:15px #fee solid; /* borda no topo */
}
.date-outer img{max-width:99% !important} /* a imagem do post nunca vai "pular" rs */
/** data do post **/
.date-header{
width:35px;/** largura **/
height:50px;/** altura **/
overflow:hidden;
margin-bottom:-80px;/** desce **/
margin-left:-50px;/** margin pra esquerda **/
text-align:center;/** alinha o texto **/
padding:10px 5px;/** espaço interno **/
background:url(http://3.bp.blogspot.com/-XkS0xqFlrwQ/T6nO1NlqBYI/AAAAAAAAgVM/nsGRyRqpiGY/s1600/data.png)no-repeat; /** bg **/
font:normal 10px verdana !important;
color:#fff !important;/** cor da fonte **/
font-weight:400;/** afina a fonte **/
}
/** título do post **/
h3.post-title a, h3.post-title{
font: normal 25px Salsa; /** font **/
color: #f9b !important; /** cor **/
text-shadow:0 1px #eee; /** sombra **/
margin-left:5px !important;/** margin do titulo em relação a data **/
}
/** CANDY POSTS DIVIDIDOS FIM by Candylland [www.candylland.net] **/
</style>
<style>
/** CANDY POSTS DIVIDIDOS INICIO **/
@font-face {font-family:'Salsa';font-weight:400;src:url('http://themes.googleusercontent.com/static/fonts/salsa/v3/A4KcPjUX7Ams2Jqasy0vzQ.woff') format('woff')}
.main-inner .column-center-outer {
background:transparent none !important;
_background-image: none;
}
/** post **/
.date-outer{
background:#fff;/* cor do bg */
margin-bottom:20px; /* espaço entre os posts */
padding:15px !important; /* espaço interno */
border-radius:0 0 15px 15px; /* arredondamento */
border-top:15px #87cecc solid; /* borda no topo */
}
.date-outer img{max-width:99% !important} /* a imagem do post nunca vai "pular" rs */
/** data do post **/
.date-header{
width:35px;/** largura **/
height:50px;/** altura **/
overflow:hidden;
margin-bottom:-80px;/** desce **/
margin-left:-50px;/** margin pra esquerda **/
text-align:center;/** alinha o texto **/
padding:10px 5px;/** espaço interno **/
background:url(http://4.bp.blogspot.com/-WIQd_0_T2JM/T6nTFERaHXI/AAAAAAAAgVY/yhEw6DwFfm0/s1600/data.png)no-repeat; /** bg **/
font:normal 10px verdana !important;
color:#fff !important;/** cor da fonte **/
font-weight:400;/** afina a fonte **/
}
/** título do post **/
h3.post-title a, h3.post-title{
font: normal 25px Salsa; /** font **/
color: #87cecc !important; /** cor **/
text-shadow:0 1px #eee; /** sombra **/
margin-left:5px !important;/** margin do titulo em relação a data **/
}
/** CANDY POSTS DIVIDIDOS FIM by Candylland [www.candylland.net] **/
</style>
<style>
/** CANDY POSTS DIVIDIDOS INICIO **/
@font-face {font-family:'Salsa';font-weight:400;src:url('http://themes.googleusercontent.com/static/fonts/salsa/v3/A4KcPjUX7Ams2Jqasy0vzQ.woff') format('woff')}
.main-inner .column-center-outer {
background:transparent none !important;
_background-image: none;
}
/** post **/
.date-outer{
background:#fff;/* cor do bg */
margin-bottom:20px; /* espaço entre os posts */
padding:15px !important; /* espaço interno */
border-radius:0 0 15px 15px; /* arredondamento */
border-top:15px #777 solid; /* borda no topo */
}
.date-outer img{max-width:99% !important} /* a imagem do post nunca vai "pular" rs */
/** data do post **/
.date-header{
width:35px;/** largura **/
height:50px;/** altura **/
overflow:hidden;
margin-bottom:-80px;/** desce **/
margin-left:-50px;/** margin pra esquerda **/
text-align:center;/** alinha o texto **/
padding:10px 5px;/** espaço interno **/
background:url(http://2.bp.blogspot.com/-BSk8dIX4Vow/T6nUfo1WRgI/AAAAAAAAgVg/v6pHaYUUPGA/s1600/data1.png)no-repeat; /** bg **/
font:normal 10px verdana !important;
color:#fff !important;/** cor da fonte **/
font-weight:400;/** afina a fonte **/
}
/** título do post **/
h3.post-title a, h3.post-title{
font: normal 25px Salsa; /** font **/
color: #999 !important; /** cor **/
text-shadow:0 1px #eee; /** sombra **/
margin-left:5px !important;/** margin do titulo em relação a data **/
}
/** CANDY POSTS DIVIDIDOS FIM by Candylland [www.candylland.net] **/
</style>
Espero que tenham gostado! Qualquer duvida deixem nos comentários!
Beijos
Créditos: Candylland.net
9 comentários
Bia amei espero que tenham mais tutorias assim :) :h
ResponderExcluirObrigada Stefany :D Se vcs quiserem, eu faço mais <3
ExcluirAah precisava disso rsrs beijos
ResponderExcluirQue bom que gostou Dudinha. Beijos
ExcluirGosto desse tutorial, deixa o blog bem fofo *-* Muito bem explicadinho, gostei! :3
ResponderExcluirBeijos amor, seguindo ♥
Querida Hanny
Obrigada Hanny :)
ExcluirBeijos
Oiii
ResponderExcluiradorei o tutorial, muito útil!
estou seguindo seu blog, passa no nosso?
Estamos sorteando uma sombra da Mary Kay no nosso ultimo post sobre maquiagem =)
http://canalmorenas.blogspot.com.br
Obrigada! Fico feliz que tenha gostado :D
ExcluirVou dar uma passadinha lá! Bjs
Eu estou usando e estou amando me ajudou muito obrigada :*
ResponderExcluirhttp://beijouva.blogspot.com.br/