Tutoriais que usei no blog #2


Essa é a segunda parte de personalização do blog,vamos primeiro mudar algumas coisas na parte de Layout e aí partiremos para o HTML :)
**ESSA É A SEGUNDA PARTE DOS TUTORIAIS QUE USEI NO BLOG,SE VOCÊ AINDA NÃO VIU A PRIMEIRA PARTE,CLIQUE AQUI**

Vá em Layout e vamos descobrir mais sobre o blog :)
Em Favicon você muda o símbolozinho do Blogger que aparece nessa parte de cima,é só colocar em Editar e Salvar o que você preferir,se precisar de sugestões aqui tem algumas
           

Agora,você precisa desabilitar a Navbar é que aquela aba de pesquisa e algumas funções do Blogger,é muito limitada e não ajuda em nada kkkk então vamos tirar

Vá em Editar>Desativado e Salve
Na parte do Cabeçalho você pode colocar uma imagem feita por você,é só colocar em Imagem>Do seu computador e Em vez de título e descrição

Espere carregar e salve(a imagem usada no cabeçalho deve ter em torno de 1000x315 se você usar a medida que eu usei na primeira parte)
Também recomendo retirar a parte do Perfil,é só clicar nela e excluir,porque vamos usar outro tutorial para ela.
Sem mais delongas,vamos a parte do HTML :D
Clique em Modelo>Editar HTML
Você vai encontrar algo assim
Para começar a editar você precisa ter a noção geral de cada parte do seu blog,por isso,clique nesses três pontinhos entre os skin e você vai ver tudo que precisa :)
Para o seu blog ser 100% exclusivo você pode alterar a parte indicada abaixo
Dê um nome,escreva o seu como Designer e coloque a URL do seu blog.
Agora,já que você está aqui,vamos facilitar a sua vida,para achar todos os tópicos que eu vou mostrar aqui é só apertar Ctrl F no seu teclado e irá surgir uma caixa de pesquisa,nela você vai digitar tudo que eu mostrar e vai achar bem mais fácil do que indo linha por linha.
Para começar procure por .content-inner
É lá que vamos tirar aquela cor preta que havia ficado no layout

Troque o $ por transparent e salve,assim você verá que preto da área de postagem sumiu.
Agora,para tirar a parte preta dos gadgets é só ir em .main-inner .fauxcolumn-right-outer .fauxcolumn-inner { e mudar o $ por transparent também.
Depois disso feito você pode começar com os tutoriais mais simples.
Área de Postagens
Para arrumar a área de postagem e deixá-la separada dos gadgets você vai em .main-inner .column-center-outer { 
E vai trocar tudo isso .main-inner .column-center-outer {
  background: $(post.background.color) $(post.background.url) repeat scroll top left;
  _background-image: none;
}
Por isso
.post-outer {
margin: 5px 10px 15px;
background:#fff;
padding: 10px 10px;
}

E sua área de postagem vai estar assim 
Agora vamos à área da sidebar,onde ficam os gadgets
Primeiro vá em /* Widgets
----------------------------------------------- */
.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0; 
E abaixo disso cole
background: #fff;
Por último vá em /* Headings,de h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}
Troque por 
.sidebar h2 {
border-bottom: 1px solid #FFC0CB;
text-align: center;
font-size: 21px;
color: #B03060;
padding-bottom: 10px;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 8px;
font-weight: normal;
font-family: 'Arial', sans-serif;
}
 Depois salve,agora a parte dos gadgets vai estar assim 

Para personalizar a parte do Título das Postagens vá em /* Post
E substitua os três primeiros h3.post-title 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: 3px 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: 26px; /* 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 */
}

E Salve,vai ficar assim
Esses são os tutoriais principais,agora,para personalizar ainda mais vou deixar a lista dos outros tutoriais que vocês podem precisar e são simples :)

Esses são os tutoriais que eu usei no meu blog,alguns extras para vocês,porque fui testando um e outro e vendo qual ficava melhor,espero que tenham gostado e que usem :D
Qualquer dúvida ou pedido de tutorial é só falar,vou tentar fazer um tema bem básico para disponibilizar para vocês,mas isso vem em breve :)
Beijos 

CONFIRA TAMBÉM ⬇

4 comentários

  1. Oi, Jenny...
    Gosto muito dessas postagens em que você mostra para o pessoal que está começando ou até para aqueles eu precisam mudar algo, mas não sabem o passo a passo de tudo, uma ótima ideia e atitude da sua parte. ♥

    ResponderExcluir
    Respostas
    1. Oie Cami ♥
      Eu tinha tantas dúvidas no começo que é bom poder ajudar as pessoas :D
      Obrigada pelo apoio ♥
      Beijos ^.^

      Excluir
  2. Oi Jenny!
    Cara, adoro postagens desse estilo porque elas sempre me tiram alguma dúvida sobre pequenos detalhes que eu não consigo resolver, sabe?
    Tive bastante dificuldades para arrumar o novo layout do blog e imagino que blogueiras novatas também tenham, então posts como esse ajudam muito muito muito! ❤️

    http://makingcolorfilm.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Pois é Emilly,eu tbm sempre fico buscando aprender mais sobre detalhes no blog e quando puder trago por aqui :D
      Obrigada ♥
      Beijos ^.^

      Excluir

Obrigada por ter lido a postagem
Conte-me o que achou *--*
Deixe seu link nos comentários para que eu possa retribuir a visita <3
Se preferir para deixar seu link use
Esse código para comentar