Alô brothers , tudo bem com vocês ?! Aqui ta tudo "BEM" . Hoje estarei trazendo um tutorial de como personalizar a área de posts. É um tutorial um tanto básico , mas eu me lembro que no início do blog ( desse não , quando comecei esse já era mais cascudo ) seria muito interessante e útil se alguém me desse isso grátis.
Pensando nisso
LET'S ? Ah , e antes que eu me esqueça este tutorial serve apenas para pessoas que utilizam o modelo viagem . Talvez você ache os códigos se souber , mas aviso logo para você não ficar que nem um louco procurando o código no editor. Então somente viagem. Vamos lá ?
Abra seu editor HTML ( indo em Modelo > Editar HTML ) pressione Ctrl+F e procure por /* Posts Depois selecione desde h3.post-title { até .post-body { e substitua por um dos códigos dos modelos que preferir , são três então tem bastantes opções. Tudo que pode ser alterado , estará em negrito. Se pintar alguma dúvida , é só comentar que eu respondo . Nos códigos há explicações , só para constar.
Modelo 1

<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'/>
Código :
/*personalização da área de posts por bigodeaparte.blogspot.com*/
/* Posts
h3.post-title { border-bottom: 1px solid #A8DBA8; } /*borda , defina espessura , forma e cor*/
h3.post-title a { font-family: Poiret One; font-size: 36px; color: #033649; } /* parte referente a postagem na página iniciao */
h3.post-title a:hover { text-decoration: none; color: #A8DBA8;} /*hover*/
.post-outer { background: #fff; padding-left: 5px; padding-right: 5px;
padding-top: 5px; padding-bottom: 5px; color: #031634; } /*referente ao "corpo" do post*/
.post-outer a:link { color: #3B8686; } /*links presentes no post*/
.post-body { } /*deixa vazio*/
Procure por <head> e cole o código abaixo , em baixo de <head>
<link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'/>
Modelo 2
Código :
/*personalização da área de posts por bigodeaparte.blogspot.com*/
/* Posts
h3.post-title { font-family: 'Grand Hotel', cursive; text-transform: capitalize; font-size: 24px; color: #fff; text-align: center; background:#542437;} /*borda , defina espessura , forma e cor*/
h3.post-title a {font-family: 'Grand Hotel', cursive; text-transform: capitalize; font-size: 24px; color: #fff; text-align: center;}
h3.post-title a:hover {text-decoration: underline;}
.post-outer {background: #fff; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; color: #2e151f; }
.post-outer a:link { }
.post-body { }
Para instalar a fonte no blog , procure por <head> e cole o código abaixo , em baixo de <head>
<link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'/>
Modelo 3
/* Posts
/*personalização da área de posts por bigodeaparte.blogspot.com*/
h3.post-title {font-size: 18px; color: #fff; text-align: left; padding: 5px; background:#000; }
h3.post-title a { font-family: 'Arvo', serif; text-transform: uppercase; font-weight: 300; font-size: 18px; color: #fff; text-align: left;}
h3.post-title a:hover {text-decoration: underline;}
.post-outer { background: #fff; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;}
.post-outer a:link {}
.post-body {}
Para instalar a fonte no seu blog , procure por <head> e cole o código abaixo em baixo de <head>
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'/>
Espero que usem os modelos , e que tenham gostado "