Como criar um layout# part. 2

 Hooy criaturas amadas *-*. Bem, hoje eu estava meio que sem nada pra fazer e super entediada. Afinal, hoje é segunda e quem que começa a segunda com pique quando se tem que acordar de 5:30 da manhã ? Enfim, deixando os papos pra lá, eu vou continuar aqui o tutorial sobre como criar um layout. Como eu já falei - E falo de novo só pra te irritar ^^' - tem muita gente que não sabe mexer em layout e acaba fazendo o maior bagaço no blog!Vamos começar porque eu já falei demais.

1º - Vá em modelo>Editar HTML 

Dê Ctrl+F e irá aparecer uma barrinha no topo da tela

Eu tenho super bom gosto pra ler blogs viu? Háhá

Agora cole o seguinte nessa barrinha:

content-outer .content-cap-top {

Depois, apague o que está sublinhado na imagem '-'

( Pra quem não sabe, estamos tirando aquelas ondinhas brancas que ficam em cima )

2º - Vamos deixar o titulo do post centralizado

Ainda no HTML cole na barrinha:  h3.post-title {

E abaixo da parte destacada cole isso: text-align: center;

Cole onde a seta está indicando

3º - Vamos editar a barra de rolagem.

No HTML dê um Ctrl+F e na barrinha em cima cole: ]]></b:skin>

Antes da parte destacada em laranja cole: 

/*** Rolagem da Vertical da Página ***/

::-webkit-scrollbar-thumb:vertical {

background: #ff0f72; /*Cor da barrinha que se move*/

border: 1px solid #bgh; /*Coloque borda se quiser*/

height:50px;

border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

}

/*** Rolagem da Horizontal da Página***/

::-webkit-scrollbar-thumb:horizontal {

background-color:#ff0f72; /*Cor da barrinha que se move*/

border: 1px solid #bgh; /*Coloque borda se quiser*/

height:10px;

border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

 }

/*** Parte fixa da rolagem (fundo que não se move) ***/

::-webkit-scrollbar {

height:10px;

width:15px; /*Largura da barra de rolagem*/

 background: #000000; /*Cor da parte fixa, que fica no mundo*/

border: 1px solid #bgh; /*Coloque borda se quiser*/

}

Para quem não entende essas coisas de editar esses textos, é muito simples usem esta tabela de cores : Tabela de Cores e onde tem esses textos dizendo por exemplo, Cor da barrinha que se move,  exclua a cor ( essa Aqui! ) e substitua por uma que você gostar na tabela de cores. Continuando...

4º - Personalizando os comentários

Bem pessoal, essa parte aqui eu tirei do blog Chocolovers, que eu agradeço muito mesmo por ter me ajudado tanto nos tutoriais e em tudo que eu presciso ( é um blog muito bom mesmo, recomendo que visitem Aqui! ) Continuando com o tutorial, créditos ao ChocoLovers.

No HTML  de um Ctrl+F e cole na barrinha : /* Comments e abaixo disso vai ter um código +ou- assim :

/* Comments----------------------------------------------- */#comments a {  color: $(post.title.text.color);} .comments .comments-content .icon.blog-author {  background-repeat: no-repeat;  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);} .comments .comments-content .loadmore a {  border-top: 1px solid $(post.title.text.color);  border-bottom: 1px solid $(post.title.text.color);} .comments .comment-thread.inline-thread {  background: $(post.background.color);} .comments .continue {  border-top: 2px solid $(post.title.text.color);}

Abaixo disso cole :

/**======================================================================

AREA GERAL DOS COMMENTS========================================================================**/@font-face {font-family:'Fugaz One';font-style:normal;font-weight:400;src:local('Fugaz One'),local('FugazOne-Regular'), url('http://themes.googleusercontent.com/static/fonts/fugazone/v3/foh--NswBHNPbRHy7yEyyD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff')} .comments{width:99% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */margin:0 auto;font-style:normal !important;font-size:12px !important; /* TAMANHO DO TEXTO - se ficar pequeno, aumente os pixels */font-family:verdana !important; /* FONT DO TEXTO - se preferir troque */background:#fff url(https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcRH32JrBue783v9_ivzFvoenOigRer_6lnVV6O5BwolQxvq-N8eWw) /* IMAGEN DO FUNDO */}  /**=======================================================================HEADING DOS COMMENTS (1 comentario, 2 comentários...)========================================================================**/ .comments h4{width:98%;padding:7px;margin-bottom:10px;background: #FF69B4; /* COR DO FUNDO - se preferir troque */

color: #FFFFFF; /* COR DO TEXTO - se preferir troque */

font-family:'Fugaz One' !important;/* FONT-FAMILY - se preferir troque */font-size:20px ; /* TAMANHO DO TEXTO - se preferir troque */text-shadow:0 1px #fff;box-shadow:0 2px 3px #000000/* EFEITO SOMBRA */

} /** ==================================================================BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...)====================================================================**/ 

