Quang Tri

karena saya tidak pernah memposting tentang tutorial blog, sekarang saya akan mempostingnya dengan judul artikel Cara Buat Kotak Pesan dengan JQuery. Widget ini akan muncul secara tiba-tiba ketika blog kalian dibuka, widget ini sudah saya pasang pada blog saya, dan hasilnya sangat memuaskan bagi saya. Ok! langsung saja jika kalian tidak sabar untuk memasang widget Kotak Pesan ini.



Berikut cara-cara atau step-step untuk memasang widget Kotak Pesan.

1. Buka akun blogger.
2. Masuk tata letak.
3. Add Gadget > HTML/JavaScript.
4. Masukkan scrip/kode berikut ke dalam kolom HTML/JavaScript.

<center><style>#kotak-pesan {position:fixed !important;position:absolute; /* IE6 */top:-1000px;left:50%;margin:0px 0px 0px -182px;width:450px;height:auto;padding:16px;background:#0177c6;border:2px solid #fff;font:normal 1em 'Calibri';color:#111;-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);box-shadow:0px 1px 3px rgba(0,0,0,0.4);}#kotak-pesan a.close {position:absolute;top:-10px;right:-10px;background:#333;font:bold 16px 'Calibri';text-decoration:none;line-height:22px;width:22px;text-align:center;color:#fff;border:2px solid #fff;-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);box-shadow:0px 1px 2px rgba(0,0,0,0.4);-webkit-border-radius:22px;-moz-border-radius:22px;border-radius:22px;cursor:pointer;}</style><script type='text/javascript'>$(window).bind("load", function() {// animasikan nilai top saat halaman telah selesai dimuat$('#kotak-pesan').animate({top:"50px"}, 1000);// hilangkan kotak pesan saat tombol (x) diklik$('a.close').click(function() {$(this).parent().fadeOut();return false;});});</script><div id='kotak-pesan'><!-- KONTEN DI SINI --><p align='center' size="20"/>Selamat Datang di <b>FathanPortal</b></p><div align="center">Selamat Membaca Artikel yang Saya Sediakan!</div><a class='close' href='#'>&times;</a></div></center>

ganti yang berwarna biru sesuai keinginan anda.
Sekian dari postingan saya semoga membantu untuk kalian dalam mempercantik blog, terima kasih atas perhatiannya saya ucapkan terimakasih.


sumber: http://www.fathanportal.co.vu/2013/01/cara-buat-kotak-pesan-dengan-jquery.html