Oi gente boa tarde, como estão vocês?? Eba!! Hoje já é sexta- feria, é impressão minha ou essa semana passou voando?! Gente queria muito agradecer pelos belos comentários que recebi na postagem anterior, vocês não sabem como eu fiquei feliz a ler alguns recadinhos deixados por vocês... Fico muito animada ao saber que gostaram do lay free.. em breve virão mais lays e mais metas cumpridas se deus quiser! Gostaria também de dizer que quando eu for fazer o próximo lay free, eu vou fazer uma pesquisa com vários temas e vocês vão escolher seus preferidos, fica mais fácil para mim fazer algo que vocês realmente gostam! Agora vamos falar da postagem de hoje, bom o post de hoje é sobre como colocar na lateral do blog, ela fica escondidinha até dar um click no booton..fica muito lindo e é muito bom para quem quer economizar espaço no blog. Vamos ver?
<style type="text/css">
#gb{
position:fixed;
top:100px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:101px;
width:50px;
float:left;
cursor:pointer;
background:url('URL_DA_IMAGEM') no-repeat;
}
.gbcontent{
float:left;
border: 2px; solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
Código da Cbox aqui.
<div style="text-align:right">
<a href="javascript:showHideGB()">
[fechar]</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString() + "px";
</script>
Como Fazer?
Entendendo o Código:
De acordo com a sua imagem que irá abrir a caixa de recados, mude os valores height (altura), e width(largura).- Agora vamos personalizar a caixa que ficará a cbox dentro:
• border: 2px solid #666666;
• background: #F5F5F5;
• padding: 10px;
- Os códigos abaixo são responsáveis por mover a cbox para esquerda ou para direita, mude os números de acordo com sua preferencia.
• height:101px;
• width:50px;
• float:left;
• cursor:pointer;
Este código pode ser usado para ocultar outras coisas, não apenas cbox. Apenas coloque o texto/código que quiser aonde está escrito "Código da Cbox aqui".
Ah, o layout free da postagem anterior está mesmo lindo <3 E, não, a semana passou feito lesma ihsadhasdfsa'
ResponderExcluirEnfim, esse tutorial é bem útil, pena que eu não uso C-BOX :c
[♡] s u c k s u g a r [/♡]
Muito obrigada mesmo que bom que gostou!!
ExcluirAh, esqueci de avisar. Aceito afiliação sim, está na elite <3
ResponderExcluirEbaa já vou te colocar aqui também, obrigada mesmo!
Excluiresse tutorial é bastante legal...
ResponderExcluirObrigada!!
ExcluirMUITO bacana seu blog, primeira vez que visito =)
ResponderExcluirGostei por trazer um ar meio década de 90, esse layout com as duas colunas, as letras mais pequenas e quadradinhas <3
Beijão
Gostei do tutorial, é bem fácil. E o lay free está lindinho, assim como esse que você tá usando :3
ResponderExcluirBeijos,
rainbow of flowers
Muito obrigada!!
Excluirmuito bom tutorial
ResponderExcluirBeeijos, ♥
http://www.paaradateen.com
http://www.facebook.com/PAARADATEEN
INSTAGRAM: @luannaandrade_
Obrigada que bom que gostou!!
ExcluirAcabei de ver o layout e ele é mesmo muito bonito e parabéns mais uma vez pela sua meta.
ResponderExcluirEsse tutorial é ótimo acho que vou até usar no próximo layout.
Sweet of Cherry
Muito Obrigada Marci, que bom que você voltou com o seu blog!!
ExcluirDe nada!!!
ExcluirEu acabei me esquecendo, eu aceito o pedido de afiliação.
ahh que bom, obrigada!!
ExcluirObrigada que bom que gostou!
ResponderExcluirNão conhecia esse tutorial só o da CBox normal mesmo, mas essa fica mais bonitinha <3
ResponderExcluirBeijoos ♡ || Caramelos Encantados
Que bom que gostou, obrigada!
ExcluirNão uso c-box mas ficou bem bonito!
ResponderExcluirDesculpe não ter vindo ao seu blog mas tive uma semana sem internet ;__;
Bjs,
un--cover.blogspot.com
Muito legal, super lindo. Otimo tuto.
ResponderExcluirBeijos http://valentinices.blogspot.com.br
https://www.enjoei.com.br/valentinices
Obrigada linda!
ExcluirEsse lay ficou tão lindo *-*
ResponderExcluiresqueci de te dar parabens pelos 450 seguidores #acho você merece muito mais ^^ vou concerteza usar esse tuto ><
bjs
http://cadernodeanimees.blogspot.com.br/
Obrigada mesmo!
ExcluirO TUTORIAL É MUITO ÚTIL.(NÃO ME PERGUNTE PORQUE TO USANDO O CAPS LOCK,EU NÃO SEI) .
ResponderExcluirDUDYNHAOLIVEIRA.BLOGSPOT.COM
Obrigada duda!
ExcluirGENTEEEEEEEEEEEEEE
ResponderExcluirME DESCULPA, EU ME CONFUNDI COM O EFEITO ;u;
nossa que cara de taxo :V perdão! eu tinha visto a fotos da katy e pensava que era a cbok-aviso a cega não viu o coração :C
kkkkk pois é acontece mesmo!
ExcluirObrigada!
ResponderExcluir