12 de set de 2014

❤ Cbox Oculta

    
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?

01- Passo: Primeiramente vá ate Design > Adicionar um Gadget > HTML/Javascript e cole o seguinte código:

<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?
Passo 02- Aonde está o 'URL_DA_IMAGEM' você coloca a imagem que vai abrir a cbox.

Passo 03 - Proucure por "Código da Cbox aqui", e obviamente substitua a frase e cole o código da sua caixa de recados.

Passo 04- E por último procure pela linha "[fechar]", essa palavra após clicar nela a cbox fechará. Caso queira usar uma imagem para isso, substitua "[fechar]" por <imgsrc="URL_DA_IMAGEM"/>


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.

• .gbtab{
• height:101px;
• width:50px;
• float:left;
• cursor:pointer;

Algumas Imagens para Abrir a Cbox:

          


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".

31 comentários:

  1. Ah, o layout free da postagem anterior está mesmo lindo <3 E, não, a semana passou feito lesma ihsadhasdfsa'
    Enfim, esse tutorial é bem útil, pena que eu não uso C-BOX :c

    [♡] s u c k  s u g a r [/♡]

    ResponderExcluir
  2. Ah, esqueci de avisar. Aceito afiliação sim, está na elite <3

    ResponderExcluir
    Respostas
    1. Ebaa já vou te colocar aqui também, obrigada mesmo!

      Excluir
  3. MUITO bacana seu blog, primeira vez que visito =)
    Gostei por trazer um ar meio década de 90, esse layout com as duas colunas, as letras mais pequenas e quadradinhas <3
    Beijão

    ResponderExcluir
  4. Gostei do tutorial, é bem fácil. E o lay free está lindinho, assim como esse que você tá usando :3

    Beijos,
    rainbow of flowers

    ResponderExcluir
  5. muito bom tutorial

    Beeijos, ♥

    http://www.paaradateen.com
    http://www.facebook.com/PAARADATEEN
    INSTAGRAM: @luannaandrade_

    ResponderExcluir
  6. Acabei de ver o layout e ele é mesmo muito bonito e parabéns mais uma vez pela sua meta.
    Esse tutorial é ótimo acho que vou até usar no próximo layout.

    Sweet of Cherry

    ResponderExcluir
    Respostas
    1. Muito Obrigada Marci, que bom que você voltou com o seu blog!!

      Excluir
    2. De nada!!!
      Eu acabei me esquecendo, eu aceito o pedido de afiliação.

      Excluir
  7. Não conhecia esse tutorial só o da CBox normal mesmo, mas essa fica mais bonitinha <3
    Beijoos ♡ || Caramelos Encantados

    ResponderExcluir
  8. Não uso c-box mas ficou bem bonito!
    Desculpe não ter vindo ao seu blog mas tive uma semana sem internet ;__;
    Bjs,

    un--cover.blogspot.com

    ResponderExcluir
  9. Muito legal, super lindo. Otimo tuto.

    Beijos http://valentinices.blogspot.com.br
    https://www.enjoei.com.br/valentinices

    ResponderExcluir
  10. Esse lay ficou tão lindo *-*
    esqueci de te dar parabens pelos 450 seguidores #acho você merece muito mais ^^ vou concerteza usar esse tuto ><
    bjs
    http://cadernodeanimees.blogspot.com.br/

    ResponderExcluir
  11. O TUTORIAL É MUITO ÚTIL.(NÃO ME PERGUNTE PORQUE TO USANDO O CAPS LOCK,EU NÃO SEI) .

    DUDYNHAOLIVEIRA.BLOGSPOT.COM

    ResponderExcluir
  12. Esse tutorial é bem útil para dar um aviso numa imagem mesmo quando não espaço no lay para poder nivelar! ADOREI! Cm certeza deixarei linkado aqui o link :)

    ♡ } constelação de sonhos

    ResponderExcluir
  13. GENTEEEEEEEEEEEEEE
    ME 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

    ResponderExcluir