Cara Memasang Kotak Pesan Dengan Efek Slide Pada Blog

Cara Memasang Kotak Slide Pada Blog

Simple Slide Box atau Kotak Slide ini merupakan widget ringan untuk blog. Kotak slide ini dapat Anda isikan dengan widget atau pun dengan tulisan saja. Widget ini akan muncul hanya ketika loading pada blog/web selesai di muat maka, widget ini akan otomatis muncul pada blog sobat. Bila ingin mencoba widgetnya silahkan ikuti tutorial berikut.

Silahkan Copy kode widget berikut lalu letakkan pada HTML/Javascript pada Tata Letak Blog sobat.

<style>
#box-opickweblog{position:fixed!important;position:absolute;/* IE6 */
  top:70px;z-index:999;right:-1000px;width:300px;margin:0 0 0 -182px;height:auto;font:normal 12px Arial,Sans-Serif;padding:8px 10px 20px 10px;background-color:#fff;line-height:1em;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4)}
#box-opickweblog a.close{position:absolute;bottom:0;left:0;background-color:transparant;font:normal bold 20px Arial,Sans-Serif;text-decoration:none;line-height:22px;width:22px;text-align:center;color:#444;transform:rotate(0);cursor:pointer}
#box-opickweblog a.close:hover{transform:rotate(360deg);color:#efb16f;}
#box-opickweblog a.get-widget{position:absolute;bottom:2px;right:2px;font-size:11px;color:#c8c8c8;cursor:pointer}
#box-opickweblog a.get-widget:hover{color:#444;}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>
<script type='text/javascript'>
$(window).bind("load", function() {

    // animasikan nilai top saat halaman telah selesai dimuat
    $('#box-opickweblog').animate({right:"5px"}, 1000);

    // hilangkan kotak pesan saat tombol (x) diklik
    $('a.close').click(function() {
        $(this).parent().fadeOut();
        return false;
    });

});
</script>
<div id='box-opickweblog'>

ISI DENGAN KONTENT/WIDGET YANG ANDA INGINKAN.

    <a class='get-widget' href='http://goo.gl/KdnmpQ' target='_blank' title='Get This Widget'>get widget</a>
    <a class='close' href='#'>&times;</a>
</div>

Keterangan :

1. Pada bagian bawah kode <div id='box-opickweblog'> gantilah tulisan "Isi Dengan Kontent/Widget Yang Anda Inginkan." dengan isi kotak slide atau dengan widget lain seperti, like box, jam, kalender dll.

2. Atur lebar kotak slide dengan mengganti nominal pada width:300px;, Anda juga bisa mengubahnya menjadi width:auto; untuk mode otomatis.

Bagikan Artikel ini