Tutoriais que usei no blog #2
10:00
**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 */
}
----------------------------------------------- */
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 
4 comentários
Oi, Jenny...
ResponderExcluirGosto 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. ♥
Oie Cami ♥
ExcluirEu tinha tantas dúvidas no começo que é bom poder ajudar as pessoas :D
Obrigada pelo apoio ♥
Beijos ^.^
Oi Jenny!
ResponderExcluirCara, 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/
Pois é Emilly,eu tbm sempre fico buscando aprender mais sobre detalhes no blog e quando puder trago por aqui :D
ExcluirObrigada ♥
Beijos ^.^
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