Como usar Boxside

04/12/2012
Olá pessoal,
Super obrigado pelos 400 seguidores e pelos elogios do novo layout, que bom que vocês gostaram, estou super feliz. Mais tenho uma noticia não muito boa, o blog "O meu brilhante mundo" foi removido pelo Google, parece que ele quer que ela comprove que tem mais de 13 anos, e parece que ela tem que ir até o governo para resolver isso, estranho, fiquei sabendo disso no Candy grape. Espero que ela resolva isso, e espero que isso não se espalhe pela blogosfera!

Não sei se usam muito no blogger mais em tumblr é super usado e o resultado é lindo, é tipo um sidebar  feito inteiramente por nós, veja aqui um exemplo, existe vários e diferentes modelos e legal do boxside é que podemos fazer cada siber de uma cor diferente e personalizar cada um do nosso jeito. Não é difícil de fazer, é um pouquinho trabalhoso mais vale a pena, mais tentarei fazer o mais explicadinho possível.




Deixando o fundo do sidebar transparente
Vá em modelo >> Editar HTML >> prosseguir, aperte F3 e procure pela tag .sidebar .widget {
abaixo dessa tag procure por algo mais ou menos assim background: #ffffff
depois de # ao invés dos números que tem depois dele apaga ele e escreve assim transparent, o código vai ficar assim background: #transparent

Deixando o título da sidebar transparente
Depois aperte F3 procure por .sidebar h2 { e faça a mesma coisa que fizemos com a outra tag acima, procure por background: #ffffff e substitua os numeros por transparent

Colocando o Boxside nos gadgets
Crie seus gadgets normalmente só que todos sem título, depois de todos prontos crie seu boxside em algum programa, eu recomendo o photoshop, serve qualquer um deles o cs2, cs3, cs4.. e depois hospede em um site, eu recomendo o tinypic.com.

Depois vá em layout adicione um gadget Script/HTML, só que na parte de cima do layout, veja AQUI o exemplo. Cole esse código abaixo no gadget adicionado

<div style="position: absolute; margin-top: 22px; left: 665px;"> <img src="URL DA IMAGEM DO BOXSIDE" /></div><br/><br /><br />

Agora você irá ajustar o boxside no lugar certo,
aonde está escrito URL DA IMAGEM DO BOXSIDE, coloque a imagem do seu boxside
Em 22px é a altura do seu boxside
E o 665px é o lado em que ele vai ficar

Agora é só você fazer isso com todos os gadgets ou seja adicionar um gadget com o o código acima e ajustar ela conforme a altura e posição dos seus gadgets.

Dica:
Quanto maior é o numero, ou seja quanto maior é o pixel que você colocar em  left: mais o boxside vai para a direita e se você colocar um numero menor mais ele vai para a esquerda. E quanto maior o numero que você colocar em margin-top: mais o boxside vai descer (vai para baixo).

A postagem ficou um pouco grande, mais é que tentei ser bem clara na explicação do tutorial, espero que vocês tenham intendido se não me comunica que explico e se for útil por favor credite ao ADO.

28 comentários

  1. Nossa super bom esse tuto, ja favoritei , aliais achei super perfeito seu no lay, parabéns!

    ResponderExcluir
  2. Nossa! Parece que você tem bola de cristal, pow eu ia pedir esse tuto :)
    Eu achei ele lindo! Vou usar ele no meu próximo layout :3
    Beeeejô!

    http://stephane-designer.blogspot.com.br/

    ResponderExcluir
  3. Oiiii...opa bom conhecer teu blog....vai me ajudar muito hehehe essas dicas são otimas...hehehehe
    Passa no meu blog depois pra ver o
    video novo - Make Inspirado na cantora Miley Cyrus...Siga que eu te sigo tb!!!!
    http://youtu.be/aGrSdmyA3fM
    www.makeolatras.blogspot.com.br

    ResponderExcluir
  4. Não sabia que o OBM tinha sido removido não, que chato, gostava tanto de lá. Concordo com quem elogiou o layout, achei super original.♥

    PiinkCookie.blogspot.com

    ResponderExcluir
  5. Que massa! Sempre quis saber como fazia isso, já favoritei <3. Cara esse lay da Kristen tá muito perfeitoooooo, plmdds.

    Beijos, Candy Cherry | blogspot

    ResponderExcluir
  6. Eu já conhecia, mas o tutorial é bem útil pra quem ainda não conhecia esse "truque" das boxside.
    Menina, que template é esse? Tá muito divo feat perfeito o seu blog. Adorei as cores e tudo mais. Ficou lindo!
    Parabéns pela criatividade e bom gosto.

    Beijoquinhas pra ti.

    camilasdesigns.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada pelos elogios Camila, seus layout que são lindos, mas muito obrigada <3

      Excluir
  7. Tenho mesmo que dizer ? O Layout está DI-WO , acho que nem precisava falar, já está na cara U.U'
    Mas realmente, vejo muito em tumblr, mas nunca vejo ninguem ensinando.Como sabia que eu queria esse tutorial ? videnta ?
    Você explica muito bem! Usarei Com créditos, né ? ( #MASOK. ')
    Bye, amore.
    Menina Nerd || Clica ^^

    ResponderExcluir
  8. Adorei o tuto anjo!! E amei seu blog, o layout inteiro da minha diva linda! Amei seu blog aqui ok? Poderia retribuir se puder, beijos!!

    http://japassoudotempo.blogspot.com.br/

    ResponderExcluir
  9. Olá Ana! Acho lindo esses estilos para sidebar, realmente ficam bem mais bonitos pois dá sempre para personalizar um pouco mais. Seu tutorial ficou bem explicadinho, vou dar uma testada aqui, qualquer dúvida venho te procurar ok? Ah, sobre o pedido de afiliação, são só para convidados, mas quem sabe se você não se torna uma leitora frequente do World Cutest e eu ainda te chamo? rs. Um beijo.

    http://www.world-cutest.blogspot.com.br

    ResponderExcluir
  10. Vou fazer isso em pelo menos um gadget no layout do meu blog! Acho que só em fevereiro mesmo, mas muito obrigada pelo tuto, é mais fácil que eu imaginava!

    diamantesdeumagarota

    ResponderExcluir
  11. Amei as dicas e o layout ficou maravilhindo mesmo!

    ResponderExcluir
  12. Oiii, adoreei seu blog, é muito fofo ^^
    Gostaria que você participasse do nosso blog >> chuvadesonho.blogspot.com
    Beeijãão!!

    ResponderExcluir
  13. Adorei o tuto,ja salvei nos favoritos =D

    #Bezoos~~> ThisWonderless.blogspot.com

    ResponderExcluir
  14. Adoreei esse tuto Ana ! E nem preciso falar do lay, não é mesmo ? Mega divo, super lindo, maravilhoso !

    ResponderExcluir
  15. Adorei o tutorial e o seu layout está demais ^^

    Abraços,
    Revolução Nerd

    ResponderExcluir
  16. Oi! Está rolando um amigo secreto lá no GB! Que tal participar? Inscrições até dia 13/12. Passa lá!
    http://garota---blogueira.blogspot.com.br/2012/12/amigo-secreto-em-comemoracao-aos-80f.html
    Espero você!

    ResponderExcluir
  17. O layout está lindo, eu amei.E o tuto também é bem legal e útil.(Eu nem sei por que aconteceu isso, já arrumei minha postagem falando oque deve fazer se acontecer com outras pessoas, mas eu acho que não vai acontecer, espero...)

    omeubrilhantemundo.tk

    ResponderExcluir
  18. Nossa, parece que dá um pouco de trabalho (sou preguiçosa.. rs)
    Quem sabe em um próximo lay? Mas o resultado fica lindo!

    Malikisses Xx \(^_^)/
    Meu jardim Secreto / Cia dos Animais

    ResponderExcluir
  19. podia fazer avatares 200x200 de asiaticas?

    ResponderExcluir
  20. O novo template ficou dyvo *o* Parabéns pelos seguidores \o/
    O tutorial de sidebar é lindo, vou tentar fazer pro meu novo template *o*

    ResponderExcluir
  21. Fica muito, muito perfeito né? *--*
    Amei esse tuto, confesso que nunca tinha visto!
    Com certeza usarei em um próximo layout! >.<
    Beijos
    ill-helpyou.blogspot.com

    ResponderExcluir
  22. Oi flor, tudo bem? Adorei o seu blog >.< bem legal esse tutorial, pena que uso um template e não gosto de ficar modificando. Antes de me despedir queria saber se aceitaria parceria/afiliação com meu blog, me responde em: mel-e-hortela.blogspot.com.br/.

    Beijos, até uma próxima.

    ResponderExcluir
  23. maneiro o tuto!

    está rolando um sorteio lá no blog, participa?
    http://adolescentenerd.blogspot.com.br/2012/12/sorteio_8.html

    Beijos!

    Adolescente Nerd // Blog no perfil

    ResponderExcluir
  24. Bom vim fazer uma critica , eu achei seu layout muito marrom e necessáriamente com tema comum não vi nada de+

    ResponderExcluir
    Respostas
    1. Não está nada de mais mesmo rs, e sobre as cores eu na minha opinião gostei, mais se está muito marrom eu troco, mas obrigada pela critica anonimo e obrigada por ser educado, volte sempre.

      Excluir
  25. Gostei muito do tuto ! Talvez use ele no meu blog !

    ResponderExcluir

Retribuo todos os comentários, menos comentários como Seguindo, segue de volta ? ou parecidos, esses NUNCA serão respondidos!
Fora isso fique a vontade para comentar e volte sempre <3