Follow Us @soratemplates

quarta-feira, 13 de junho de 2012

Bottom Sliding Menu

Olá!!! Como estão? E como foi o dia dos namorados hein? Ganharam muitos presentes?
Bem, o meu dia dos namorados foi ótimo, não por mim, que estou solteira agora, mas pelos meus pais, porque foi aniversário de casamento deles ^-^ OMG! Eles estavam tão fofos <3
Ai ai...mas vamos ao post de hoje que será sobre como colocar um menu abaixo do blog, assim como o que uso aqui, com efeito deslizante, opção de abrir e fechar, aceita imagens e alguns tipos de HTML também, como o formulário do feedburner. O tutorial funciona assim como o Menu Acima do Cabeçalho, inclusive, é do mesmo autor, só que não pode ser usado junto com esse outro menu, pelo menos aqui deu erro quando tentei usá-los juntos; serve para economizar espaço no blog.
Menu Fechado
Menu Aberto
Vamos lá!
A primeira coisa a ser feita é o backup do seu modelo. Depois de salvá-lo, prossiga:
Acesse a área de edição de HTML do seu modelo e...
1. Procure por <head> e acrescente o código abaixo logo depois:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("#open").click(function(){
$("div#panel").slideDown("slow");

});
$("#close").click(function(){
$("div#panel").slideUp("slow");
});

$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});

//]]>
</script>

2. Agora vamos editar a aparência do nosso menu. Procure por ]]></b:skin> e acrescente logo acima este código:
/* Bottom Sliding Menu
----------------------------------------------- */
.clearfix:after {content: &quot;.&quot;;display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}

