Image & Snippet

Membuat Buku Tamu/Chat Box Show Hide

Ditemani secangkir kopi dan dan beberapa batang rokok saatnya posting,,,hehehehe,,baiklah gakusah pnjang lebar lg,,buku tamu/chat box mnurut saya bnyak gunanya dan sangat bermanfaat,gmn nrut sobat dexto???jika penting ,inilah cara membuatnya..


1. Masuk ke account Blogger kamu, pilih Layout: kemudian Page Elements.
2. Klik "Add a Gadget" yang mana saja, kemudian pilih "HTML/JavaScript",
3. masukan  kode di bawah ini:

<style type="text/css">

    #at{
    position:fixed;
    right:450px;
    z-index:+1000;
    }
    * html #at{position:relative;}
    .attab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url();
    }
    .atcontent{
    float:left;
    border:2px solid #33e104;
    background:url(http://i846.photobucket.com/albums/ab26/arifins/fire.gif)#000000 repeat-x bottom center scroll;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;
    padding:10px;
    -moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
    }
    </style>
    <script type="text/javascript">
    function showHideAT(){
    var at = document.getElementById("at");
    var w = at.offsetWidth;
    at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
    at.opened = !at.opened;
    }
    function moveAT(x0, xf){
    var at = document.getElementById("at");
    var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    at.style.top = x.toString() + "px";
    if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="at">
    <div class="attab" onclick="showHideAT()"> </div>

    <div class="atcontent">
    <div align="center">
    <div style="background:#000;">


    <!-- Simpan Kode cbox atau shoutmix nya disini -->
 </div>
    </div>

    <br />
    <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" alt="close" title="Click here to Close Cbox" /></a></div>

    <span ><a href="http://dextoshare.blogspot.com/2012/01/membuat-buku-tamuchat-box-show-hide.html"><div style="color: rgb(68, 68, 68);">
    <span style="font-size:xx-small;">Get This Gadget</span></div></a></span>
    </div></div>
<script type="text/javascript">
    var at = document.getElementById("at");
    at.style.top = (-200-at.offsetWidth).toString() + "px";
    </script>

    <a href="javascript:showHideAT()"/><img border="0" src="http://i634.photobucket.com/albums/uu66/oktri_2009/o0c2d.png" alt="Fivers" title="Klik untuk membuka Buku Tamu" style="display:scroll;position: fixed; bottom:350px;right:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ; /></a>
    </div>


4.Simpan

masukan buku tamu sobat pada text yang berwarna merah
dan sobat bisa memodifikasi yang lain sesuai template/selerasobat dextoshare




Close

18 komentar:

  1. bagua banget nih informasinya.
    tapi saya masih bingung mau pake chatbox ato kaga. heheheeee...

    BalasHapus
  2. @Fahmi Setiawanjahahha mna co2k gan,,,lo sran saya jngan,,,:D

    BalasHapus
  3. Assalamualaikum...

    Mas maf ya OOT. Aq mw tanya, knapa ya blog aq kq ndak bisa dikasih breadcrumbs.....? N gimana sih caranya buat menu spoiler yang kyak di blog kmu ntu......? Tolong dijwab ya mas, aq sngat menghargai bantuan dari kmu.

    Smoga God Bless You......!

    Wassalamualaikum...

    BalasHapus
  4. @The7Bloggerswlkum salam,,,y sob di tunggu j next post...

    BalasHapus
  5. @MiftachudinMas bagi donk ilmunya supaya bisa membuat navbar hilang permanent. Tolong ya, cz aq mau mempercepat load blog aq mas?

    BalasHapus
  6. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  7. @The7BloggersTu dah saya post mga bisa mmbantu,,klo mu nghilangkan tinggal tmbah{display: none;} stau saya itu tdk trlalu brpngruh pada load blog..:D

    BalasHapus
  8. trik yang bagus dan bermanfaat sob

    tapi saya bookmark dulu, karena kalau menurut hemat saya, lebih baik berkomentar langsung di postingnya si empu blog dari pada di buku tamu, kata para MASTER SEO bisa berguna untuk backlink blog kita,, hehehehehe

    tapi kode yang sobat share, berguna juga untuk mempercantik box komentar,, muaaanteeeep daaaahh :D

    BalasHapus
  9. ilmu yang keren gan ...
    btw blognya bagus gan ... ;)

    BalasHapus
    Balasan
    1. mksihh mas,,blog mas lbih keren,,,:D

      Hapus
  10. mampir sejenak kemari kawan. ^_^

    BalasHapus
  11. makasih ommm

    visit balik muizcyan.co.vu

    BalasHapus
  12. saya izin share di blog saya yah :)

    BalasHapus

Dexto Share™ © 2011-2012 Redesain Miftachudin - Didukung Oleh Blogger

Pemberitahuan

Saat Ini Saya Juga Aktif Di Dextozine

Terimakasih