3 Pedidos: Menu Fade Imagem + Pngs e Fontes + Ilustrações

Hey, angels :) What's up?

Recebi três pedidos recentemente:

Odeio deixar vocês esperando, então resolvi atender tudo em um só pedido. Dessa vez não está separado por Pedido Número Tal, e sim pelo que me foi pedido. Então usem Ctrl+F, se interessar. Vamos lá?

Pedidos: Menu Suspenso/Drop-down + Imagens em Gadgets

Hey, angels :) What's up?

Recebi dois pedidos de tutorial ontem:

Veio da Gaby

Ambos estão sendo atendidos nesse post. Curiosos? É só continuar lendo.

2 pedidos: Avatares + Tutorial

Hey, angels :) What's up?

Recebi novamente dois pedidos. O de utilitários foi feito na área de comentários:

E o de tutorial foi feito na ask.fm do blog:

Ambos foram atendidos nessa postagem. Se quiserem conferir, é só continuar lendo. Vamos lá?

Pedido: Menu Pisca-Pisca

Hey, angels :) What's up?

Ontem recebi um pedido de tutorial:

E, obviamente, eu não iria deixar de atender uma leitora! Portanto, se quiserem ver como fazer o menu que uso no Mrs. Nightshade, é só continuar lendo.

Menu Express

Hey, angels :) What's up?

Hoje eu quero ensinar o menu que uso no Mrs. Nightshade. Achei o efeito nele super divertido e fica bem legal:

É um tutorial bem fácil! Vamos começar?

Vá no seu HTML e procure pela tag ]]></b:skin> . Assim que encontrar, cole o seguinte código antes dela:

@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}

.express {

background-color: #CORDOFUNDO;

color: #FFFFFF;

display: block;

width: LARGURADOMENUpx;

height: 15px;

line-height: 13px; font-family: handy; font-size: 8px; text-align: center; text-decoration: none; text-transform:uppercase; margin-right: 1px; margin-bottom: 1px; padding-top: 2px; text-align: center; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;text-transform: uppercase;}

.express:hover {opacity: 0.5; margin-left: -30px;}

Altere como desejar e salve.

Depois adicione um gadget de HTML/Javascript. Nele, cole o código abaixo:

<center><a href="SEULINK" class="express">Inicio</a>

<a href="SEULINK" class="express">About</a>

<a href="SEULINK" class="express">Goodies</a>

<a href="SEULINK" class="express">Tutoriais</a>

<a href="SEULINK" class="express">Créditos</a></center>

Mude as partes em negrito de acordo com o necessário.

Pronto! O menu Express já está no seu blog.

Aprendi a fazer no incrível Kawaii World, então créditos dados.

Bom, por hoje é só.

Beijos,

Mrs. Nightshade.

Pedidos de Rayane Cássia!

Hey, angels :) What's up?

A leitora dona do incrível Mundo Super Beijo fez dois pedidos de tutoriais:

E é claro que eu fiz =D Caso não tenham entendido do que se trata, é bem simples: 

Primeiro Pedido: após concluir o tutorial, o título do seu blog vai aparecer como se alguém estivesse digitando ele na guia. 

Segundo Pedido: menu usado aqui e no antigo layout do Mrs. Nightshade.

Bom, vamos ao tutorial?

Pedido: Menu Deslizante

Hey, angels :) What's up?

Eu estou muito feliz recebendo tantos pedidos. Saibam que eu fico extremamente feliz ajudando vocês! O leitor Geivesson (do blog Diga-se de Passagem) pediu um tutorial:

Esse menu se chama "Menu Deslizante" e é claro que eu vou ensinar a fazer =D Querem conferir o tutorial? Já sabem onde clicar!

Menu Hide com Imagem

Hey, angels :) What's up?

Lembram-se do antigo menu do Mrs. Nightshade? O menu é chamado "Hide com imagem" e hoje eu queria ensinar como fazer para vocês.

Para quem não se lembra do menu:

Antes do clique

Após o clique

Agora que refresquei a memória de vocês, vamos começar?

