Cara Memasang Kotak Pesan Dengan Pengaruh Slide Pada Blog

Cara Memasang Kotak Slide Pada Blog

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

Silahkan Copy isyarat widget berikut kemudian 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 ketika halaman telah tamat dimuat     $('#box-opickweblog').animate({right:"5px"}, 1000);      // hilangkan kotak pesan ketika 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 bab bawah isyarat <div id='box-opickweblog'> gantilah goresan pena "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 sanggup mengubahnya menjadi width:auto; untuk mode otomatis.