Drop a comment if you stay right here
Home » » [Tips] Cara Membuat 'Buku Tamu Tersembunyi' pada Blog

[Tips] Cara Membuat 'Buku Tamu Tersembunyi' pada Blog

Mungkin kebanyakan orang sudah memiliki blog, dan sudah mengetahui cara ini. Saya cuma mau share saja gimana caranya membuat 'Buku Tamu' tersembunyi pada blog. 'Buku Tamu' tersembunyi ini, dapat digunakan untuk chatting,
bahkan bisa digunakan sabagai buku tamu seperti buku absen di sekolah-sekolah. Unik bukan?? xD



Buku tamu ini tidak seperti buku tamu atau box chatting biasa, tempatnya tersembunyi (sesuai dengan namanya) untuk membukanya terdapat tulisan di sebelah kanan layar bertuliskan 'Buku Tamu'. Yah tombolnya seperti gambar dibawah :


Baiklah, berikut langkah untuk membuat 'Buku Tamu Tersembunyi' :
  • Login ke akun blogspot
  • Klik Rancangan/Design >> Page Element >> Add a Gadget >> HTML/Javascript
  • Copy paste kan semua kode di bawah ini dan masukkan di dalam konten HTML/Javascript
    <style type="text/css">
    #gb{
    position:fixed;
    top:50px;
    z-index:+1000;
    }
    * html #gb{position:relative;}

    .gbtab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
    }
    .gbcontent{
    float:left;
    border:2px solid #A5BD51;
    background:#F5F5F5;
    padding:10px;
    }
    </style>

    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 30-w) : moveGB(20-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">

    <--Kode CBOX-->

    <div style="text-align:right">
    <a href="http://cbox.ws">
    [Wants??]
    </a> by Abang <a href="javascript:showHideGB()">
    [Close]
    </a>
    </div>

    </div>

    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script></div>
     
  •  Ganti tulisan yang berwarna merah dengan kode Shoutmix atau Cbox teman-teman semua, tulisan hijau boleh diganti dengan link blog anda atau link cbox, dan tulisan berwarna orange bisa diganti dengan nama anda.
  •  Jika sudah lalu klik save dan lihat hasilnya. 
Gimana?? Menarik dan membantu bukan?? :D 
Semoga bermanfaat yah... :D
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

3 komentar:

Entis Sutisna mengatakan...

nice post sob....
pasti banyak yg mencobanya....
hppy blogging....

kakve_santi mengatakan...

ada cbox dibalik dinding. hehehe

abang 'iky' mengatakan...

@ entis sutisna
iyaa sob mksh ;))

@kakve iyaa ni sob .hihihih

Posting Komentar

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Abangrizky - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger
Read more: http://majuter.us/2012/02/13/membuat-iklan-melayang-tanpa-mengganggu-pembaca#ixzz1n62dVtL1 Under Creative Commons License: Attribution Non-Commercial No Derivatives