html

Efeito cute na aréa dos posts

10:38

                              

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)

Créditos á Candy Land





O resultado do primeiro é esse aqui.

 Candy Posts Separados  


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>

 Candy Posts Separados

<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>

 Candy Posts Separados

<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!



You Might Also Like

24 Chocolates viraram Cupcakes

  1. Adorei o tutorial.Parabéns pelo blog ele é divo!
    Bjos
    torrada com nutella ( clica no perfil)

    ResponderExcluir
  2. QUe gracinha, fica mesmo cute! Vou ver se consigo colocar no meu blog >.<

    Beijos,
    Caroline, do Criticando por Aí.

    ResponderExcluir
  3. Que fofo querida muito legal adorei !

    ResponderExcluir
  4. Oi florzinha! Fica muito fofis!quero colocar no meu blog!
    http://meuestiloemusica.blogspot.com.br/

    ResponderExcluir
  5. 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
    Já 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

    ResponderExcluir
  6. Muito útil, simplesmente amei esse tutorial. É perfeito! :)

    http://sem-normalidade.blogspot.com.br/

    ResponderExcluir
  7. Ameei esse tutorial. Mega útil. Estava precisando muito ;)

    Beijooos!
    -Visite >> Rabiscos no Papel

    ResponderExcluir
  8. Muito bom esse tutorial.

    blog-da-marci.blogspot.com.br

    ResponderExcluir
  9. Oi flor, td bem? adorei o tutorial, ja estou usando um deles ;)

    te seguindo! bjinhus ^^

    http://fashionebella.blogspot.com.br/

    ResponderExcluir
  10. 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.
    bjs
    naquelemomentoeujuro.blogspot.com

    ResponderExcluir
  11. Quando 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!

    ResponderExcluir
    Respostas
    1. Querido, 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.

      Beijos de luz e antes de falar, se informe melhor.

      Excluir

Deixe um recadinho sobre o blog. Obrigada!

Related Posts Plugin for WordPress, Blogger...