Oi garotas tudo bem? Quando eu fiz esse layout do blog, eu encontrei em algum blog um jeito fofo de personalizar a area das postagens, e então eu lembrei e decidi trazer para vocês. Trouxe 4 efeitos diferentes que da para ser aplicado em qualquer cores do layout. Já que nesses últimos dias, não sei se perceberam to trazendo muitos tutoriais para personalizar o blog, eu realmente não lembro qual blog foi, pois esse post ta programado á alguns dias já. (Atualizado)
O resultado do primeiro é esse aqui.
Adicione um HTML/JAVASCRIPT e cole o seguinte código.
Ps: recomendo que crie em baixo dos post, assim não ficará uma faixinha a mais na sua sidebar.
<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>
Bom acho que é só isso, fácil né? Bezoos!
24 Chocolates viraram Cupcakes
O Blog é o Candy Land e-e adorei
ResponderExcluirJa coloquei
ExcluirAdorei o tutorial.Parabéns pelo blog ele é divo!
ResponderExcluirBjos
torrada com nutella ( clica no perfil)
Obrigada linda,
ExcluirBeijoos
QUe gracinha, fica mesmo cute! Vou ver se consigo colocar no meu blog >.<
ResponderExcluirBeijos,
Caroline, do Criticando por Aí.
é muito facil. coloca sim linda.
ExcluirBeijoos
Que fofo querida muito legal adorei !
ResponderExcluirQue bom deh.
ExcluirBeijoos
Oi florzinha! Fica muito fofis!quero colocar no meu blog!
ResponderExcluirhttp://meuestiloemusica.blogspot.com.br/
Coloca sim linda.
ExcluirBeijoos
Muito lindo o tutorial, adorei. Eu só não coloco porque, como o layout do meu blog foi feito por outra pessoa, tenho medo de estragar algo rsrsrs
ResponderExcluirJá estou seguindo aqui, seu blog é muito cute, seus posts, design, tudo. Se puder dar uma passadinha no meu blog e comentar, seguir... :)
Beijos,
www.eloucurass.blogspot.com
Nossa é super facil linda.
ExcluirBeijoos
Muito útil, simplesmente amei esse tutorial. É perfeito! :)
ResponderExcluirhttp://sem-normalidade.blogspot.com.br/
Obrigada linda.
ExcluirBeijoos
Ameei esse tutorial. Mega útil. Estava precisando muito ;)
ResponderExcluirBeijooos!
-Visite >> Rabiscos no Papel
Que bom linda.
ExcluirBeijoos
Muito bom esse tutorial.
ResponderExcluirblog-da-marci.blogspot.com.br
Tbm acho Marci.
ExcluirBeijoos
Oi flor, td bem? adorei o tutorial, ja estou usando um deles ;)
ResponderExcluirte seguindo! bjinhus ^^
http://fashionebella.blogspot.com.br/
Que bom linda.
ExcluirBeijoos
Seu blog é tão lindo e dá dicas tão boas *--* Já estou seguindo claro e fico muito feliz por ter gostado do meu blog, volte sempre.
ResponderExcluirbjs
naquelemomentoeujuro.blogspot.com
Obrigada
ExcluirQuando VC fez esse layout do blog? QUANDO FOI ISSO? ele não foi vc quem fez ele é um templante pronto como pode mentir assim? ele está todo em inglês nem isso vc soube arruma, me desculpe mais fico triste de ver mentiras e enganos das pessoas com seus leitores!
ResponderExcluirQuerido, olhe a data dessa postagem, em 2013. Depois disso já troquei o layout do blog milhares de vezes. QUANDO FIZ ESSA POSTAM EM 2013, o layout da epoca eu tinha feito. O layout de HOJE 2015, é sim um layout pronto e em nenhum lugar em disse que não era.
ExcluirBeijos de luz e antes de falar, se informe melhor.
Deixe um recadinho sobre o blog. Obrigada!