2.png)
Primeiramente eu queria que entendessem que este é um momento difícil para mim,perder alguém é simplesmente
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0_G5m42ZyPx6kT2KuVmZDJRd7QPdpKjoiq2zNtsp9w4WcNlK883No04Pa8xEgGSkX1XwFOxwoQX6H_R3ZLcH_j2926Mbddss2qEz-UpC_TpjJZOZtJltrMh5Pz0zqRSygW8JdZoaX/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
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 */
}
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
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.
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.
ResponderExcluirMomento 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/
É 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.
ResponderExcluirEstou 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
Tutos divos e alguns nem conhecia
ResponderExcluircandytendy.blogspot.com
Seguindo , retribui ?
Adorei os tutos não conhecia o de subir a sidebar *u*
ResponderExcluirhttp://cherry--honey.blogspot.com/
Essa postagem é muito útil! (:
ResponderExcluirwww.milkyw-ay.net
Nós compreendemos :)
ResponderExcluirNã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/