.comments .comment-block {position:static !important; /* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */background: #FF1493 !important; /* COR DO FUNDO */

padding:0.5em 1em;border-radius:5px !important;box-shadow:inset 0 1px 4px #aaa !important /* EFEITO FUNDO REBAIXADO*/} .comments .comments-content .comment {padding:20px 10px !important;margin-bottom:15px !important} /* estilos para o nome do autor do comentário */.comments .comments-content .user a{font-style:normal;border:0;margin-left:10px;color: #00FFFF !important;

text-shadow:0 1px #fff;font-family:'Fugaz One';background:none;padding-left:0} /* estilo da data */.comments .comments-content .datetime a{background:none;float:right;font-size:9px;color:#fff;} /* estilo do avatar */.avatar-image-container {min-width:60px; /* determina um minimo de largura */min-height:60px; /* determina um minimo de altura */border:5px #f7b solid; /* borda */border-radius:35px/10px; /* arredondamento */padding:0 !important;box-shadow:0 0 3px #ccc; /* sombra */margin-left:6px !important;margin-top:-1px !important;background:#fff;overflow:hidden /* hack para evitar serrilhado na imagem */} .avatar-image-container img {opacity:1.0; /* opacidade */margin:0;display:block;max-height:60px;min-height:60px;max-width:60px;min-width:60px;padding:0 !important;border-radius:35px/10px; /* arredondamento */overflow:hidden;border:0 !important;overflow:hidden /* hack para evitar serrilhado na imagem */}   /** ==================================================================TEXTO DO COMENTÁRIO====================================================================**/ 

.comments blockquote{background:transparent !important;border:0 !important;font-style:normal !important;font-size:12px !important;font-family:arial!important;text-shadow:0 0 !important;padding-left:20px !important;color:#777} /** ==================================================================BOTÕES - RESPONDER, EXCLUIR====================================================================**/ 

/* botao responder do segundo nível */.comments .continue a {float:right;padding:2px 4px!important;height:23px;line-height:23px !important;margin-top:-45px !important;text-shadow:0 0 none !important} /* botao responder do primeiro nível, mais estilos para o botao do segundo nível */.comments .comment .comment-actions a,.comments .continue a {font-size:11px !important;color: #FFD700 !important;

padding:3px 6px;border:0 !important;line-height:30px;margin:5px;margin-left:10px;font-family:trebuchet;text-shadow: 0 1px #fff !important;border-radius: .5em;box-shadow: 0 1px 2px rgba(0,0,0,.2);background: #ffe;background: -webkit-gradient(linear, left top, left bottom, from(#ffe), to(#ff1))!important;background: -moz-linear-gradient(top, #ffe, #ff1)!important;} /* botao hover*/.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {text-decoration:none !important;padding:6px} /* botao excluir */.comments .comment .item-control a{color:#fff !important;background: #48D1CC;

background: -webkit-gradient(linear, left top, left bottom, from(#f7a), to(#f9e)) !important;background: -moz-linear-gradient(top,#f7a,#f9e) !important;} /* estilos para bloco de respostas */.comments .comment-thread.inline-thread {background-color:transparent !important} .comments .comments-content .comment-replies {margin-top:1em;margin-left:56px !important} .comments .continue {border-top:0 !important} .comments .thread-toggle,.icon.blog-author {display:none !important} /** ==================================================================BONUS - estilos para formatação do texto dos comments====================================================================**/ 

.comments .comments-content a{background:#fee url(http://i4.photobucket.com/albums/y121/carolzits/dandara/free/mini_gifs/page4/PAGE4_34.gif)no-repeat left;color:#DF6699;padding-left:15px;padding-right:3px;border:1px #fff dashed;font-weight:400}.comments .comments-content em{background:#fee;font:normal 12px 'segoe script';color:#ff1490}.comments .comments-content strong{background:#fff;font:normal 12px 'consolas';color:#000;display:block; border:1px #eee dashed}.comments .comments-content b{font-weight:800;color:#DF6699;text-shadow:0 1px #ccc}  /** ==================================================================Fim [by Gabriela// http://depoimentoseperfis-prontos.com]====================================================================**/ 

Edite do mesmo jeito com a ajuda da Tabela De Cores.

5º - Vamos organizar os Gadgets

Vá em layout > Adicionar Gadget >Adicione um HTML/JavaScript e cole o código :

<style>

/**PERSONALIZAÇÃO DA SIDEBAR BY CANDYLLAND**/

.sidebar .widget {

width:100% !important;

background:#fff;

margin:10px 0 !important;

border-top:10px #ff1490 solid;

border-radius:0 0 10px 10px;

padding:10px;

box-shadow: inset 0 0 20px #eee, 0 0 3px #ccc;

overflow:hidden

}

.sidebar .widget h2 {

background:#fee /** COR DO FUNDO DO TITULO **/;

color:#f9b /** COR DO TITULO **/;

font-size:17px /** TAMANHO DO TITULO **/;

text-shadow:0 1px #ddd /** SOMBRA DO TITULO **/;

margin-top:-10px /** MARGIN **/

margin-left:-9px /** MARGIN **/;

margin-bottom:10px /** MARGIN **/;

padding:5px;

width:107%;

overflow:hidden

}

/** FIM DA SIDEBAR BY [www.candylland.net]**/

</style>

Use a tabela de cores e modifique a sua preferência!

6º- Modificando os posts - Tutorial todo retirado do ChocoLovers - 

Adicione um gadget HTML/JavaScript e cole o seguinte código :

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

Não é necessário modificar nada.

7º - Clique aqui para tirar o Assinar Postagens ( Atom )

8º - Clique aqui para colocar um novo cursor 

Enfim amores, é isso, espero que tenham gostado qualquer dúvida é só comentar

Lembrando : Créditos ao ChocoLovers ^^' Beijinhos até mais!