Como fazer um Layout Básico e Lindo

Oie, aqui é a Sarah postando o primeiro tutorial dela no Sweet. É um tutorial bem útil e que o resultado é lindo. Acabei de postar no http://beauty--dream.blogspot.com.br/ e decidi postar aqui também. Eu queria muito que vocês visitassem, seguissem e comentassem no meu blog. Mas esperar que com o tempo meu blog vai ficar famosíssimo também. Chega de blá blá blá e vamos ao Tutorial.

Obs: Como ficou bem grande, coloquei o Leia Mais, então, Leia Mais!



Retirar as bordas do modelo viagem:
Vá em Editar Html do seu blog, aperte Ctrl+F ou F3 e procure por .content-outer .content-cap-top {  apague tudo, logo abaixo terá o .content-outer { e o .content-inner { apague eles e tudo que tiver abaixo deles, até o }.
No lugar dos três códigos apagados vocês terá que colocar o seguinte código:

.content-outer .content-cap-top {
  height: ;
  background: repeat-x scroll top center;
}
.content-outer {
  margin: 0 auto;
}
.content-inner {
 background: ;
background-position: ;
background-color: ;
}

Visualize e você verá que aquela borda feia foi embora.

Retirar a Navbar do Blogger:
Vá em Layout clique no widget Navbar e selecione a opção desativado. Só isso, fácil, não?!

Retirar Ícones de Edição Rápida que fica nos Widgets:
Vá em Editar Html, e procure por ]]></b:skin> e cole acima o seguinte código:

.quickedit {display:none;}

 Personalizar a Sidebar:
Antes, coloque o fundo da sidebar transparente. Vá em Editar Html, procure por ]]></b:skin> e cole acima o seguinte código:

.sidebar h2 {
font-family: Verdana;
font-size: 18px;
color: #fff;
background: url(http://static.tumblr.com/0xqvkot/oOymcqb2w/4.png) no-repeat center;
height: 35px;
width: 200px;
text-align: center;
text-shadow: 1px 2px 3px #78adf8;
margin-top:-12px ;
margin-left:-25px ;
margin-bottom:12px;
padding:6px;
width:115%;
}

Em font-family coloque a fonte de sua escolha, em font-size o tamanho da fonte, em color a cor da fonte, em background coloque o fundo do título da sidebar. Visualize e Salve!


Personalize o Título dos Posts:
Procure por Posts { abaixo deverá estar assim:

/* Posts
----------------------------------------------- */
h3.post-title {
  margin-top: 20px;
}
h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}
h3.post-title a:hover {
  text-decoration: underline;
}

 Apague tudo e substitua por:

  /* Posts
----------------------------------------------- */
h3.post-title {
  margin-top: 20px; /* espaço entre o título e a margem */
  text-align: center; /* posicionamento do título */
  border-bottom: 2px dotted #eee; /* cor, tamanho e tipo de borda */
  background: #F9F9F9; /* cor do background do título */
}
h3.post-title a {
  font-family: Trebuchet MS; /* fonte do título */
  font-size: 20px; /* tamanho da fonte */
  color: #E9B2C1; /* cor do título em estado normal */
}
h3.post-title a:hover {
  color: #CBDCE9; /* cor do título em estado hover */
  text-decoration: none; /* isso tira a borda do título quando o mouse parar sobre ele */
}

 Personalize do seu jeito, visualize e salve!

Personalizar o Negrito, Itálico e Sublinhado:
Procure por ]]></b:skin> e acima dele cole:

color: #c7c8ca;
text-decoration: none;
}
b:hover {
color: #f4bec1;
text-decoration: none;
}
i {
color: # c7c8ca ;
text-decoration: none;
}
i:hover {
color: # f4bec1 ;
text-decoration: none;
}
u {
color: # c7c8ca ;
text-decoration: none;
border-bottom: 1px dashed #e6e2b3;
}
u:hover {
color: #  f4bec1;
text-decoration: none;
border-bottom: 1px dashed #  f4bec1 ;} 

 Personalize, Visualize e Salve!

Personalizar o Post Footer:
Procure por [[></b:skin>, acima dele cole:

.post-footer-line-1{
border-bottom: 1px solid #b1afa9;
font-size:10px;
}
.post-footer-line-2{
border-bottom: 1px solid #b1afa9;
font-size:10px;
}

Visualize e Salve!

Personalizar o Leia Mais:

Procure por ]]></b:skin> novamente e acima cole:

.jump-link  {
text-align: right;
margin-top: 10px;
margin-bottom: 5px;
}
.jump-link a {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
 box-shadow:inset 0px 1px 0px 0px #ffffff;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
 background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
 background-color:#ededed;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 border-radius:10px;
 border:2px solid #dcdcdc;
 display:inline-block;
 color:#f5679b;
 font-family:arial;
 font-size:13px;
 font-weight:bold;
 padding:6px 10px;
 text-decoration:none;
 text-shadow:1px 1px 0px #ffffff;
}
.jump-link a:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
 background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
 background-color:#dfdfdf;
}

 Personalize, Visualize e Salve!

Personalizar o Attribution:
Primeiro vamos retirá-lo, procure por <b:section class='foot' id='footer-3' showaddelement='
Logo depois disso irá ter um no, substitua-o por yes. Se já tiver escrito yes, não mude nada.
Depois procure por <b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
E substitua true por false. Salve, vá em Layout, clique em Editar o Attribution e terá a opção excluir, exclua. Adicione um novo gadget de HTML / Javascrip e cole:

<div align="center">© Design by <a href="O LINK DO SEU BLOG" target="_blank">Seu nome [Nome do seu blog]</a></div>

 Personalize e Salve! Lembre-se de colocar o widget lá em baixo.

Remover o Assinar: Postagens (Atom):
Procure por ]]></b:skin> e acima coloque:

.feed-links{display:none !important;}

Borda nos Posts:

Procure por .main-inner .column-center-inner { apague tudo que haver abaixo e cole o seguinte código no lugar:

box-shadow: inset 0 0 16px #eee, 0 0 5px #ccc;
border-bottom:6px #faafd0 solid;
  padding: $(content.posts.padding) 0;
} 

 Visualize e Salve!

Colocar Hover nos Links:
Procure por a:hover { e deverá estar assim:

a:hover {
text-decoration:underline;
color: $(link.hover.color);} 

Apague tudo e no lugar cole:

 a:hover {
border-bottom: 1px dashed #suacor;
text-shadow: 0px 0px 6px #suacor;
color: none;
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}

 Personalize, Visualize e Salve!

 Os tutoriais acabam por aqui, ficou bem grande não acham? Espero que tenham gostado, e por favor comentem se usarem. Obrigado, Bjs!!!