Architektur Blogger Headline Animator

Architektur Blogger

rss

September 29, 2010

Membuat Buku Tamu Yang Tersembunyi

Kalau sobat ga tau lagi mau taruh buku tamu di mana, buat aja buku tamu yang tersembunyi. dan kalau diklik akan langsung terlihat.
Contohnya kamu bisa lihat di bagian sebelah kanan layar kamu, dan klik tab yang berwarna hijau tersebut. Dan buku tamu itu akan bergerak keluar, sehingga yang tadinya tidak kelihatan akan jadi terlihat.


Nah ga perlu panjang lebar lagi mari kita lihat cara membuatnya:
caranya :
  1. Masuk ke account Blogger kamu, pilih "Layout" kemudian "Page Elements",
  2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
  3. Copy-paste kode di bawah ini:
    Ni codenya:

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

    <!-- Paste kode buku tamu sobat di sini -->

    <br/>
    Mau punya buku tamu seperti ini?<br/>
    Klik di
    <a href="http://Archcom.blogspot.com/2010/09/membuat-buku-tamu-yang-tersembunyi.html">
    sini (Info Blog)
    </a>

    <div style="text-align:right">
    <a href="javascript:showHideGB()">
    [tutup]
    </a>
    </div>

    </div>

    </div>

    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script>

     
    4. Pada kode di atas, Tulisan yang berwarna merah di atas ganti dengan kode buku tamu yang kamu dapatkan dari situsnya,

    5. Kamu juga bisa atur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah kamu. 

    6. Selamat mencoba!


    Terima Kasih Atas Kunjungan Anda..!

    Terima Kasih Atas Kunjungan Anda Di Blog Ini. Jika Ingin Artikel Terbaru Langsung Di Kirim Ke Email Anda? Masukan Email Anda Untuk Berlangganan (GRATIS). Klik Tombol Suka Jika Menyukai artikel ini.
    Related Posts with Thumbnails
    Stumble
    Delicious
    Technorati
    Twitter
    Facebook
    Reddit

    5 comments:

    Christmas tree shops 1 on 29 September, 2010 06:13 said...

    makasih tipsnya bro

    Rizal Tukuwain on 29 September, 2010 22:26 said...

    @Christmas tree shops 1:
    sama2..! makasi udah berkunjung di blog kami

    PIK Remaja Al-Hikmah on 05 October, 2010 23:33 said...

    Wah Tips yang menarik ah harus di coba nich. makasih infonya kawan... sukses selalu

    defchania on 15 November, 2010 23:35 said...

    terima kasih infony

    Sewa Ruang Kantor Jakarta Murah on 14 February, 2012 00:57 said...

    makasih info nya gan...ntar bisa dipraktekan...


    Post a Comment

    Jangan Lupa Tinggalkan Komentar Anda..! Sebab Komentar Anda Sangat Dibutuhkan Demi Pengembangan Blog ini. Asalkan Jangan Spam Dan Komentar Yang Bersifat Menguji. Makasi Atas Kunjungan Anda Di Blog Ini. Thanks for all of you

    Berlangganan via email

    Ingin Artikel Terbaru Langsung ke Email anda? Masukan Email Untuk Berlangganan:


    Delivered by FeedBurner

    Recent Comments



    Mau punya buku tamu seperti ini?
    Klik di sini (Info Blog)