Olá! Hoje trouxe para vocês um tutorial que curti bastante e aprendi no site Code Player. Fiz umas modificações até deixá-lo mais para o lado de "kawaii" e compartilho com vocês o resultado. Trata-se de um menu lateral, que fica oculto no blog e só vai aparecer quando o leitor clicar em seu ícone. Só tem um porém: achei meio complicado posicioná-lo; talvez seja porque eu esteja aprendendo aos poucos sobre HTML/CSS, acho que para quem entende bem deve saber adaptar; ele deixou um espacinho no local em que coloquei referente ao tamanho que especifiquei em altura, mas nada exagerado. Então não tenho como auxiliar na forma que posicionar, cada um vai adicionar e configurar a sua maneira ok?
1. Cole esse código em um novo gadget HTML/JavaScript, sendo que deve estar acima da área de postagens:
<style>
#menuoculto { /*area geral */
width: 100%; /*largura */
height: 100%; /*altura */
margin: -135px auto 0 -260px;/*move para o topo esquerda ou direita */
}
.move {
float: left;
position: relative;
}
#tm {
display: none;
}
/*area onde fica o botão menu */
.move section {
width: 350px;
height: 150px;
position: relative;
transition: all 0.25s;
}
.move section label {
display: block;
padding: 10px 0;
width: 60%;
position: absolute;
left: 20%;
top: 100px;
cursor: pointer;
}
/*links */
.linkss {
width: 190px;
height: 100%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding-top: 100px;
}
.linkss li {
list-style-type: none;
}
.linkss a {
color: lightblue;
text-decoration: none;
text-align: center;
text-shadow: 1px 2px 3px #fff;
}
.linkss a:hover {
color: pink;
text-decoration: none;
transition: 0.2s;
}
.linkss b {
font-weight: bold;
font-size: 20px;
font-family: 'Berkshire Swash', cursive;
display: block;
opacity: 0;
transform: translateX(50px);
transition: all 0.4s;
line-height: 80px;
background-color: aliceblue;
border-radius: 50px;
box-shadow: 3px 4px 5px #eee;
}
#tm:checked ~ section {transform: translateX(150px);}
#tm:checked ~ .linkss b {opacity: 1; transform: translateX(0);}
#tm:checked ~ .linkss li:nth-child(1) b {transition-delay: 0.08s;}
#tm:checked ~ .linkss li:nth-child(2) b {transition-delay: 0.16s;}
#tm:checked ~ .linkss li:nth-child(3) b {transition-delay: 0.24s;}
#tm:checked ~ .linkss li:nth-child(4) b {transition-delay: 0.32s;}
#tm:checked ~ .linkss li:nth-child(5) b {transition-delay: 0.40s;}
#tm:checked ~ .linkss li:nth-child(6) b {transition-delay: 0.48s;}
</style>
<div id='menuoculto'>
<div class='move'>
<input id='tm' type='checkbox'/>
<ul class='linkss'>
<li><a href='#'><b>♥Link 1</b></a></li>
<li><a href='#'><b>♥Link 2</b></a></li>
<li><a href='#'><b>♥Link 3</b></a></li>
<li><a href='#'><b>♥Link 4</b></a></li>
<li><a href='#' title='como fazer esse menu'><b>♥Tutorial</b></a></li>
</ul>
<section>
<label for='tm'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib_boMRkoZk7IPN-YSvgc7rF8i13U45MAxnhsN4RKc64D4YaTujnR6lIWzv4NOO_SadgJbMbnHEO-3r8294NaV_XHssnprD9qOZzq3W-hbkzMmunDCFSE3BP0c0J4IPtEPjQMKm82UV0Q/s1600/s2.png'/></label>
</section>
</div>
</div>
2. Se quiser usar a fonte que está no código, cole isso antes de </head> (Modelo-Editar Html):
<link href='http://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css'/>
É isso; agora você deverá posicionar em seu template, caso tenha ficado desconfigurado. Para fazer a prévia no meu tumblr, por exemplo, tive que modificar em .linkss, na parte left: 0; para left: -90px; para o menu ficar com as bordas ocultas, e em .move acrescentei um top: -110px para que ficasse mais para o topo.
O que estiver entre <style> e </style> é o CSS, ou seja, você pode remover as tags <style>/</style> e colocar o código antes de </b:skin> no Blogger, ou </style> no Tumblr. A partir de <div id='menuoculto'> você estará especificando o HTML, colocando onde desejar que apareça, por exemplo, abaixo do cabeçalho (depois de </header>), em um gadget HTML ou onde preferir. Não recomendo colar o código abaixo do gadget de páginas, porque quando fiz isso, ficou feio :D
Espero que gostem. Beijinhos...
O que estiver entre <style> e </style> é o CSS, ou seja, você pode remover as tags <style>/</style> e colocar o código antes de </b:skin> no Blogger, ou </style> no Tumblr. A partir de <div id='menuoculto'> você estará especificando o HTML, colocando onde desejar que apareça, por exemplo, abaixo do cabeçalho (depois de </header>), em um gadget HTML ou onde preferir. Não recomendo colar o código abaixo do gadget de páginas, porque quando fiz isso, ficou feio :D
Espero que gostem. Beijinhos...
Créditos: Imagem: weheartit.com/Códigos: thecodeplayer.com
Funcionou direitinho!! Agradeço muito!!
ResponderExcluir