02/08/2013

Tutorial:Personalizar a área de postagem em HTML/javascrip



Yoo mina o(≧▽≦)o

Bom se eu passasse menos tempo tempo dormindo e mais tempo no blog acho que ele estaria bem de postagens, é serio eu durmo muito '-'
as vezes tento acordar cedo para terminar os Layouts que as minhas amigas pedem para poder fazer muitos e muitas postagens, mas as vez a criatividade também não me ajuda.

Esse tutorial foi a pedido na ask ( ai que emoção, meu primeiro pedido >u<) .

Antes de começar créditos ao blog Portal do Mundo.

Vamos lá?

 Candy Posts Separados

Ele é bem simples não leva nem meia hora do seu tempo, basta adicionar um gadget HTML/javascrip copiar e colar o código, só isso simples neh? 

<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] **/

Beijos da tia kawaii c;


8 comentários:

  1. nossa fica muito lindo, e é mega facil deixar assim.
    acervo-de-livros.blogspot.com

    ResponderExcluir
  2. Ain obrigada pelo tuto, me ajudou muito e ficou muito lindo. Amei seu blog. Dá uma passadinho meu se puder. Ele ainda esta em reforma, repara não. :P XD
    http://mythings2.blogspot.com.br/

    ResponderExcluir
  3. e se eu quiser editar a data como faço tipo colocar como bolinha ? e fica muito lindo

    ResponderExcluir
  4. e se eu quiser editar a data como faço tipo colocar como bolinha ? e fica muito lindo

    ResponderExcluir
  5. ficou muito fofinho *w* amei *w* obrigada mesmo, se puder visitar meu blog... está em reforma ainda ok?
    strawberry-cake-2.blogspot.com.br

    ResponderExcluir
  6. Nossa, eu nem acredito que consegui fazer isso!!!! hahahahaha nao achava um tutorial que me ensinassse direitinho em lugar nenhum! Obrigadaaaaa! ♥♥♥
    http://natalibispo.blogspot.com.br/

    ResponderExcluir
  7. Finalmente encontrei um tutorial super bom de personalizar, nossa ficou lindo, obrigado <3 http://vihpaula.blogspot.com/

    ResponderExcluir

Obrigado por deixar seu comentário ^^
"Por favor respeite o blog"