 |
| ooi :3 ~Hooy amores,tudo bem com vocês ? Espero que sim. Bom depois de alguns dias sem postar nada (devido a minha falta de tempo ¬) Trouxe hoje um tutorial muito bacana de como colocar ribbons em cima do título dos Gadgets. Pra quem não sabe ribbon é isso aqui: |
Vamos arruma-ló para que fique assim no título do seus Gadgets:
Não é um tutorial difícil mas precisa de um pouco de atenção para funcionar corretamente.Estarei postando alguns Ribbons já prontos no final da postagem para facilitar. Mas claro que você pode fazer o seu e hospedar em algum site.Então quer ver o tutorial completo? Clique em Leia Mais !
1. Primeiro de tudo você precisa saber o ID de cada gatget do seu blog. Como assim ? Simples.Basta você procurar o trecho referente a sidebar do seu template. Segue abaixo o código da sidebar do lado DIREITO e do lado ESQUERDO.
sidebar à direita: <b:section-contents id='sidebar-left-1'>
sidebar à esquerda: <b:section-contents id='sidebar-right-1'>
2. Procurando por um dos códigos você achará algo semelhante a isso:
 |
| (clique para ampliar a imagem) |
O trecho em laranja é referente ao código da sua sidebar , os códigos dentro do tracejado são os IDs dos gadgets.
Copie no bloco de notas os IDs dos gadget que você vai colocar os Ribbons. (Eu por exemplo usei des do Gadget de busca até o gadget dos seguidores.)
O ID de cada gadget estará assim entre as aspas, COPIE APENAS ISSO !
 |
| (clique para ampliar a imagem) |
3. Feito isso Vá no editor HTML do seu template e procure por:
h2 {
4. Acima disso cole o seguinte código:
#IDdoGadget h2 { background:url(link-da-faixa)no-repeat; width:229px; height:43px; margin-top:-5px; margin-left:-40px; margin-bottom:0; color:transparent; }
Para cada gadget que você for colocar uma ''faixinha'' você irá usar esse código. A única coisa que você deve alterar é o ID do gatget e o link da sua faixinha. Como assim ? Você terá que ter uma faixinha para cada gadget,por exemplo: Uma faixinha para seguidores,outra para perfil etc.
Antes de mostrar como deve ficar,vou mostrar a explicação de como você deve personalizar o código.
link-da-faixa: Coloque o código da faixinha que irá usar.
height: é a altura.
margin-top: é o espaço entre a faixa e topo da sidebar. Valor negativo = diminue o espaço, valor positivo = aumenta o espaço.
margin-left: é o espaço à esquerda da faixa, deve ser alterado se necessário. Se quiser a faixa mais para a esquerda, diminua o valor; para posicioná-la mais a direita, aumente.
( Na minha sidebar eu apenas alterei o valor de margin-left: que está em 40px,para 50px você terá que ir alterando e visualizando pra ver se fico certinho)
5. Deverá ficar assim:
 |
| (clique para ampliar a imagem) |
Pronto é só visualizar e ver se seu Ribbon se encaixou certinho na sidebar ! Vá alterando os valores até dar certo, mas acredito que apenas mudando o margin-left: dê certo. Se estiver tudo certo salve e pronto !
Não é difícil né ? Só tomar cuidado para não se embananar com os IDs rs'
Espero que tenham entendido D
Ribbons prontos:
3 comentários:
Otimo Tutu ... <3
não achei meu HTML :/
Depois de uma semana tentando vários tutorias, já estava desistindo. E o seu tutorial salvou o meu layout :) Obrigada.
Fiz minhas próprias ribbons, mas não sabia como usar.