.tab {
background: url(http://3.bp.blogspot.com/-nTn2EEVeE2E/T9izQCu8UeI/AAAAAAAAAXU/DBTtL5BrAHw/s1600/linekaten2.gif) repeat-x 0 0;
height: 59px;
position: relative;
top: 0;
z-index: 999;
display:block;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 59px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: #transparent;
font-size: 100%;
text-align: center;
}
.tab ul.login li.left {
background: url(http://i1121.photobucket.com/albums/l505/saycute/Gifs/Mais%20Gifs/84x5.gif) no-repeat left 0;
height: 84px;
width: 5px;

padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url() no-repeat left 0;
height: 0px;
width: 0px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 0px;
background: url() repeat-x 0 0;
}

.tab ul.login li a {color: #fcc;}
.tab ul.login li a:hover {color: #fff;}
.tab .sep {color:#fcc}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(http://i1121.photobucket.com/albums/l505/saycute/Strawberry/pix33.gif) no-repeat left 0;}
.tab a.close {background: url(http://i1121.photobucket.com/albums/l505/saycute/Strawberry/pix33.gif) no-repeat left 0;}
.tab a:hover.open {background: url(http://i1121.photobucket.com/albums/l505/saycute/Strawberry/pix33.gif) no-repeat left 0;}
.tab a:hover.close {background: url(http://i1121.photobucket.com/albums/l505/saycute/Strawberry/pix33.gif) no-repeat 0;}


#toppanel {
position: fixed;
bottom: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 270px;
color: #f76da4;
background: url(http://1.bp.blogspot.com/-2vOfA9dZWAU/T2YvpqoUf3I/AAAAAAAAFtw/XbcmSezzsrg/s1600/M1.gif) repeat;

overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: #fcc;
text-align: center;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: none;
color: #fff;
}
#panel a:hover {
color: #ffffff;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.95em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 2px dashed #fcc;
}
#panel .content .right {
border-right: 2px dashed #fcc;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}


#slide-menu {
width: 160px;
float: left;
}
#slide-menu2 {
width: 160px;
float: right;
}
#slide-menu ul, #slide-menu2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#slide-menu ul li a, #slide-menu2 ul li a {
center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#slide-menu li, #slide-menu2 li {display: inline;}
#slide-menu a, #slide-menu2 a{
color: #fcc;
text-decoration: none;
font-size: 13px;
display: block;
padding: 3px;
width: 160px;
}
#slide-menu a:link, #slide-menu a:visited, #slide-menu2 a:link, #slide-menu2 a:visited {
color: #999;
text-decoration: none;
}
#slide-menu a:hover, #slide-menu2 a:hover {
color: #fcc;
}
body#layout #toppanel {display:none !important;}

OBSERVAÇÕES:
1º O código é muito grande portanto destaquei em negrito algumas partes mais relevantes para serem alteradas; elas se referem a imagens, tamanhos das imagens, distância do topo, cores de texto e de links; basta ir modificando ao seu gosto.
2º Este código já foi personalizado por mim e o Menu estará com a seguinte aparência:
Menu Fechado
Menu Aberto
3º Caso queira adicionar o menu colorido, leia este tutorial aqui: Menu Colorido

3. Depois de deixar com a aparência que você quer, cole este código antes de </body>
É o conteúdo do seu menu:
<!-- Inicio bottom sliding menu -->
<div id='toppanel'>
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Welcome!OPCIONAL</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='javascript:void(0);' id='open'>OPEN</a>
<a class='close' href='javascript:void(0);' id='close' style='display: none;'>CLOSE</a>
</li>
<li class='right'/>
</ul>
</div>


<div id='panel'>
<div class='content clearfix'>

<!-- Primeira coluna -->
<div class='left' style='width:240px !important'>

<h4>AQUI VOCE PODE DEIXAR SEUS LINKS DE CONTATO!</h4>
<p>Como redes sociais e e-mail, com ícones se preferir: </p>

<div align='center'>
<a href='http://link.com'>LINK</a>;
<a href='http://link.com'>LINK</a>;
<a href='http://link.com'>LINK</a>;
</div>

</div>


<!-- Segunda coluna -->
<div class='left' style='width:320px !important'>
<h4>TÍTULO</h4>

<div id='slide-menu'>
<ul>
<li><a href='URL'>LINK</a></li>
<li><a href='URL'>LINK</a></li>
<li><a href='URL'>LINK</a></li>
<li><a href='URL'>LINK</a></li>
<li><a href='URL'>LINK</a></li>
</ul>
</div>

<div id='slide-menu2'>
<ul>
<li><a href='URL'>LINK</a></li>
<li><a href='URL'>LINK</a></li>
<li><a href='URL'>LINK</a></li>
<li><a href='URL'>LINK</a></li>
<li><a href='URL'>LINK</a></li>
</ul>
</div>
</div>


<!-- Terceira coluna -->
<div class='left right'>

<h4><b>TÍTULO</b></h4>
<p>ESCREVA ALGO </p>
<p>BLA BLA BLA<br/></p>



</div>
</div>
</div>

</div>
<!-- Fin bottom sliding menu -->
 
Agora é só editar a sua maneira, acrescentar o que quiser, visualizar para ver como fica e salvar.
É muito bom usá-lo para economizar espaço ou para adicionar algumas surpresas em seu blog.
Espero que gostem e beijus<3

9 comentários:

  1. :v: Lindo tutorial !

    Beijos,
    Camila Angelina
    http://cantinhodacaps.blogspot.com.br/ (agora com Template ANIMADO!)

    ResponderExcluir
  2. Mais uma vez, muito útil! Ainda hei de explorar esse tutorial e adicionar o menu ao meu blogue!

    Beijos,
    Sorvete de Morango

    ResponderExcluir
  3. :v:Que bom que gostaram ^^
    É mesmo super útil! Beijus<3

    ResponderExcluir
  4. Muito fofo esse tutorial!
    Vou usa-lo quando fazer novas mudanças no meu blog ! *-----*

    ResponderExcluir
  5. Indiquei vc em um meme!!
    Se puder vai lá ver ^^
    xoxo

    ResponderExcluir
  6. Nossa, seus Tutos são muito bons para meu blogger, novo, mais lindoo *----*

    Gostaria saber se tem vagas para afiliados?

    i-love-my-word.blogspot.com

    ResponderExcluir
  7. Brigada pelo apoio querida :) obrigada mesmo,mas estou mesmo a pensar em fechar é que não é só a questão dos comentários mas também com o meu novo blog e da minha melhor amiga Vanessa (dona do Littel Bad Girl que também já fechou :c ) depois é muito dificil postar em dois blogs não é?seja como for obrigada por gostares do meu blog ^^ fico muito contente,mas se quiseres ler mais das minhas postagens basta passares pelo Bubble Explosion ^-^
    Bjs Chibiusa,
    Novo blog: http://bubble-explosion.blogspot.pt/

    ResponderExcluir
  8. Nyan o resultado deve ser incrivel! - se eu tivesse paciência em editar esse minizinhodetalhe, eu com certeza teria um blog mais bonitinho, mas quando o assunto edição de códigos - programação - ou formatação de layout... basta um suspiro e já estou fazendo outras coisas (...)
    Seu tutorial está Tilindo Rô *--* ♥

    ResponderExcluir
  9. :v:E eu espero que goste Manika ^^ Obrigada pelo meme<3 Depois vou lá buscar ok?
    :v:Vitória: que bom que vc gosta dos tutos! Isso me alegra muito! Olha flor, as vagas para afiliações e parcerias estão completas, mas sempre acrescento os sites e blogs que eu adoro na página dos meus favoritos aqui no blog; assim que eu visitar vc, farei isso ok ^^
    :v:Chibiusa: então tá :e: Vou conhecer sim o Bubble Explosion!!! Sorte para vcs!!!
    :v:Cyndi: É sim, o resultado é lindo! Ah eu entendo vc...tô querendo arrumar algumas coisas aqui no blog há um tempão, mas ando tão cansada pelos estudos e trabalhos que vou adiando rsrs...
    Obrigada a todas e beijus:cat:

    ResponderExcluir

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