20/01/2013

Tutorial: Ribbons determinados em cada gadget

||

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.

19 comentários:

  1. Mundo das Ruivas20/1/13

    eu estava precisando ^^

    ResponderExcluir
  2. Anônimo20/1/13

    Lindo seu blog muito kawaii

    ResponderExcluir
  3. Drw posta como colocar esse bonequinho do ren no blog?

    ResponderExcluir
  4. Talvez eu usarei no próximo layout,
    http://kawaii-little-things.blogspot.com.br

    ResponderExcluir
  5. Estava procurando , vou usar ! E vai para os favoritos !

    ResponderExcluir
    Respostas
    1. Fico contente que tenha lhe servido. Hehe

      Excluir
  6. Drw, tem uma tag no meu blog para você ^^"
    http://ohhip.blogspot.com.br/2013/01/yoo-pequenos-pandas-estou-meiga-hoje.html
    Kissus~~

    ResponderExcluir
    Respostas
    1. Obrigada ^^ ate amanha irei postar aqui no blog

      Excluir
  7. AAAAinnn eu não consigo de jeito nenhum fazer isso ja tentei varias vezes masi nada acontece na primeira parte edepois quando tem que pesquisar .sidebar .widget { não aparece nada eu não sei o que fazerme ajuda peloamordedeus
    Vsita meu blogeconversamos por la por favor!!!!
    http://mirabolantespensamentos.blogspot.com.br/

    ResponderExcluir
  8. Respostas
    1. Não poxa... qual erro ocorreu?

      Excluir
  9. Não acho o /* Mobile -.-

    ResponderExcluir
    Respostas
    1. Oi linda então procura por ]] não tem erro ou então fa do modo mais fácil. Arruma a faixinha ai abre o gadget que quer que ela fique, dentro dele cole esse código:

      <(d(i)v) style="margin-left: -11px; margin-top: -35px;">

      Bem em cima de todos os outros ai é só arrumar a posição dele certinha.
      margin-top: -35px subir e descer é so ir mudando os números.
      margin-left: -11px ir mais para o lado, já ta certinho mas dependendo do tamanho da faixa que usar terá que arrumar também.

      Espero ter ajudado desculpe a demora para responder. Ae remova os () da palavra (d(iv) i(m)g o chato do blog aceita enviar pelos comentários.

      Excluir
  10. Amei,já vou colocar no meu blog,mas o código do gadget é gigante daquele jeito mesmo?Assustei quando eu colei em cima de ]]> O.o

    ResponderExcluir
    Respostas
    1. Coloca sim, ficara lindo! Sim ele é grandinho assim mesmo ^^

      Excluir
  11. Sempre da errado comigo,fia cortado ou sla pq?
    http://testeblogcy.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ela fica cortada porque você não configurou o código para o tamanho de sua faixinha. Fica no width: 310px; height: 55px; desse 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; }

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram