In Tutoriais

Menu Lateral (Blogger e Tumblr)

Oi de novo ^-^
Bem vou mostrar para vcs um tutorial muito lindo que uso no meu tumblr e que aprendi a fazer graças a Annyz.
Neste tutorial será feito um menu lateral com imagens que serve para ser usado no blogger ou no tumblr. É bem simples!
Primeiro faça as imagens que serão mostradas como menu e as hospede em algum site voltado para este fim, como Picasa, Photobucket ou o próprio Tumblr. Agora vamos lá:
::::::No Blogger...
1. Acesse a área de Layout do seu blog, em Elementos da Página.
2. Clique para adicionar um novo Gadget Html/JavaScript e cole este código:


<style type="text/css">
#gb{
position:fixed;
top:190px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:left;
}
</style>

<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<a href="LINK 1"><img src="IMAGEM LINK 1" width="100" border="0" height="100" /></a><br />

<a href="LINK 2"><img src="IMAGEM 2" width="100" border="0" height="100" /></a><br />

<a href="LINK 3"><img src="IMAGEM 3" width="100" border="0" height="100" /></a><br />

<a href="LINK 4"><img src="IMAGEM 4" width="100" border="0" height="100" /></a><br />

<div style="text-align:right">
<a href="javascript:showHideGB()">
</a>
</div>


<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (80-gb.offsetWidth).toString() + "px";
</script></div></div>

3.Editando o código:
-top:190px- distância do menu para o topo (mais para cima ou mais para baixo); basta alterar o número.
-float:left- define se o menu estará do lado esquerdo ou direito (right);

<a href="LINK 1"><img src="IMAGEM 1" width="100" border="0" height="100" /></a><br />
-LINK 1, 2, 3 ou 4- Links do seu menu.
-IMAGEM 1, 2, 3 ou 4- URL da imagem que se refere a cada link.
-width="100"/height="100"- altere os valores de acordo com o tamanho da imagem que você for utilizar.
5. Após editar salve e visualize para ver se gostou ^-^

::::::Para Tumblr:
1. Acesse a área de edição de HTML do seu Tumblr.
2. Procure por </body> e acima disto cole o mesmo código.
3. Faça as alterações que desejar, visualize (Update Preview) e se gostar, salve.
É isso. Espero que gostem e que seja útil para vcs tbm. Beijinhus<3

Related Articles

12 comentários:

  1. Ah que fofo (^.^) Roberta de uma passadinha em meu blog :) http://preciouskawaii.blogspot.com.br/
    PS: eu estou fazendo um " NOVO" modelo pro meu blog :) acho que amanhã vai estar pronto ^^ ah e o caderno esta ficando muito fofo, já já postarei as fotos em meu blog,e fotos das minhas lolitas :) bjs!!

    ResponderExcluir
  2. Muito Fofo esse menu =3 Mas acho que não ficaria bem no meu blog.
    Seu blog é um amor, tudo muito caprichado, amei!
    Comecei com meu novo blog hoje, se puder visita? Agradeço desde já!
    Kuroi Hime

    ResponderExcluir
  3. Olá, como vai? Amei o seu cantinho e já de cara seguindo! Espero que possa retribuir a visitinha lá no meu blog: http://luan-ontheworld.blogspot.com.br/, ficaria lisonjeado de ter você lá, beijinhos.

    ResponderExcluir
    Respostas
    1. Adri: Eu vi lá no seu blog; tah tão fofo!! Depois vou ver o caderno, que deve estar lindo também!
      Aika: Que bom que gostou ^^ Seja bem-vinda! E muito obrigada! Assim que puder vou lá visitar :) Sorte pra vc!!!
      Luan: Que bom que gostou e seja bem-vindo! Farei uma visita a vc assim que puder!!!! E também fico lisonjeada com a sua presença (e a de todos) aqui ;3
      Beijinhus a todos e muito obrigada!!

      Excluir
  4. me gustaria que afiliaramos denuevo... cuando cambie el diseño de mi blog, perdi todos mis afiliados...


    *-* Sim?

    ResponderExcluir
  5. Desculpe, minha tradução foi muito errado. Eu quis dizer "Afiliados"

    ResponderExcluir
  6. Oiee, seu blog é muito Kawaii parabéns!!
    Então, eu vi o tutorial e tentei colocar no meu blog mais ñ consegui, se você puder me envie um e-mail mais detalhado (desculpe eu acabei de fazer o meu blog e não tenho muita esperiencia)
    Meu E-mail: tigresa-bk@hotmail.com

    Desde já agradeço!
    Bjussss

    ResponderExcluir
  7. Oi Beka-Chan:e:
    Na verdade, quase não tem muito o que dizer além do que está na postagem ^^
    Para colocar no seu blog acesse a área Layout, depois clique em adicionar gadget, escolha entre as opções HTML/JavaScript e cole o código, sem dar título.
    Aí edite conforme vc gostar, como descrevi no post.
    Tente mais uma vez e me diga em que parte vc está com dúvidas ok?
    Beijus:v:

    ResponderExcluir
  8. Super foofo. *--*
    Passe no nosso blog: http://garotapersonalizada.blogspot.com.br/ :)

    ResponderExcluir
  9. Ficou perfeito! Brigada por trazer essa incrível novidade! XD

    ResponderExcluir
  10. Oi meninas esta é minha primeira visita no blog, que, inclusive é lindo. Sou nova no tumblr, e estava querendo colocar estas fotos laterais. Quase deu certo, o problema é que as imagens só aparecem pela metade, como se a tela estivesse cobrindo. Se puderem me ajudar agradeço, este é o meu blog http://susu-minhaplenitude.tumblr.com
    Obrigada, fiquem com Deus!

    ResponderExcluir
    Respostas
    1. Talvez seja o posicionamento ou as larguras e alturas das imagens que devam ser alteradas.
      Tente mudar os valor das imagens em width e height para redimensionar ou então posicione em float: left - para esquerda ou float: right - para a direita, altere o valor em top também.
      Acho que isso resolverá ^^
      Beijus...

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart