- Cookie Lovers ♥: Tutorial - Menu Deslizante + Caixa de pesquisa

01/05/2013

Tutorial - Menu Deslizante + Caixa de pesquisa

(Ui, o título ficou ginorme O.O)

Oi gente u3u'

Hoje eu estou completamente lotada de deveres de casa. E ainda tenho que estudar para História, pois minha prova é amanhã, e como eu sou assim, digamos...relaxada, estudo só na véspera. Então aqui vai uma dica: não sejam como eu e.e'

Bem, me pediram na ask, qual era o menu que eu uso em "ask" e em "pesquise", que se localiza no último gadget, ou seja, o menu deslizante. Eu aprendi o tutorial no Bad&Black Apples, mas ele é do Cherry Bomb então créditos para este blog.Também me pediram para fazer o tutorial da caixinha de pesquisa utilizada aqui, não faço ideia de onde aprendi, mas achei uma agora no IIRTW, e acho que é a mesma ^^

Primeiramente, vamos ao menu deslizante:

Procure por <head>, e abaixo, cole:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://static.tumblr.com/ghoye6x/xBmloszst/colpaso.js' type='text/javascript'>
</script>
<script type='text/javascript'>
animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
animatedcollapse.addDiv('lion', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>

Após isso, crie um gadget HTML/JavaScript, e cole isso:

<center><a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 1</a> |
<a href="#" rel="toggle[dog]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 2</a> |
<a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 3</a></center>
<div id="rabbit" style="display:none">
Conteúdo do menu deslizante 1
</div>
<div id="dog" style="display:none">
Conteúdo do menu deslizante 2
</div>
<div id="cat" style="display:none">
Conteúdo do menu deslizante 3
</div>

Agora vamos à caixina de pesquisa :3 (Só avisando que não sei aonde achei essa barrinha para separar, ou seja lá o que for)

Primeiro, procure por ]]></b:skin>, e antes da tag, cole:

.search{
float: left;
font-family: Century Gothic !important; /* Fonte do campo de texto*/
}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 190px; /*largura da caixa*/
border-radius:15px;
background:#fff;
text-align:center;
color:#ff048c !important; /*cor do texto*/
font: 12px Century Gothic !important; /*fonte do texto*/
}
.searchbut{
background: url('http://cdn3.iconfinder.com/data/icons/49handdrawing/16x16/favourites.png');
width:16px; /*Largura do botão*/
height:16px; /*altura do botão*/
border: 0;
padding:7px;
}

Depois, em um gadget HTML/JavaScript, cole:

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='Seu texto aqui' type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>

14 comentários:

✖~ Nakashita Beel1 de maio de 2013 às 14:03
Amei o tuto, e acho que você achou a barrinha no meu blog rs ^^' eu realmente não sei onde peguei ela, mas sempre lembro quando tem no meu blog :D
ResponderExcluir
Respostas
Natsu ✩1 de maio de 2013 às 14:11
O menu "clique" é do Cherry Boomb, e o nome é Menu Deslizante. AUHSASU' /masok
ResponderExcluir
Respostas
Anônimo1 de maio de 2013 às 14:27
ahhh muito obrigado pelo tuto ^^
ResponderExcluir
Respostas
Sagwa;1 de maio de 2013 às 17:33
UHEUEH' Os tutoriais são bem uteis, o menu deslizante economiza bastante espaço na sidebar e a caixa de pesquisa ajuda muito na hora de pesquisar /ava.
Eu também estudo só na véspera, é um abito horrível meu. ;A; UHEUEHE' Eu preciso fazer tarefa, também estou cheia delas, nhaw :c
ResponderExcluir
Respostas
Mayara2 de maio de 2013 às 09:09
Ui a Bia-chan estuda pras provas U-U eu nunca estudo, e ainda tiro notas altas sou foda-sqn. É que eu sou nerd mesmo, presto atenção e entendo tudo... e.e
sobre o tuto, o menu deslizante deixa o blog mais organizado né? mais eu não uso nenhum menu e nem a caixinha de pesquisa >.< eu tenho preguiça de por hashuahsus
ResponderExcluir
Respostas

Adicionar comentário