Como criar layout para blogger

Olá pessoal,vou fazer um re-post daqui do blog de como criar um layout mas não vou modificar nada,é que o nome estava muito grande pra vocês acharem dai eu diminui o titulo agora hehehe.

Atenção! esse post é bem antigo talvez terá um novo tutorial,você pode baixar layouts editáveis de graça clicando aqui

Olá leitores queridos!
Hoje vou ensinar a você a criar  seu próprio template sem muito trabalho '33'
eu tinha criado um template dai resolvi deixar o código para vocês! EEEBAA! ,vou deixar o código do template prontinho e é só você modificar depois,beleza?? 
Ah,você pode hospedar suas imagens no site imgur.com ...

 O Layout é bem assim mas você poderá modificá-lo completamente...  

Código do layout (xml) download:
coloque o arquivo em modelo > fazer backup/restaurar
 MEGA 
 4Shared 

Código do menu:
cole isso em layout e adicione um gadjet html/javascript

<style>
#menu{
float: left;
width:960px;
height:40px;
background: #feccb1; /* Old browsers */
background: -moz-linear-gradient(top,  #feccb1 0%, #f17432 50%, #ea5507 51%, #fb955e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feccb1), color-stop(50%,#f17432), color-stop(51%,#ea5507), color-stop(100%,#fb955e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=0 ); /* IE6-9 */
}

#menu ul{
margin: 0;
padding:0;
list-style:none;
}
#menu ul li{
float: left;
}

#menu ul li a{
color:#FFF;
list-style:none;
text-decoration:none;
padding:15px;
display:block;
}
#menu ul li a:hover{
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
height:10px;
}
</style>

<div id ="menu">

<ul>

<li><a href="http://estruturablog.blogspot.com.br/">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Promoções</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Comprar</a></li>
<li><a href="#">Sorteios</a></li>
<li><a href="#">Dicas</a></li>
<li><a href="#">Ajuda</a></li>

</ul>
</div>

Código da Data:

cole isso em layout e adicione um gadjet html/javascript

<style>
#data{
background: transparent;
color:#aeaeae;
font:arial;
padding-top:15px;
}
</style>

<div id="data">

<div style="font-weight: bold; font-size: 13 px; font-family:verdana;">Hoje é <script language="JavaScript">
hoje = new Date()
dia = hoje.getDate()
dias = hoje.getDay()
mes = hoje.getMonth()
ano = hoje.getYear()
if (dia < 10)
dia = "0" + dia
if (ano < 2000)
ano = 1900 + ano
function NArray (n)
{
this.length = n
}
NomeDiaWMOnline = new NArray(7)
NomeDiaWMOnline[0] = "Domingo"
NomeDiaWMOnline[1] = "Segunda-feira"
NomeDiaWMOnline[2] = "Terça-feira"
NomeDiaWMOnline[3] = "Quarta-feira"
NomeDiaWMOnline[4] = "Quinta-feira"
NomeDiaWMOnline[5] = "Sexta-feira"
NomeDiaWMOnline[6] = "Sábado"
NomeMesWMOnline = new NArray(12)
NomeMesWMOnline[0] = "janeiro"
NomeMesWMOnline[1] = "fevereiro"
NomeMesWMOnline[2] = "março"
NomeMesWMOnline[3] = "abril"
NomeMesWMOnline[4] = "maio"
NomeMesWMOnline[5] = "junho"
NomeMesWMOnline[6] = "julho"
NomeMesWMOnline[7] = "agosto"
NomeMesWMOnline[8] = "setembro"
NomeMesWMOnline[9] = "outubro"
NomeMesWMOnline[10] = "novembro"
NomeMesWMOnline[11] = "dezembro"
document.write (NomeDiaWMOnline[dias] + ", " + dia + " de " + NomeMesWMOnline[mes] + " de " + ano)</script></div>

</div>

Código do rodapé:

cole isso em layout e adicione um gadjet html/javascript

<style>
#rodape {
background:#000;
color:#fff;
padding-top: 30px;
widht: 960px;
height:60px;
}
</style>
<div id="rodape">
Todos Os Direitos Reservados. 2013
| <a href="http://www.grandestutos.blogspot.com/">Grandes Tutos</a> |</div>

E.. para melhor visualização,coloque os gadjets assim:

E por ultimo,retirar o texto do seu cabeçalho

(Visualização)

Para retirá-lo,ou você adiciona uma imagem no lugar do texto no layout ou simplismente

vai em modelo>editar html clica no campo de código aperte ctrl + F e busque por:

<div id='header-wrapper'>

e aonde está escrito:

b:widget id='Header1' locked='true' 

no 'true' você troca para 'false'

depois clica em layout vai no cabeçalho e em editar e exclui ele.

E para deixar as sidebars alinhadas,caso vir tortas,como nessa imagem:

Para deixar alinhado,vá para layout,cique editar em Postagens no blog e desmarque a caixa da data ou coloque a data em baixo da postagem ou personalize a data e coloque ela do lado do título do post ...

Simples né ??! HAHA espero que tenha ajudado! agora é só editar e personalizar o template pessoal ... Ah obrigado pela visitinha !!!

 BEIJÃÃÃÃÃÃÃÃÃÃÃÃÃÃÃÃÃÃÃÃO!