27/06/2013

MDT #4: Reposicionando conteúdo dos gadgets no Blog

"Se não formos corajosos, não seremos livres." - Glenn Ford.
Hey guys, be ok? I'm fine. Bom, deixando meu ótimo inglês de lado, vamos dá continuidade a Maratona de Tutoriais do Blog, porém antes, gostaria de pedir desculpas por não ter postado ontem, passei o dia inteiro no facebook divulgando o grupo que criei para os Arianators (que inclusive, ta ficando super legal, quem quiser entrar, só clicar AQUI). Lembro também que hoje, tocarei em um casamento e por isso acho que não terei tempo de responder os comentários da postagem anterior, espero que entendam!
Bom, creio que o tutorial de hoje seja bem útil, vamos aprender de uma forma muito prática, como reposicionar os gadgets (ou o conteúdo deles, tanto faz), pelo Blog. Quem não consegue entender dessa forma, é só pensar em um cabeçalho cheio de conteúdo tipo: Players, About, Menu, etc. Preparados?

Eu me lembro, que quando fiz isso pela primeira vez, utilizei um tutorial que achei em um blog que não me lembro. Na época era bastante trabalhoso, então, pesquisei bastante e criei um código que não precisa está no Painel de HTML do Blog, é direto pelo conteúdo do Gadget.
Você só precisa adicionar o código abaixo, antes do conteúdo que deseja reposicionar no Blog:
<div style="position: absolute; margin-top: 0px; left: 0px;">
Não se esqueça de mudar o que está em Itálico, certo?
E o código abaixo, depois do que deseja reposicionar no Blog, só pra fechar mesmo:
</div>
Se ainda está difícil de entender, veja um exemplo bem prático. Digamos que eu queira colocar um Player no Cabeçalho do meu Blog, cujo o código é esse:
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=http://dc645.4shared.com/img/3538338152/634342e2/dlink__2Fdownload_2FknaYuiUq_3Ftsid_3D20130627-173000-eaae9739_26dsid_3D2mz0o8.4683edeefc995e9899ca3df9bf2336c7/preview.mp3&t0=The Way - Ariana Grande&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
Agora que tenho o código, eu só preciso fazer o que eu disse anteriormente: Colocar o primeiro código antes do Player e o outro, após. Vejam como ficaria:
 <div style="position: absolute; margin-top: 0px; left: 0px;">
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=http://dc645.4shared.com/img/3538338152/634342e2/dlink__2Fdownload_2FknaYuiUq_3Ftsid_3D20130627-173000-eaae9739_26dsid_3D2mz0o8.4683edeefc995e9899ca3df9bf2336c7/preview.mp3&t0=The Way - Ariana Grande&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" /></div>
Entendeu? Espero que sim! O código que você deve adicionar está em Itálico dendo do código do Player, perceberam? Bom, por hoje é só mesmo, ok? Fiquem com Deus :*

26 comentários:

  1. Lembro que teve uma época que procurei esse tuto igual condenada! mas percebi que em alguns navegadores os gadgets não ficam no lugar certo e o blog fica totalmente desorganizado, então evito colocar gadgets em outros lugares.

    Kisses <3
    Meu jardim Secreto (ou clique no perfil)

    ResponderExcluir
    Respostas
    1. É verdade, mas a maioria dos Blogueiro utilizam o Chrome né? :) Beijo :*

      Excluir
  2. Que simples! '-' Eu nunca fiz layout com gadgets no cabeçalho, nunca nem tentei... Mas é sempre bom saber uma forma a mais! :3
    Bjo, Sel ;*

    Jovens Gordinhas
    Unicórnio com Bigode

    ResponderExcluir
    Respostas
    1. Pois é Sel, quando tiver vontade tenta, eu acho super legal :)

      Excluir
  3. Tutorial super útil! Lembro que na época em que eu usava slides no cabeçalho também existia um tutu bem mais complicado @--@ mas esse além de fácil, funciona super bem ^^
    Beijos ♥

    ResponderExcluir
    Respostas
    1. HAHA, Ainda bem que não sou o único :P
      Obrigado :)

      Excluir
  4. Muito útil irei utilizar *-*
    Obgd ♥

    #DArk_Paradise.

    ResponderExcluir
  5. Sempre ótimas dicas por aqui! Deve ser ótimo saber fazer essas alterações no blog, eu sempre "Peço ajuda aos universitários"! Rs...

    http://naomemandeflores.com

    ResponderExcluir
    Respostas
    1. KKKK Com um pouco de esforço a gente aprende :3

      Excluir
  6. Ja tinha visto esse tuto, em outro local de uma jeito mais facil ainda ^^

    XOXO :D
    jovenclube.blogspot.com.br

    ResponderExcluir
  7. Sempre morri de vontade de fazer isso, olhava nos outros blogs acha muito lindo, só que tinha medo de estragar o layout porque era meio complicadinho, mas agr com esse tutorial estou morrendo de vontade de tentar *o*

    giviajapelomundo.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Tenta sim, tenho certeza que não vai dá erro u.u Boa Sorte ;)

      Excluir
  8. Que legal esse tuto. >-<
    Eu conhecia ele há um tempinho, sempre usei ele, mas demorava um ano pra eu achar ele na net.
    Agora já sei onde achar mais fácil. \o/ Até coloquei na barra de favoritos. -q

    XOXO, Josh.
    darkflameoficial.blogspot.com {new url}

    ResponderExcluir
  9. Muito útil! Eu usei um tuto parecido com esse à alguns dias, mas foi tão fácil quanto o seu! ;)

    >> blog-espelhodigital.blogspot.com

    ResponderExcluir
  10. Nunca me interessei por esse tutorial por ele ser bem difícil, mas aqui,m até que ele tá facilzinho :)

    PEQUENA JULIETA
    pequena-julieta.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Pois é, da uma tentada lá pra ver se consegue :)

      Excluir
  11. Nunca havia ouvido falar desse tuto!

    Pink Campbell|| Acesse! ;D

    ResponderExcluir
  12. Tutorial super útil, sempre bem aplicado e sempre ajuda na hora de arrumar um cabeçalho mais trabalhado.

    diamantesdeumagarota

    ResponderExcluir