Tenha sua imagem, já hospedada. A que eu usei quando o blog era feat. Chris Drew foi essa:

170x47

Primeiramente, vá em Modelo > Editar HTML. Aperte Ctrl+F, procure por </head> e quando encontrar cole esse código ANTES:

<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".l-corpo").hide();
$(".l-top").click(function(){
$(this).next(".l-corpo").slideToggle('fast');
}); }); </script>

Agora procure por ]]></b:skin> e coloque o código seguinte ANTES:

.lista { margin:0px; padding:0px; width:130px; /*largura*/ } .l-top { cursor:pointer; position:relative; text-align:center; } .l-corpo { padding:10px; text-align:left; color: #000; /*cor da fonte quando não tem link*/ font-family:Verdana; font-size:11px; display:none; } .l-corpo a{ color: #49aec0; /*cor da fonte link*/ text-decoration:none; } .l-corpo a:hover{ color: #fe5a27; /*cor da fonte ao passar o mouse sobre o link*/ text-decoration:none; }

Fez? Bom, agora cheque seu blog e veja se nada estranho ocorreu. Se estiver tudo certo, salve. Agora o menu precisa aparecer, não é? Então adicione um gadget de HTML/Javascript onde você quer que o menu apareça e cole esse código nele:

<div class="lista">
<img src="www.LINKDASUAIMAGEM.com" class="l-top">
<div class="l-corpo">
<center>
<a href="www.SEULINKAQUI.com">Link</a><br />
<a href="www.SEULINKAQUI.com">Link</a><br />
<a href="www.SEULINKAQUI.com">Link</a><br />
<a href="www.SEULINKAQUI.com">Link</a>
</center>
</div>
</div>

Altere da seguinte forma:

www.LINKDASUAIMAGEM.com = a imagem do seu menu (ou seja, quando você clicar nessa imagem os links vão aparecer).

www.SEULINKAQUI.com = a URL da sua página

Link = o nome da sua página

Nota:

Assim como tinha colocado nos créditos anteriores (os créditos do Mrs. Nightshade ficam na F.A.Q.), aprendi esse menu no Jackie Dream.

É super fácil fazer esse menu, não é?

Bom, espero que tenham entendido e que tenha sido útil.

Beijos,

Mrs. Nightshade.

Menu de Abas

Hey, angels :) What's up?

Hoje eu trouxe um tutorial bem simples para vocês: o menu de abas, como o do Mrs. Nightshade.

Nota: aprendi a fazer com o The Lovers, então créditos ao blog. Créditos também ao Drikoti.net, dono do código, mesmo estando fechado.

Vamos lá?

Primeiramente, esse é o menu do qual eu falo:

Para começar, crie um gadget de HTML/JavaScript e cole esse código nele:

<link href='http://naah-oliver.zip.net/menu2.css' media='screen' rel='stylesheet' type='text/css'/> <script src='http://poisonedapple.awardspace.us/tabber.js' type='text/javascript'/>

Pode salvar. Agora, crie outro gadget de HTML/JavaScript e cole esse novo código nele:

<!-- Ínicio Menu Abas ~ By Drikoti.Net --> <div class="tabber"> <div class="tabbertab" title="Aba 1"> <br> Conteúdo 1 </> </div> <div class="tabbertab" title="Aba 2"> <br /> Conteúdo 2 </div> <div class="tabbertab" title="Aba 3"> <br /> Conteúdo 3</div> </div> <!-- Fim Menu Abas ~ By Drikoti.Net --> <center> <br />

Após colar, edite da seguinte forma:

Aba 1, Aba 2 e Aba 3 = substitua com o nome das suas abas, por exemplo: Link-me, Afiliados, Perguntas?

Conteúdo 1, Conteúdo 2 e Conteúdo 3 = o que você quer nas abas (ou seja, o que irá aparecer quando você clicar). Pode colar o código da sua caixinha de link-me, da sua elite de afiliados (amanhã vou postar um tutorial de como fazer), um texto, etc.

Bem simples, não é? Nem precisou mexer no HTML do blog nem nada!

Espero que tenham gostado!
Beijos,

Mrs. Nightshade.