Bem vou mostrar para vcs um tutorial muito lindo que uso no meu tumblr e que aprendi a fazer graças a Annyz.
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>
#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>
-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
Ah que fofo (^.^) Roberta de uma passadinha em meu blog :) http://preciouskawaii.blogspot.com.br/
ResponderExcluirPS: 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!!
Muito Fofo esse menu =3 Mas acho que não ficaria bem no meu blog.
ResponderExcluirSeu blog é um amor, tudo muito caprichado, amei!
Comecei com meu novo blog hoje, se puder visita? Agradeço desde já!
Kuroi Hime
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.
ResponderExcluirAdri: Eu vi lá no seu blog; tah tão fofo!! Depois vou ver o caderno, que deve estar lindo também!
ExcluirAika: 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!!
me gustaria que afiliaramos denuevo... cuando cambie el diseño de mi blog, perdi todos mis afiliados...
ResponderExcluir*-* Sim?
Desculpe, minha tradução foi muito errado. Eu quis dizer "Afiliados"
ResponderExcluirOiee, seu blog é muito Kawaii parabéns!!
ResponderExcluirEntã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
Oi Beka-Chan:e:
ResponderExcluirNa 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:
Super foofo. *--*
ResponderExcluirPasse no nosso blog: http://garotapersonalizada.blogspot.com.br/ :)
Ficou perfeito! Brigada por trazer essa incrível novidade! XD
ResponderExcluirOi 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
ResponderExcluirObrigada, fiquem com Deus!
Talvez seja o posicionamento ou as larguras e alturas das imagens que devam ser alteradas.
ExcluirTente 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...