Slide Out Box for Blogger

Slide Box widget merupakan widget yang hampir sama dengan widget floating tapi widget ini mempunyai sedikit perbedaan yaitu widget ini hanya akan tampil apabila halaman anda si scroll kebawah, dan apabila di scroll ke atas lagi maka widget tersebut akan tersembunyi lagi.

Oleh karena itu mengapa widget ini dinamakan Slide Out Box widget. Cara membuatnya pun sangatlah mudah, karena namanya widget cara membuatnya hanya menyalin kode ini dan membuat widget Html/Javascript baru dan menaruh kodenya disana....

Inilah kodenya :

<!--Slideoutbox -->   
<script type="text/javascript" src="http://marewainfo.googlecode.com/files/slidboxordinary.js"></script>   
<div style="position:fixed; width:342px; overflow:hidden; bottom:20px;   
right:10px; display:none;  
background:url(http://1.bp.blogspot.com/_JUg9QsmKp5s/TORmQZAoYXI/AAAAAAAACAI/cLoCJMP1rGo/s000/bo-bg-html.gif)   
repeat; -moz-border-radius:15px; -webkit-border-radius:15px;   
border-radius:15px; border:2px solid #111111;" id="fbslidebox">   

<div style="width:320px; padding:10px; margin:0 auto; overflow:hidden;">   

<a href="#" style="float:right; color:#999; padding:0 3px;   
border:1px solid #CCC; text-decoration:none; font-size:9px; font-family:Verdana, Geneva, sans-serif;" id="fbcloseslidebox">X</a>   

<strong style="color:#66ad3d;">Masukkan Judul Slide-Out-Box</strong>   

///Tempatkan apa saja yang sobat inginkan (gambar,script, facebook dan lain-lain//  

</div></div>  
<!--Slideoutbox end -->  

Demikianlah tutorial dari MWcrew, Selamat mencoba,,,,,,,



"MWcrew"
4 Comments
Related Post

Join the Discussion!

Shinigami
January 13, 2012 7:26 PM | Delete comment

ini yang saya cari cari om
thanks yaw :*

di tunggu kunjungan baliknya

Waff
January 13, 2012 10:16 PM | Delete comment

@Shinigami

Sama-sama gan....

Abang Jo
January 15, 2013 3:14 PM | Delete comment

terima kasih banget gan udah lama muter2 di mbah nyari ini ...tapi ngak tahu namanya jadinya lama nemunya...thanks

makalah Kita semua,
http://makalahkitasemua.blogspot.com/

Dont give a spam please!
Untuk menyisipkan video, gunakan
Untuk menyisipkan gambar, gunakan
Untuk menyisipkan kode, gunakan
Untuk menyisipkan beberapa baris kode, gunakan
Untuk menyisipkan catatan, gunakan
Untuk menciptakan efek teks tebal gunakan