domingo, 1 de abril de 2012

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

Compartilhe:

Quem escreveu esse post?


Foi a Roberta, que adora tudo o que for kawaii, macio, fofo, de chocolate e com morango no topo. Se ela não estiver online por aqui, você pode encontrá-la também em...


Caso queira adicionar um emoticon/emoji ao seu comentário, copie o link de uma das imagens abaixo:

12 comentários

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!!

REPLY

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

REPLY

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.

REPLY

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!!

REPLY

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


*-* Sim?

REPLY

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

REPLY

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

REPLY

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:

REPLY

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

REPLY

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

REPLY

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!

REPLY

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...

REPLY

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

Reino Kawaii . 2018 Copyright. All rights reserved. Designed by Blogger Template | Free Blogger Templates