17.12.12

Tutorial- Como por ribbons



Boa noite gente!

Trouxe à pedido um tutorial de como colocar as ribbons do post anterior (anterior ao anterior). A pessoa não especificou qual modo ela queria, porque existem dois: um que é o de objeto flutuante, onde você coloca ribbon por ribbon, e ela é inteiramente feita por você. Essas são as boxides. O outro jeito é de colocar normalmente as ribbons, onde só a base é feita por você, o escrito é por conta do blogger. Vou ensinar ambos os jeitos. Para ver o tutorial, clique em leia mais!




Primeiramente vou ensinar a colocar as ribbons, que, como já disse, são aquelas faixinhas que todo mundo conhece, sem nada escrito. Exemplo:



O escrito é por conta do blogger mesmo. Para coloca, procure no seu HTML por /*mobile Antes de body.mobile coloque:


.sidebar .widget h2{
background: url(URL DA IMAGEM)  no-repeat left;
margin-top:-2px;
margin-left:-10px;
margin-bottom:0px;
padding:15px;
width:150%;
overflow:hidden;

 Edite o margin-left até que sua faixinha fique no lugar certo. Visualize e se estiver tudo certo salve. Pronto! Esse é o modo 1. Já no modo 2 são as as boxisdes, que, como já disse, são mais um objeto flutuante, onde ela é totalmente feita por você em algum programa, como o Photoshop. Exemplo:


Assim, existe uma para cada gadget. Depois que você fizer todas elas, siga os passos para colocar:

Antes de mais nada, vá em editar em modelo>personalizar, e lá vá em Avançado> Cor do título do gadget e deixe em transparente e tamanho da fonte 0px. Agora, adicione um gadget de HTML/javascrip e cole isso:

<div style="position: absolute;z-index: 10000; margin-top: 810px; left: 611px;"><img src="URL DA IMAGEM" /> </div>

Depois, ajuste o  margin-top e o left até que sua ribbon fique no lugar certo. Faça isso com todas as imagens. Pronto! Esse dá mais trabalho, mas na minha opinião fica melhor.

10 comentários:

  1. Oi amora!
    Vim aqui te encher o saco mais uma vez!
    Eu não tenho Ps e ai eu acho que não vou achar uma fonte bonita e que combine para colocar no cabeçalho!
    Então eu queria pedir para você inscrever o nome Crazy in HTML no cabeçalho da Bu! E me enviar por e-mail (tifhi-tify@hotmail.com). Sei que é muito para pedir e eu to abusando, mas você poderia?
    Se não puder vou entender!
    Bjs

    ResponderExcluir
  2. ahh eu acho lindo ribbons, mas no meu layout não ia dar certo! rs
    backlash7.blogspot.com

    ResponderExcluir
  3. acho ribbons lindas. E eu queria muito fazer algumas que prestassem, mais eu faço no Inkscape e elas ficam muito apagadinhas e sem efeitos, e meio feinhas. HSUAUSHAU

    ResponderExcluir
  4. Eu não conhecia o tutorial das boxisdes. Talvez eu use ^^
    www.blogmagiateen.net

    ResponderExcluir
  5. Nem conhecia esse tuto, vou usar no lay ano novo do blog.


    Tô te seguindo, convido-te a visitar o meu blog.
    http://garotadilemablog.blogspot.com.br/
    Beijos, Laris!

    ResponderExcluir
  6. Obrigada , tava precisando mesmo...
    Um beijo ;3

    ResponderExcluir
  7. Esse tutorial é muito útil ^^
    Poderia postar algumas boxsides igual aqui?
    Eu não fazê-las então seria de grande ajuda
    Kissus :3

    html-for-you

    ResponderExcluir
  8. Muito bom o tutorial ! (:
    http://www.paaradateen.com

    ResponderExcluir
  9. Bárbara.. É o seguinte eu faço as boxsides, coloco tudo certinho.. Mais quando eu vou vizualizar a BoxSide fica por cima, tipo se for os afiliados.. Ela fica por cima das imagens, eu abaixo no HTML, e continua lá.. Não sei oque fazer ://

    ResponderExcluir