• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

11 de março de 2013

Pedido - Fazendo um Layout

Tumblr_mj9ftg7ojb1rik4sbo1_r1_500_large
Hooý chocolates com amora, tudo bem?
Tivemos um pedido na ask do blog:
Irei ensinar a fazer um layout com esse modelo do blogger- Travel:
 Escolha o verde (o primeiro da lista)
 Vamos lá?!

1- Retirando o fundo transparente do blog:
(céditos x)

Vá em seu HTML e procure por: 

content-outer .content-cap-top {

Depois apague conforme a imagem:

2- Retirando transparência dos gadgets:
(créditos x)

 Vá em seu HTML e procure por:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

(se for retirar a transparência do lado direito)

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

(se for retirar a transparência do lado esquerdo)

Procurando, você achará, mais ou menos isso:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
  margin-left: $(content.padding);
  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;}

Apague o que está em negrito.

3- Retirando o "Assinar postagens atom"

Vá em seu HTML e procure por:

]]></b:skin>

e acima, cole:


.feed-links {
height:0px;
visibility:hidden;
display:none} 

4- Retirando Attribution:

Vá em seu HTML e procure por:

Attribution

você encontrará mais ou menos isso:

<!-- outside of the include in order to lock Attribution widget -->
      <b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

Em negrito, troque por yes;
 Em Itálico, troque por false.

Agora vá em Layout e procure pelo gadget "Atribuição" e exclua.

5- Criando área de créditos:
(créditos x)

Vá em seu HTML e procure por:

]]></b:skin>

Cole acima:
#footer-wrapper { background:  #efe4d6 ; /*** cor do fundo ***/ background-repeat: no-repeat; z-index: 1000; height: 20px; /*** Altura da barra ***/ clear: both; font-size: 90%; /*** tamanho da fonte ***/ color: #fff; /*** cor da fonte ***/ text-align: center; /*** alinhamento da fonte ***/ padding: 5px; }
Para mudar a cor, clique aqui
Agora procure por:
</body>
e acima cole:
<div id='footer-wrapper'><div id='footer-wrapper'>Designer por <a href='Link do seu nome'><b>Seu Nome </b></a> | Tecnologia do <a href='http://blogger.com'>Blogger</a> | Todos os direitos reservados &#169; 2012</div></div>
6- Retirando o sublinhado dos links:
Vá em seu HTML e procure por:
a:hover {
você encontrará:
a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}
Troque o negrito por none.
Para retirar dos gadgets, procure por:
.sidebar .widget a:hover {
e troque o underline por none.
7- Retirando o sublinhado do título da postagem e centralizando:
Vá em seu HTML e procure por: 
h3.post-title a:hover {
troque o underline por none.
 Agora procure por:
.post-title {
e cole abaixo:
text-align: center; 
8- Juntando gadgets com a área de postagem:
(créditos x)
Vá em seu HTML e procure por: 
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
(se for a direita)
e apague:
margin-left: $(content.panding)
ou
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
(se for a esquerda)
e apague:
margin-right: $(content.panding);
(centralizando título do blog)
9- Personalizando área dos comentários:
(retirando verificação de palavra dos comentários)
Vá em seu HTML e procure por:
comments
e substitua o:
background: 
por:
background: url(link da imagem de fundo) repeat;
10- Retirando a navbar:
Vá em Layout e procure pelo gadget "Navbar" e clique em desativar.
Resultado:
Preview
(Nele eu coloquei uns links de outras personalizações caso você precise)
Espero que tenham gostado.

21 comentários:

  1. Bem útil......
    Vi seu comentário no meu blog
    ( mycuteplacee.blogspot.com)
    Vou falar para a minha amiga , não tem problema nenhum :) realmente não tinha pensado que a quantidade de plágios poderia aumentar, com certeza ela vai entender! Obrigada pela atenção! Bjjs

    ResponderExcluir
  2. Bem útil e super bem explicado adorei MUITO BOM MESMO!

    jovenclube(.blogspot.com.br)

    ResponderExcluir
  3. Super útil, está bem explicadinho!

    Beijos
    crazyforhtml.blogspot.com

    ResponderExcluir
  4. Bem útil!Adorei as explicações!
    Kisses.

    ester-macedo.blogspot.com

    ResponderExcluir
  5. Minha flor desculpe, você perguntou sobre sua filiação com nosso blog, me desculpe mesmo, o blog está passando por uma transição, vamos mudar o nome, então como deu pra notar, trocamos s Layout a pouco tempo, e ainda falta por muita coisa no lugar, e por isso que ainda não tem a lista minha linda, mas pode deixar que estamos organizando tudinho, não se preocupe!

    ResponderExcluir
  6. Ótimo post Megan *--* eu já tenho a prática de não consultar tutoriais para fazer o layout base, antes eu usava o do KW mas depois eu decorei os códigos e bastava eu pegar os do layout anterior e fazer algumas modificações ;3 também é uma ótima dica né? Beijos, até mais!

    ResponderExcluir
  7. isso é muito bom , ajudar o proximo

    > quaseprincipa

    ResponderExcluir
  8. ótimo post, eeeeeeeeeeeeeeeeiiiiiiiiiiiiiiiiiiii quero postar aqui, como é que eu faço????

    dear-madness.blogspot.com

    ResponderExcluir
  9. Bem util! Amei o post! ganhou mais uma seguidora :3

    ResponderExcluir
  10. Adoreiiii,muito bem explicado, vou tentar fazer ^.^

    ResponderExcluir
  11. Adorei. Tentei fazer um, mas saio horrível, mesmo assim vou tentar outra vez! ^^

    ResponderExcluir
  12. Muito bom, mas acho que você se esqueceu de uma coisa: ensinar a colorir o fundo da sidebar e da área da postagem. Me perdoe se estiver errada ^^

    Kissus da Any :3
    http://sou-uma-adolescente.blogspot.pt/

    ResponderExcluir
  13. Oi,vi seu comentário no meu blog,estou retribuindo a visitinha!
    Até mais,gostei do seu blog!
    Kissus!

    http://mycuteworld-mcw.blogspot.com.br/

    ResponderExcluir
  14. Este comentário foi removido pelo autor.

    ResponderExcluir