03 dezembro 2013

Personalizando o Blog Pt. 2


Primeiramente eu queria que entendessem que este é um momento difícil para mim,perder alguém é simplesmente destroçante e gostaria que tivessem um pouco de paciência comigo durante alguns dias... Voltando ao nosso tutorial (Para quem perdeu,passe aqui) onde eu falei e dei dicas sobre o Cabeçalho e a área de postagens,hoje o assunto será diferente, veremos um pouco mais sobre a personalização dos gadgets.

Para quem gostou do Tutorial da área de postagens e gostaria de colocar tudo combinando,já pode começar a dar pulinhos por que ru trouxe o mesmo efeito,só que agora na área dos gadgets! Quer aprender?

  • Modelo Pink Kawaii para Gadget
Se você não acompanhou o outro tutorial,comece com isso:
- Vá em Modelo - Personalizar - Avançado - Deixe os planos de fundo transparentes (Barra Lateral)
- Mais uma vez em Avançado, e clique em Adicionar CSS, depois cole:
/* Pink Kawaii by comentariosde1garotaqualquer.blogspot.com.br
---------------------------------------------------- *//**area geral dos widgets**/
.sidebar .widget {
background: #fff;
margin: 10px 0;
width: 240px;
padding: 0 0 5px 0;
border-bottom: 5px solid #fcc; 
color: #a1a1a1;
border: 6px dashed #fee;
padding: 4px;
}
/**titulos dos widgets**/
.sidebar .widget h2 {
background: #fcc;
width: 240px;
font-family: 'Milonga', cursive;
font-size: 20px;
color: #fee;
text-shadow: 1px 2px 3px #fcc;
border-bottom: 10px solid #eeffff;
}
/**estilos das listas**/
#sidebar ul {
 list-style: none;
 margin:0 0 10px 0;
 padding:0;
}
.sidebar ul li {
 list-style: none;
 margin: 0;
 padding: 0;
 border-bottom:1px dotted #C1C1C1;
    padding: 0 0 4px 12px;
    background: url("http://3.bp.blogspot.com/-edd6RlHEe_s/TnO4PIymJzI/AAAAAAAABv8/XLoXHiXnQyE/s1600/mini-153.gif") no-repeat 0 2px;
}
/**links**/
.sidebar .widget a:link {
  color: #fcc;
  text-decoration: none;
}
.sidebar .widget a:visited {
  color: #fcc;
}
.sidebar .widget a:hover {
  color: #fee;
  text-decoration: none;
border-bottom: 1px dotted #fcc;
}

- O bom é que a visualização é automática e você pode alterar as cores e ver como fica, depois disso clique em ''Aplicar ao Blog''. Volte para Modelo e em editar html procure por <head> e abaixo dele acrescente o link da fonte abaixo:
<link href='http://fonts.googleapis.com/css?family=Milonga' rel='stylesheet' type='text/css'/>

  • Título dos gadgets numerado
Se você tem facilidades com editores,essa parte vai ser mamão com açúcar, nela tem que fazer uma faixa para cada gadget. Também podem pegar modelos prontos no Tumblr ou em blogs e depois é só colocar os nomes e os números.
Depois de editar ou fazer suas faixas do tamanho do seu gadget, hospede suas imagens em algum lugar, recomendo o Tinypic (www).
- Agora vá em "Modelo" → "Editar HTML", procure pelo título do seu gadget, por exemplo "Afiliados", aqui está assim:
<b:widget id='HTML1' locked='false' title='Afiliados' type='HTML'/>
Em itálico, é o título do gadget que eu quero personalizar, em negrito é o ID do gadget que eu vou personalizar, cada gadget tem um ID diferente. Cole o ID que você encontrar, no bloco de notas, pois vamos precisar dele.
Agora procure por ]]></b:skin>, acima dessa tag, cole o código abaixo

#ID_DO_GADGET h2 {
background: url('URL_DA_FAIXA') no-repeat; /* faixa numerada */
color: transparent;
width: 266px; /* largura da faixa */
height: 63px; /* altura da faixa */
margin-top: -30px; /* margem do topo */
margin-left: -15px; /* margem da esquerda */
float: left; /* alinhamento */
}

Em ID_DO_GADGET coloque o ID que você colou no bloco de notas, isso define qual gadget você quer personalizar. Em URL_DA_FAIXA, cole a url da faixa que você hospedou anteriormente. O resto tá explicado no próprio código.
Repita a operação para cada gadget. No final, visualize e, se estiver tudo certo, salve.

  • Subir a sidebar
- Vá em Modelo → Editar HTML → Prosseguir
Se você usa a sidebar do lado direito, procure por
.main-inner .column-right-inner {Se você usa a sidebar do lado esquerdo, procure 
por .main-inner .column-left-inner {Depois da chave de uma dessas tags, coloque: margin-top: -45px;

Pronto, sua sidebar vai estar mais pra cima, ajuste de acordo com a sua vontade.


  • Colocando imagem no Gadget
Código:

<center><img src="http://static.tumblr.com/tk5mvj5/5TQmw6gk5/2.png" /></center>
Continuo com a área de comentários e o rodapé, beijos. 

6 comentários:

  1. Gostei muito de aprender a "subir a sidebar" :D Eu sempre quis aprender isso ^^ Muito obrigada pela dica. O gadgets numerados também são uma boa dica. Vou tentar fazer para o meu futuro blog... tentar x.x Obrigada mais uma vez.
    Momento off post. Nossa, fiquei realmente encantada com o layout novo. Ficou DIVO demais! As combinaram demais. Esta de parabéns! :D Ah, agradecer pelo bebê fofo nos favoritos *-* Nossa que vontade de aperta-lo ^^
    Beijinhos
    http://1cantinhomeu.blogspot.com.br/

    ResponderExcluir
  2. É muito triste perder alguém. quanto mais próximo mais vazia você fica por dentro. Nós te entendemos e vamos respeitar esse momento, e se precisar pode contar conosco.
    Estou amando esse big tutorial, o modelo do gadget é muito lindo *-*!
    Uma dúvida, essa imagem que você usou para o exemplo de subir a sidebar, ela é de algum antigo lay aqui do blog? Porque achei muito lindo, sério!
    Estante de Sonhos

    ResponderExcluir
  3. Tutos divos e alguns nem conhecia
    candytendy.blogspot.com
    Seguindo , retribui ?

    ResponderExcluir
  4. Adorei os tutos não conhecia o de subir a sidebar *u*

    http://cherry--honey.blogspot.com/

    ResponderExcluir
  5. Essa postagem é muito útil! (:

    www.milkyw-ay.net

    ResponderExcluir
  6. Nós compreendemos :)
    Não se esqueça de visitar os novos posts do blog e de deixar um comment!!
    Beijos
    http://fashion--and--you.blogspot.pt/

    P.s. apenas queria avisar que quando aparece o meu blog nos afiliados, o link está mal. É
    http://fashion--and--you.blogspot.pt/ e não http://fashion--and-you.blogspot.pt/

    ResponderExcluir