[+] Post Title :

Hide Chatbox Or Anything With jQuery

[+] Date : Rabu, 01 Februari 2012
[+] Author : šëHëR!êž Hⁿc
[+] Link : http://seherieshnc.blogspot.com/2011/06/hide-chatbox-or-anything-with-jquery.html
[+] Type : JQuery

Hide Chatbox Or Anything With jQuery, Menyembunyikan chatbox atau apa saja pada blogspot dengan menggunakan script jQuery adalah salah satu solusi sebagai accecories blog ataupun template yg minim yang biasanya membuat kita memutar akal agar chatbox tetap tersedia dan tidak mengurangi atau menggangu tampilan layout blog. Berbeda dengan hidden chatbox biasa, Effect pada script ini lebih terlihat menarik.



Silahkan klik gambar di bawah ini untuk melihat seperti apa hasilnya saat di terapkan pada blogspot kamu.

Bagaimana menarik bukan ? sekarang bagaimana meletakkan nya pada blogspot kamu ? Cukup tambahkan widget HTML/Javascript pada blog kamu. Kemudian copy dan paste script berikut kedalam widget HTML/javascript kamu :

<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
    <style>
.simple_overlay {
   
    /* must be initially hidden */
    display:none;
   
    /* place overlay on top of other elements */
    z-index:10000;
   
    /* styling */
    background-color:#333;
    width:auto;   
    min-height:200px;
    border:1px solid #666;
   
    /* CSS3 styling for latest browsers */
    -moz-box-shadow:0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;   
}

.simple_overlay .close {
    background-image:url(http://flowplayer.org/tools/img/overlay/close.png);
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:35px;
    width:35px;
}

    #triggers img {
        cursor:pointer;
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
       
    }
    </style>



<div id="triggers">
    <img src="http://icons-search.com/img/marvilla-us/brights.zip/brights-brights_icons-chat.ico-128x128.png" rel="#mies1"/>

</div>

<div class="simple_overlay" id="mies1">
YOU FRAME HERE
</div>
<script>
/basics.html#document_ready
$(document).ready(function() {

$("img[rel]").overlay({
    effect: 'drop',
    mask: '#789'
});
});
</script>
<script>
// create custom animation algorithm for jQuery called "drop"
$.easing.drop = function (x, t, b, c, d) {
    return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
};
// loading animation
$.tools.overlay.addEffect("drop", function(css, done) {
  
   // use Overlay API to gain access to crucial elements
   var conf = this.getConf(),
       overlay = this.getOverlay();          
  
   // determine initial position for the overlay
   if (conf.fixed)  {
      css.position = 'fixed';
   } else {
      css.top += $(window).scrollTop();
      css.left += $(window).scrollLeft();
      css.position = 'absolute';
   }
  
   // position the overlay and show it
   overlay.css(css).show();
  
   // begin animating with our custom easing
   overlay.animate({ top: '+=55',  opacity: 1,  width: '+=20'}, 400, 'drop', done);
  
   /* closing animation */
   }, function(done) {
      this.getOverlay().animate({top:'-=55', opacity:0, width:'-=20'}, 300, 'drop', function() {
         $(this).hide();
         done.call();     
      });
   }
);
$("img[rel]").overlay({
    effect: 'drop',
    mask: '#789'
});
</script>

Penjelasan :

• Yang saya beri tanda BOLD BIRU di atas adalah url gambar. Silahkan menggantinya dengan gambar kamu sendiri.
• Yang saya beri tanda BOLD MERAH adalah tempat untuk meletakkan kode chatbox atau apa saja tergantung keinginan kamu.

Untuk melihat sperti apa jika di pasang pada sidebar blogspot silahkan klik di sini . Ok, sekarang blog kamu sudah semakin menarik :D . Silahkan edit dan sesuaikan dengan layout blog kamu. Hepi Tweaking :)