Sidebar

Como por uma imagem diferente em cada titulo do gadget 2 maneiras

Se inscreva para fazer parte da Equipe do KT aqui

~~Yo!

To sumida né?. Ando muito viciada em programas de variedades no youtube, e ando muito viciada em BTOB, novidade isso -sqn.. mais vou postar com mais! amém! kkk

Me pediram um tutorial, que eu já havia passado aqui no Kawaii Things, mais eu realmente senti necessidade de refazer o post, porque da outra vez que eu fiz... o KT não tinha muitos seguidores, nen muitos leitores então, vim trazer o tuto que me pediram na ask *--* 

Lets go!

O primeiro modo, eu aprendi no Birthday Cake, créditos a eles pelo tutorial..

1. Primeiro modo, usando o ID

Vá no teu HTML eprocure pelo título do seu gadget. Por exemplo, o gadget de "bem vindo ( mais está welcome na faixinha ) ", o meu está assim:

<b:widget id='HTML4' locked='false' title='bem vindo' type='HTML'/>

A parte em negrito é a ID do gadget ( é essa parte que vc irá copiar )  e em itálico é o que você achou ao procurar o título do seu gadget. Copie o ID e agora procure por ]]></b:skin> e logo acima você vai colar esse código:

#IDdoGADGET h2 { background: url('LINK DA FAIXA') no-repeat; color: transparent; width: 310px; height: 75px; margin-top: -30px; margin-left: -35px; float:left; }

Aonde está em negrito você vai trocar pela ID do gadget, e em itálico, é a URL da imagem, ou faixinha, ( voce pode por imagens diferentes em cada gadget não tem problema ), você tem que repetir esse tutorial diversas vezes para aplicar em todos, colocando ID's e imagens de cada gadget

 Agora você deve procurar por .sidebar .widget { e dependendo do seu HTML, deve estar mais ou menos assim: 

.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
}

Apague esse código por completo e coloque esse no lugar: ( obs : altere os numeros para ir configurando, suas ribbons ( faixinhas) )

.sidebar .widget {background: #fff;padding-left: 10px;padding-bottom: 10px;padding-right:10px;padding-top: 5px;margin: 30px 0; } 

Vá vizualisando até que de certo , e salve...

 2. Modo, usando apenas java script

Use esse tutorial (x)

Mais em vez de usar a box side, use as suas imagens.. hehe *--*

Bom é isso..

Kissus espero que tenham gostado do tutorial, e se inscrevam para postar aqui no blog *--*

Xaaauu

domingo, janeiro 20, 2013

TUTORIAL: RIBBONS DETERMINADOS EM CADA GADGET

₪ Shodö de: Wendy Chan || || ₪

Ohayooo pessoal da madrugada, venho trazer um tutorial rapidinho antes de mim ir dormi, mentira vou ver anime. Mas em pedido de uma nova blogueira quis fazer isso rapidinho, ela pediu para divulgar o nome do blog dela ainda bububu...mas em pedido de Melissa irei mostrar como colocar ribbons (faixinhas) em determinados gadgets. Ou seja, colocar faixinhas diferentes em cada gadget do blog, podendo colocar imagens diferente ou aquelas numeras. Não deu para tirar um print e nem colocar em blog de amostra, mas irei colocar o endereço do demo do meu novo layout assim que eu o terminar.
Eu já tinha um tutorial similar, mas eu apenas mostrei como modificar a cor, formato e fonte de cada gadget. Caso queiram ver aqui esta. Mas vamos ao tutorial agora, né?

Antes de tudo quero lembrar que você tem que fazer um ribbon (faixa) para cada gadget.
Vá ate seu HTML e procure pelo título de seu gadget. Um exemplo, o título do seu gadget e "Wellcome" então pegue esse nome e usando o atalho Ctrl+F procure por ele. Você encontrara algo similar a isso:

<b:widget id='HTML1' locked='false' title='Wellcome' type='HTML'/>

A parte que destaquei em negrito é a ID e em itálico é o nome do seu gadget. Lembrando que em determinados gadgets os IDs são diferentes, quando é de imagem entra apalavra 'Image1' quando é seguidores entra 'Followers1' e por ai vai. Mas agora copie o ID de seu gadget e separe ele, então procure por ]]></b:skin>, e acima dele adicione esse código:

#IDDOGADGET h2 { background: url('URL DE SUA FAIXA') no-repeat; color: transparent; width: 310px; height:55px; margin-top: -10px; margin-left: -25px; float:left; }

Onde esta IDDOGADGET coloque o ID que pegou antes, onde esta "url de sua faixa", basta colocar o link de sua faixinha. As medidas já estão certinhas para um gadget tamanho padrão, mas caso  mais para cima ou para baixo basta meche nas partes em itálico. Então salve e vamos para o próximo passo.

Ainda dentro de seu HTML, procure pelo trechinho abaixo:

.sidebar .widget {

Dependendo do modelo que você  usa vai desta forma:

.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
}

Então apague toda ela e coloque este no lugar:

.sidebar .widget {
background: #fff;
padding-left: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-top: 5px;
margin: 30px 0;
 }

O modelo acima esta em fundo branco simples, caso você queira com um detalhe, coloque essa aqui:

.sidebar .widget {
 border-bottom: 2px solid $(widget.border.bevel.color);
 padding-bottom: 10px;
 margin: 10px 0;
 border-top: 5px solid #621E85;
 padding-bottom: 20px;
 margin: 10px 0;
 background: #fff;
 padding:12px;
 box-shadow: inset 0 0 15px #eee, 0 0 3px #ccc;
}

Bom ai esta espero que vocês gostem, caso tenham alguma dificuldade e só falar que eu ajudo, esta bem? Me desculpem se tem muitos erros de português na postagem, estou morrendo de sono e na esperança de ver um anime antes de dormi rsrs mas ate aproxima bunnys.