Membuat Kotak Berlangganan Dengan Jquery Dialogue Box

Selamat siang sob...

Postingan pertama di bulan Desember nih... pleased

Pada postingan kali ini, saya ingin berbagi sebuah tutorial membuat kotak berlangganan di blog. Awal nya, saya tertarik saat melihat artikel dari blog Kang Ismet tentang simple dialog box dengan jquery, dialog box nya menarik sekali. Lalu, saya berpikir sepertinya tidak cukup bila hanya sekedar dialog box berisi sebuah atau lebih kalimat. Bagaimana bila dikreasikan dengan sesuatu yang digunakan dalam blog? Akhirnya, saya mencoba untuk memadukannya dengan kotak berlangganan, sehingga kotak berlangganan nya pun menjadi lebih menarik.

Setelah lebih dari 168 jam mencobanya  wat2 saya buatlah tutorial ini dengan tujuan dapat membantu temen-temen dalam mempercantik blog nya... cheer

DEMO

Ok, mari kita mulai menerapkannya :

1. Jalan-jalan dulu ke Feedburner.

2. Login dengan akun Google nya.

3. Masukkan url RSS feed nya, yaitu http://aiizahh.blogspot.com/feeds/posts/default dimana temen-temen dapat mengganti yang berwarna ungu sesuai alamat blog nya masing-masing, lalu klik "Next".

4. Isi judul dan alamat feed nya dan klik "Next".

5. Akan muncul tampilan seperti dibawah, klik "Next" lagi.

6. Pada halaman berikutnya, silahkan klik "Publicize" dan pilih "Email Subscriptions".

7. Selanjutnya klik "Activate".

8. Silahkan simpan kode kotak berlangganannya dahulu.

Lanjut, kita buat dialog box nya :

1. Letakkan kode CSS berikut diatas ]]></b:skin> .

 #aiizahh-box {
    position:fixed;
    top:50px;
    left:50%;
    width:320px;
    margin-left:-160px; /*setengah dari lebar kotak dialog*/
    color:white;
    background-color:#C6E5E9;
    border:8px solid #5DC1D0;
    box-shadow: 0 0 2px 1px black,0 0 3px #C6E5E9;
    font:normal 11px Arial;
    line-height:1.6em;
    padding:15px;
    text-align:left;
    border-radius:3px;
    z-index:1000;
    display:none;
}
.close {
    background:#C7D578;
    color:#000;
    border-radius:3px;
    padding:4px;
    text-align:center;
    margin:25px auto 2px;
    cursor:pointer;
    width:30px;
}
.close:hover {
    background-color:#5DC1D0
}
#box-overlay {
    position:fixed !important;
    position:absolute; /*tambahkan posisi ini supaya fix di IE*/
    z-index:999; /*nilai ini harus dibawah nila z-index pada kotak dialog*/
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    background : url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/Brightness.png);
    display:none;
}

2. Lalu, tambahkan kode berikut diatas </body>.

<script type='text/javascript'>
//<![CDATA[
$(function() {
     //Tampilkan kotak dialog saat .popup diklik
     $('.popup').click(function() {
          $('#aiizahh-box').fadeIn();
          $('#box-overlay').fadeTo("normal", 0.6);
     });
     //Tutup kotak dialog saat .close diklik
     $('.close').click(function() {
          $('#aiizahh-box').fadeOut();
          $('#box-overlay').hide();
     });
});
//]]>
</script> 

3. Terakhir, tambahkan kode HTML berikut.*

<button class='popup'>Subscribe</button>
<div id='box-overlay'></div>
<div id='aiizahh-box'>  
>>>KODE FORM SUBSCRIPTION DISINI <<<   
<div class='close'>OK</div></div>

4. Simpan.

*Keterangan : Silahkan ganti yang berwarna merah dengan kode form subscription temen-temen dari feedburner.

Terima kasih, semoga bermanfaat dan jangan lupa tinggalkan komentar di kotak komentar dibawah...

Dan, jangan lupa subscribe Alya Zahra pada kotak admin dibawah... happy