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 |
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: ".";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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtE7gAG2B1ll6xpiAUFBR26GyfsLyItX7bsVBYNhimGQ5YzQCVcgSwc0DzkxXfvG-yaeOIL59HutlYKp8QxlfXulfOFPsfMdM_ft3-kNfYfEiYFGj07yN23L7ljX-yP0l5Houxr8ZVT1Lj/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPbImArWeFEFI2Tj8K68K5331skLw4mu39Xd914nA3ZIe884x5BCYbdPjn_Kj8zIJILWYENXoSl2q4xoZqVdAGygq-X66HnPHF7sMqhCQuQzsJGlhnsFoi8JC9ahnnOFh7zpwv0M-WfgY/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. 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 -->Agora é só editar a sua maneira, acrescentar o que quiser, visualizar para ver como fica e salvar.
<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 -->
É muito bom usá-lo para economizar espaço ou para adicionar algumas surpresas em seu blog.
Espero que gostem e beijus<3
:v: Lindo tutorial !
ResponderExcluirBeijos,
Camila Angelina
http://cantinhodacaps.blogspot.com.br/ (agora com Template ANIMADO!)
Mais uma vez, muito útil! Ainda hei de explorar esse tutorial e adicionar o menu ao meu blogue!
ResponderExcluirBeijos,
♥ Sorvete de Morango
:v:Que bom que gostaram ^^
ResponderExcluirÉ mesmo super útil! Beijus<3
Muito fofo esse tutorial!
ResponderExcluirVou usa-lo quando fazer novas mudanças no meu blog ! *-----*
Indiquei vc em um meme!!
ResponderExcluirSe puder vai lá ver ^^
xoxo
Nossa, seus Tutos são muito bons para meu blogger, novo, mais lindoo *----*
ResponderExcluirGostaria saber se tem vagas para afiliados?
i-love-my-word.blogspot.com
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 ^-^
ResponderExcluirBjs Chibiusa,
Novo blog: http://bubble-explosion.blogspot.pt/
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 (...)
ResponderExcluirSeu tutorial está Tilindo Rô *--* ♥
:v:E eu espero que goste Manika ^^ Obrigada pelo meme<3 Depois vou lá buscar ok?
ResponderExcluir: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: