Personalizando o Blog Pt. 2
Autor: Biia Martins | Publicado: 2013-12-03T18:03:00-03:00





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&nbsp;&lt;head&gt; e abaixo dele acrescente o link da fonte abaixo:

&lt;link href='http://fonts.googleapis.com/css?family=Milonga' rel='stylesheet' type='text/css'/&gt;





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:


&lt;b:widget id='HTML1' locked='false' title='Afiliados' type='HTML'/&gt;
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 ]]&gt;&lt;/b:skin&gt;, 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&nbsp;→ Editar HTML&nbsp;→&nbsp;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&nbsp;

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:


&lt;center&gt;&lt;img src="http://static.tumblr.com/tk5mvj5/5TQmw6gk5/2.png" /&gt;&lt;/center&gt;

Continuo com a área de comentários e o rodapé, beijos.&nbsp;