29 de jul. de 2012

Big Tutorial - Como criar um layout


Heey amorecos, eu aqui de novo!! Vim agora postar um Big Tutorial como vocês puderam ver no título. Vou ensinar vocês à fazerem um layout. Espero que gostem e 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°).

4°. 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 vamos escolher um plano de fundo bem fofo para seu blog. Eu trouxe alguns para vocês, os mais fofos que encontrei:


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.

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

6°. Vá em Layout e deixe assim:

        

7°. 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).

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

9°. Vá para Links > Cor do Link (indico as cores #FF0066, #A482FF, #444444), mais coloque a cor que você quiser! Em Cor de itens visitados e cor de destaque coloque as cores de sua preferência!

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

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

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

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

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

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

O resto vocês podem deixar como quiserem o que falta e o que editamos não mecha. Vá em Aplicar no blog 

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

            Vamos tirar aquelas ondinhas feias que ficam encima 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-align: center;

                            Vamos fazer um cabeçalho bem bonito

Clique nesse link e siga todas as instruções de como fazer um cabeçalho


                     Vamos deixar a barra de rolagem mais 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 é só você alterar como quiser. As instruções estão todas no código.

                                Vamos tirar agora a navbar


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

 <!-- Navbar-->
<script type='text/javascript'>
<![CDATA[
<!--
/*<body>*/
-->
]]>
</script>
<!-- Navbar-->

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



                          
                                           Vamos deixar os gadgets bem 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>
 
Modifique como quiser e salve!



      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. Alguns pra vocês:


 Candy Babadinhos (cortininhas no blog)
 Candy Babadinhos (cortininhas no blog)
 Candy Babadinhos (cortininhas no blog)
 Candy Babadinhos (cortininhas no blog)
 Candy Babadinhos (cortininhas no blog)
 Candy Babadinhos (cortininhas no blog)
 Candy Babadinhos (cortininhas no blog)
 Candy Babadinhos (cortininhas no blog)
 Candy Babadinhos (cortininhas no blog)
 Candy Babadinhos (cortininhas no blog)
 Candy Babadinhos (cortininhas no blog)
      Agora vamos colocar um widget para você colocar suas redes sociais
 
Adicione um Gadget HTML/JavaScript e cole o seguinte código:
 
<!-- CANDY SOCIAL WIDGET INICIO -->
<div class="social"><script type="text/javascript">// < ![CDATA[
function totalPosts(json) {
document.write('<b>' + json.feed.openSearch$totalResults.$t + '');
}
function totalComments(json) {
document.write('<b>' + json.feed.openSearch$totalResults.$t + '</b>');
}
// ]]></script>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr><!-- RSS -->
<td valign="top" width="65">
<p align="center"><a title="Assine o Feed" href="http://feeds.feedburner.com/NOME_DO_FEED"> <img src="URL_DA_IMAGEM" alt="Assinar Feed" /></a> Assinantes
<strong><script type="text/javascript" src="http://ferramentasblog.com.br/twitter/twitter-feedburner.js"></script><script type="text/javascript">// < ![CDATA[
 xfeedburner("NOME_DO_FEED") 
// ]]></script></strong></p></td>
<!-- TWITTER -->
<td valign="top" width="65">
<p align="center"><a title="Siga no Twitter" href="http://twitter.com/SEU_USUÁRIO_TWITTER"> <img src="URL_DA_IMAGEM" alt="Seguir no Twitter" /></a> Followers
<strong><script type="text/javascript" src="http://www.ferramentasblog.com.br/twitter/twitter-php.php?usuario=SEU_USUÁRIO_TWITTER"></script></strong>
</p></td>
<!-- FACEBOOK -->
<td valign="top" width="65">
<a title="Curta no Face" href="URL_FAN-PAGE_FACEBOOK"> <img src="URL_DA_IMAGEM" alt="Curtir" /></a> Fas 
<strong><script type="text/javascript" src="http://codigosblog.net/servidor/contadorfacebook/facebook.php?id=ID_DA_SUA_FAN_PAGE"></script></strong></td>
<!-- POSTS -->
<td valign="top" width="65">
<p align="center"><img title="Artigos Publicados" src="URL_DA_IMAGEM" alt="Artigos publicados" /> Posts
<script type="text/javascript" src=" /feeds/posts/default?alt=json-in-script&amp;callback=totalPosts"></script>
</p></td>
<!-- COMENTARIOS -->
<td valign="top" width="65">
<img title="Comentarios recebidos" src="URL_DA_IMAGEM" alt="Comentarios recebidos" /> Comentarios
<script type="text/javascript" src=" /feeds/comments/default?alt=json-in-script&amp;callback=totalComments"></script></td>
</tr>
</tbody>
</table>
</div>
<!-- CANDY SOCIAL WIDGET FIM [www.candylland.net] -->
 
Atenção!
1- É preciso ter uma conta ativa do Feedburner (Para ativar o contador, vá ao painel do FeedBurner, clique no menu Publicize >> FeedCount e, no final, salve e ative)
2- Para saber a id da sua fan page Acesse sua página de fãs no Facebook e clique em GERENCIAR >> Editar pagina >> visualize o url na barra do navegador, o numero final é a sua ID
Alguns ícones:
 Candy Social widget Candy Social widget Candy Social widget Candy Social widget Candy Social widget
 Candy Social widget Candy Social widget Candy Social widget Candy Social widget Candy Social widget
 Candy Social widget Candy Social widget Candy Social widget Candy Social widget Candy Social widget
 Candy Social widget Candy Social widget Candy Social widget Candy Social widget Candy Social widget
 Candy Social widget Candy Social widget Candy Social widget Candy Social widget Candy Social widget
 Candy Social widget Candy Social widget Candy Social widget Candy Social widget Candy Social widget
 Candy Social widget Candy Social widget Candy Social widget Candy Social widget Candy Social widget
 Candy Social widget Candy Social widget Candy Social widget Candy Social widget Candy Social widget
        Agora vamos deixar os posts fofos também né?
 
Adicione um gadget HTML/JavaScript e cole um desses códigos:

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


Vamos personalizar a navegação do blog (postagens mais antigas, início e postagens anteriores    
 Clique no link e siga todas as instruções.
     
   Vamos personalizar seus afiliados
Clique nesse link e siga todas as instruções
                 Vamos personalizar os comentários do blog
Clique nesse link e siga as instruções.
Vamos tirar o “Assinar postagens (Atom)”
Clique no link, e siga todas as instruções
Que tal um menu bem fofo?
 Clique no link
                    Agora o seu blog precisa também de um cursor fofo né?
Clique no link
Bom gente é só isso! Se vocês quiserem podem procurar outros tutoriais aqui no blog. Créditos ao Candy LLand e Cherry Bomb. Tutorial feito por mim, com base em alguns tutoriais do CL e do CB. Espero que seja útil e beijoos!

32 comentários:

  1. Nossa é bem interessante para iniciantes e para quem não entende muita coisa de HTML como eu por exemplo rsrss!

    ResponderExcluir
  2. Vou tentar fazer!
    Beijos
    Neversaynever-believe.blogspot.com.br

    ResponderExcluir
  3. Nossa, muito bom!!!!
    Ajudou bastante, só que eu acho que os backgrounds você deveria colocar mais deles, tipo, separados em estilos (grilie, candy, rocker, kawaii, teen...). Só uma sugestão!

    Beijocas!
    www.segredoirrevelado.blogspot.com

    ResponderExcluir
  4. Ameiii fiz quase tudo no blog que eu criei!!
    Muito bom esse tutorial pra quem quer fazer um blog bonito e não sabe (como eu).

    queridodiariotosco.blogspot.com

    ResponderExcluir
  5. Amei, amei! Ajudou bastante no meu blog, o Lay ficou muito cute.
    Eu pensava que nunca ia conseguir fazer igual e graças a vocês eu consegui :3

    http://tutoriais-rhay280.blogspot.com

    ResponderExcluir
  6. OLá;

    Comecei a seguir o passo a passo
    deste post. Alterei o plano
    de fundo, mas quando entro
    no blog aparece rapidamente
    o novo e volta o velho.
    Você pode me ajudar?
    Ficaria muito grata.

    Mel

    melmarqques@gmail.com

    ResponderExcluir
  7. Adoreeiii muito booom, ajudou muitooo!!
    Criei o blog hoje e gostaria de saber se aceita afiliação?

    Beijoooos

    http://caramelocommorango.blogspot.com.br/

    ResponderExcluir
  8. Oiie gostei muito do post mais eu nao consegui adiciona gadget HTML/JavaScript entao nao consegui finalizar meu blog poderia me ajudar??

    ResponderExcluir
    Respostas
    1. Oii eu sei como , quer que eu lhe ajude ?

      Excluir
  9. Ameeeeei, fiz um layout assim no meu blog de testes pra ver como ficava e gostei tanto que to pensando em por no blog original kk!

    Obrigada pela ajuda, beijos *-*

    ResponderExcluir
  10. Voce está me ajudando muito,muito mesmo! Adorei o blog! Eu sou nova nessa coisa de postadora então muito obrigada mesmo pela ajuda. =3 bjinhuus

    ResponderExcluir
  11. Gaabi , será que tú pode ensinar como coloca outra forma da "setinha" do mouse .. P O R F A V O R ! <3

    ResponderExcluir
  12. É , eu só não entendi muito como faz pra por o babadinho :c

    ResponderExcluir
  13. Muito obg pelo tutorial, usei ele em um blog que estou fazendo agora.
    Beijos,
    www.flowerofcupcakes.blogspot.com

    ResponderExcluir
  14. Valeu , mais eu to com um probleminha , ow , eu coloquei os babadinhos so que agora eu troquei de templante ai eu ñ consigo mais tirar , me ajuda ?

    ResponderExcluir
  15. Usei ele e amei!!! Já estou seguindo o blog!!! Paarabééns!
    http://universofeminino-uf.blogspot.com.br/
    Esse é meu blog!

    ResponderExcluir
  16. Ount amoor ' Obrigada pelas dicas , foram muito uteis !
    To criando meu proprio layout
    Só falta eu fazer meu cabeçalho u.ú
    sahhsuA'
    meninas-e-derivados.blogspot.com

    ResponderExcluir
  17. Oie. Bom, eu to usando o novo blogger e na parte de tirar as ondinhas eu não to achando o código no meu HTML. Você poderia me ajudar.

    ResponderExcluir
  18. Sinceramente eu amei! Usei no meu e as dicas me serviram muito! Continue com seu trabalho, beijos ! *-*

    ResponderExcluir
  19. Muito obrigada mesmo por ter feito esse tutorial,me ajudou bastante

    ResponderExcluir
  20. No meu Html não aparece assim :s
    já não sei o que hei de fazer, porque no meu não aparece igual ao vosso :s

    ResponderExcluir
  21. vai si fude , olha o tamanho saporra

    ResponderExcluir
    Respostas
    1. Primeiramente, mais respeito cmg, não sou amiga sua e não te dei liberdade dee mandar eu me fudeer! Se vc nãao gostou, sinto muito, fecha , sai do meu blog, e se é grande é sinal qq é um bom tutorial. Então, se enxerga antes de vim faalar palavrãao no meu blog affz

      Excluir
  22. Perfeito *--* Meu blog ta novinho em folha, agora !!!!!
    Amei, parabens !!!

    ResponderExcluir
  23. Ótimo tutorial, me ajudou muito obg *-*

    http://queridasfadas.blogspot.com.br/

    ResponderExcluir
  24. Eu tiro o "Assinar Postagem:(Atom)" de um jeito bem mais rápido e fácil (nem precisa mexer no HTML. em breve ensinarei aq no meu blog dá uma visitinha? :)
    Bjs pessoas Lindas
    http://nabolsabatom.blogpost.com.br/

    ResponderExcluir
  25. Blog perfeitoo,me ajudou muito!!Thank

    ResponderExcluir
  26. MARAVILHOSO! Vc explicou tudo direitinho! Amei, meu blog ta pfto agra!

    ResponderExcluir
  27. Amei o tutorial, me ajudou bastante, então obrigada. <3

    sampensou.blogspot.com

    ResponderExcluir
  28. Obrigada pelas dicas ^-^ Aceita afiliação?
    http://menina-do-oculos-vermelho.blogspot.com.br/
    Beijos

    ResponderExcluir

Yoo cherry, espero ter gostado do post. Se quiser comentar, fique a vontade, mais antes siga estas regrinhas:

- Não aceito comentário "Seguindo, segue de volta?"
- Não fale palavrões.
- Criticas são bem vindas, desde de que sejam criticas objetivas.
- Deixe o seu blog, talvez eu queira vê-lo.
- Aceito tags e selinhos.

Espero que sigam as regras que são bem importantes.