Tips Menyembunyikan Chat Box (Buku Tamu) dengan Animasi jQuery

Dalam artikel ini, saya ingin berbagi widget chatbox menggunakan animasi jQuery untuk blogger yang ingin blognya terasa lebih ramai akan pengunjung.
Yah, dengan chat box atau buku tamu ini, pengunjung bisa meninggalkan lapak atau kesan pesan buat blog anda.

ChatBox yang satu ini sedikit berbeda dari chatbox sebelumnya yang pernah saya singgung. Contohnya anda bisa melihat chatbox yang berada di sebelah kanan halaman.
Chatbox tersebut saya aplikasikan dengan jQuery dan tambahan CSS yang membuat tampilan widget ini terlihat begitu menarik.

Selain itu, saya juga menambahkan fitur edit CSS langsung di sini beserta contoh preview dari hasil edit supaya anda bisa merubah segi penampilannya tanpa ribet-ribet, sekaligus ini merupakan salah satu media pembelajaran bagi yang ingin belajar CSS.

Berikutnya langsung saja ke tahap pemasangan ChatBox nya.
  1. Bagi anda yang belum memiliki widget buku tamu, anda bisa daftar di CBOX secara gratis dengan klik link ini.
  2. Pertama kali copy paste plugin jQuery ini di atas tag </head>.
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
    <script src='http://sektim-project.googlecode.com/files/jquery.slidePanel.fx.js' type='text/javascript'/>
  3. Rubah style CSS di bawah ini dengan style gaya yang diinginkan. Jika ingin menambahkan attribute di css ini mohon tidak untuk menekan tombol Enter. Gunakan sisa space yang masih ada.
  4.   /*******************************************
      **       CSS Untuk Button ChatBox         **
      ********************************************/
    
    a.buku-tamu {
     position: absolute;
     background-image:url(http://3.bp.blogspot.com/-Q-BhrpjOzAM/TuXUDONfL1I/AAAAAAAAGjc/w7SWY_hObHA/s1600/submenu.png);
     text-decoration: none;
     font-size: 16px;
     letter-spacing:-1px;
     font-family: verdana, helvetica, arial, sans-serif;
     font-weight: bold;
     z-index:1001;
     -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
     -ms-transform:rotate(-90deg);
    }
    
    a.buku-tamu.right {
     color:#fff;
     text-shadow:#000 0.2em 0 0.2em;
     right: -31px;
     padding:10px 10px 6px 10px;
     -moz-border-radius-topright: 10px;
     -moz-border-radius-topleft: 10px;
     -webkit-border-top-right-radius: 10px;
     -webkit-border-top-left-radius: 10px;
     -ms-border-top-right-radius: 10px;
     -ms-border-top-left-radius: 10px;
     -o-border-top-right-radius: 10px;
     -o-border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     border-top-left-radius: 10px;
    }
    
      /*******************************************
      **        CSS Button saat diklik          **
      ********************************************/
       
    a.buku-tamu.right:active {
     color:#fcdc00;
     padding:12px 10px 6px 10px;
     text-shadow:#000 0.1em 0 0.1em;
    }
    
      /*******************************************
      **        CSS Button saat active          **
      ********************************************/
       
    a.active.buku-tamu {
     color:#fcdc00;
     box-shadow:0 0 20px rgba(0,0,0,0.5);
     text-shadow:#000 0.1em 0 0.1em;
     padding:10px 10px 6px 10px;
    }
    
      /*******************************************
      **       CSS Untuk Content ChatBox        **
      ********************************************/
    
    .sektim-box-class {
     color:#000000;
     position: absolute;
     display: none;
     background-image:url(http://3.bp.blogspot.com/-Q-BhrpjOzAM/TuXUDONfL1I/AAAAAAAAGjc/w7SWY_hObHA/s1600/submenu.png);
     z-index:99997;
     text-align:center;
     -webkit-border-radius: 10px;
     -o-border-radius: 10px;
     -moz-border-radius: 10px;-o-border-radius: 10px;
     -ms-border-radius: 10px;
     border-radius: 10px;
    }
    
    .sektim-box-class.right {
     opacity:0.9;
     right: 33px;
     padding: 11px;
     border: 2px solid #FCDC00;
     box-shadow:0 0 20px rgba(0,0,0,0.5);
    }
    
    /*****************************************************************************
    **          CSS Content ChatBox disaat cursor masuk area content            **
    ******************************************************************************/
    
    .sektim-box-class.right:hover{
     opacity:1;
    }
    

Memasang Widget Chat Box

Jika anda sudah selesai dalam pengeditan CSS di atas. Ikuti langkah seperti yang ada di bawah ini.
  1. Copy paste kode CSS di atas pada form di bawah ini.
  2. Copy paste kode Buku Tamu anda pada form kedua.
  3. Pilih tombol "Tambahkan!" untuk mengaktifkan widget Chat Box.
* Kode CSS *
* Kode Chat Box *
Enjoy!
sumber

11 comments

zep,cara misahin icon facebook,home,css yang di atas posting tu gi mana ya gan??? mohon pencurahannnya?

Reply

Coba pasang ulang templatenya gan.

Reply

tolong kasih tau gan apa tu ccs

Reply

Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

http://id.wikipedia.org/wiki/Cascading_Style_Sheets

Reply

Mantap sekali tips menyembunyikan buku tamunya.. :)

Reply

Makasih banyak uda share ilmunya gan.. Tapi kode CSS dan kode Chatboxnya kok gak muncul ya..

Reply

Langsung di coba sob.. salam kenal ya Aulia..

Reply

Tips buku tamunya keren bro..

Reply

mampir dulu mazzz...

Reply

Mantap brow, dicoba dulu ya?

Reply

Post a Comment