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*/
}
::-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='"loading"
+ data:blog.mobileClass'> e acima disso cole:
<!-- Navbar-->
<script type='text/javascript'>
<![CDATA[
<!--
/*<body>*/
-->
]]>
</script>
<!-- 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 blogAdicione um gadget HTML/JavaScript > Cole no gadget esse código:<divstyle="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: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&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&callback=totalComments"></script></td></tr></tbody></table></div><!-- CANDY SOCIAL WIDGET FIM [www.candylland.net] -->Agora vamos 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>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!
Nossa é bem interessante para iniciantes e para quem não entende muita coisa de HTML como eu por exemplo rsrss!
ResponderExcluirQue bom que gostou Ra! '----'
ExcluirVou tentar fazer!
ResponderExcluirBeijos
Neversaynever-believe.blogspot.com.br
Nossa, muito bom!!!!
ResponderExcluirAjudou 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
Ameiii fiz quase tudo no blog que eu criei!!
ResponderExcluirMuito bom esse tutorial pra quem quer fazer um blog bonito e não sabe (como eu).
queridodiariotosco.blogspot.com
Amei, amei! Ajudou bastante no meu blog, o Lay ficou muito cute.
ResponderExcluirEu pensava que nunca ia conseguir fazer igual e graças a vocês eu consegui :3
http://tutoriais-rhay280.blogspot.com
OLá;
ResponderExcluirComecei 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
Adoreeiii muito booom, ajudou muitooo!!
ResponderExcluirCriei o blog hoje e gostaria de saber se aceita afiliação?
Beijoooos
http://caramelocommorango.blogspot.com.br/
Oiie gostei muito do post mais eu nao consegui adiciona gadget HTML/JavaScript entao nao consegui finalizar meu blog poderia me ajudar??
ResponderExcluirOii eu sei como , quer que eu lhe ajude ?
ExcluirAmeeeeei, 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!
ResponderExcluirObrigada pela ajuda, beijos *-*
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
ResponderExcluirGaabi , será que tú pode ensinar como coloca outra forma da "setinha" do mouse .. P O R F A V O R ! <3
ResponderExcluirÉ , eu só não entendi muito como faz pra por o babadinho :c
ResponderExcluirMuito obg pelo tutorial, usei ele em um blog que estou fazendo agora.
ResponderExcluirBeijos,
www.flowerofcupcakes.blogspot.com
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 ?
ResponderExcluirUsei ele e amei!!! Já estou seguindo o blog!!! Paarabééns!
ResponderExcluirhttp://universofeminino-uf.blogspot.com.br/
Esse é meu blog!
Ount amoor ' Obrigada pelas dicas , foram muito uteis !
ResponderExcluirTo criando meu proprio layout
Só falta eu fazer meu cabeçalho u.ú
sahhsuA'
meninas-e-derivados.blogspot.com
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.
ResponderExcluirSinceramente eu amei! Usei no meu e as dicas me serviram muito! Continue com seu trabalho, beijos ! *-*
ResponderExcluirMuito obrigada mesmo por ter feito esse tutorial,me ajudou bastante
ResponderExcluirNo meu Html não aparece assim :s
ResponderExcluirjá não sei o que hei de fazer, porque no meu não aparece igual ao vosso :s
vai si fude , olha o tamanho saporra
ResponderExcluirPrimeiramente, 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
ExcluirPerfeito *--* Meu blog ta novinho em folha, agora !!!!!
ResponderExcluirAmei, parabens !!!
Ótimo tutorial, me ajudou muito obg *-*
ResponderExcluirhttp://queridasfadas.blogspot.com.br/
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? :)
ResponderExcluirBjs pessoas Lindas
http://nabolsabatom.blogpost.com.br/
Blog perfeitoo,me ajudou muito!!Thank
ResponderExcluirMARAVILHOSO! Vc explicou tudo direitinho! Amei, meu blog ta pfto agra!
ResponderExcluirAmei o tutorial, me ajudou bastante, então obrigada. <3
ResponderExcluirsampensou.blogspot.com
Obrigada pelas dicas ^-^ Aceita afiliação?
ResponderExcluirhttp://menina-do-oculos-vermelho.blogspot.com.br/
Beijos
Aceito sim , me coloca lá que te coloco aqui
Excluir