Shelf secrets: Big Tutorial- Como criar um layout

Hello amoreeees, hoje to aqui para ajudar vocês que são blogueiros e que querem dar um "up" no seu blog. Vou fazer um Big tutorial ensinando vocês a criar um layout(vocês já puderam perceber pelo título, rsrs). Dá um pouco de trabalho mas vale apena. Vamos lá:

1°. Vamos começar pelo modelo. Vá em Modelo > Personalizar e abrirá uma nova janela com o seu blog lá embaixo.

2°. Vá em Modelos > Escolha o Modelo Viagem, depois escolha o modelo Travel azul e branco (o 2°).

3°. Vá para a ala Plano de fundo. Vocês vão ver um quadradinho com uma imagem e embaixo vai estar escrito “Remover imagem”, clique ai! Agora precisamos escolher um plano de fundo bem fofo para seu blog, eu trouxe alguns que eu achei lindos:

O.O O.O O.O O.O O.O O.O O.O O.O O.O O.O O.O O.O O.O O.O O.O O.O O.O O.O O.O

Para colocar o plano de fundo clique em quadradinho azul que está escrito Nenhum > Fazer upload da imagem > Escolher arquivo > Procure o background que você salvou e clique em Abrir > Espere carregar e clique em Concluído.

4°. Vá em Ajustar larguras e deixe o primeiro em 1020 e o segundo em 310

5°. Vá em Layout e deixe assim:

6°. Vá para a ala Avançado > Texto da página > Escolha a fonte de sua preferência (Indico a Arial ou Verdana) > Deixe o tamanho em 13px > Coloque a cor que você quiser (Indico a #666666, #333333, #000000 e #676C7B).

7°. Vá para Planos de fundo > Deixe as 2 transparentes

8°. Vá para Links > Cor do Link (Indico as cores #FF0066, #A482FF, #444444), mas coloque a cor que você preferir! Em Cor de itens visitados e cor de destaque coloque as cores que você quiser!

9°. Vá para Título do blog > Deixe transparente, porque daqui a pouco vamos colocar uma imagem no cabeçalho.

10°. Vá para Descrição do blog > Deixe transparente também.

11°. Vá para Título da postagem > Coloque uma das cores: #ff7bb1, #ff0066, #ff388a, #9800ff ou #c97aff.

12°. Vá para Plano de fundo da postagem > Deixe Branco.

13°. Vá para Texto do gadget > Escolha a fonte Verdana > Tamanho 13px > Escolha uma das cores: #333333, #676c7b, #333333 ou #000000.

14°. Vá para Plano de Fundo da Barra Lateral > Cor do plano de fundo e cor da moldura: deixe transparente.

O resto você pode deixar como quiser mas não mecha no que falta e aonde já editamos.

15°. Agora vá em <<Voltar para o Blogger > Editar HTML > Prosseguir

Agora vamos tirar aquelas ondinhas horríveis que ficam em cima do template.

Dê um Ctrl + F e procure por content-outer .content-cap-top { e apague o que está contornado de rosa na imagem abaixo:

Visualize e se as ondinhas tiverem saído, salve.

Vamos centralizar o título do post.

Dê um Ctrl + F e procure por h3.post-title { e abaixo disso cole text-aling: center;

Que tal um cabeçalho bem bonito?

Clique nesse link e siga passo a passo de como fazer um cabeçalho.

Vamos deixar a barra de rolagem bem bonita.

Dê um Ctrl + F e procure por ]]></b:skin> e antes dessa Tag cole o seguinte código:

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

Agora, modifique como quiser. As instruções estão no código.

Agora vamos tirar a navbar.

Dê um Ctrl + F e procure por <body expr:class='"loading" + data:blog.mobileClass'> e acima disso cole:

<script type='text/javascript'>
<![CDATA[

]]>
</script>

Visualize e se a navbar tiver saído, salve!

Vamos deixar os gadgets super fofos.

Vá em Layout no seu blog > Adicione um HTML/JavaScript e cole este 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>

Agora, modifique como quiser. As instruções estão no código.

Vamos colocar babadinho no blog.

Adicione um gadget HTML/JavaScript > Cole no gadget esse código:

<div style="background-image: url('URL_DO_BABADINHO');background-repeat:repeat-x;top:0;left:0;width:100%;height:50px;z-index:100;position:fixed;"></div> 




Em URL DO BABADINHO cole a URL de algum babadinho. Trouxe alguns pra vocês:



































Agora precisamos deixar os posts fofos também né?





Adicione um gadget HTML/JavaScript e cole um desses códigos:








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







Agora vamos personalizar a navegação do blog(postagens mais antigas,

 início e postagens anteriores).




Clique no link e siga as instruções.



Vamos personalizar os seus blogs parceiros.




Clique no link e siga as instruções.



Vamos personalizar os comentários do seu blog.




Clique no link e siga as instruções.



Vamos tirar o "Assinar postagens(Atom)"




Clique no link e siga as instruções.



Vamos por um menu bem fofo.




Clique no link e siga as instruções.



Agora, pra finalizar. O seu blog precisa 

de um lindo cursor né?




Clique no link e siga as instruções.







Bom meninas, é isso. espero que vocês possam deixar seu blog liiiindo. Em breve postarei mais tutoriais.



Créditos: Chocolovers