December 3, 2013

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


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

35 comments

  1. Terlihat lebih menarik dari sebelumnya..

    ReplyDelete
  2. salam dik..
    pembahasannya cukup simpel dan jelas ,,,
    saya harus banyak belajar dari blog adik .. apalagi dalam hal menjelaskan ...
    salam yah..
    assalamu alaikum.

    ReplyDelete
    Replies
    1. Wa'alaikum salam mba...
      Terima kasih atas apresiasinya... pleased

      Delete
  3. keren dan simpel. salam kenal..

    ReplyDelete
  4. keren artikelnya :x

    ReplyDelete
  5. Meskipun saya sudah lama blogging, sampai sekarang belum mengerti tentang feedburner

    ReplyDelete
    Replies
    1. hmm... saya juga masih mencoba mengerti dan mempelajari mas... pleased

      Delete
  6. wahh keren juga mba.. oh iya udh saya follback..

    ReplyDelete
  7. thanks atas kunjungan di blog saya, sudah saya follback sobat

    ReplyDelete
  8. tutorialnya sederhana,,namun mudah untuk memahaminya...luarbiasa :-)

    ReplyDelete
  9. dulu udah pernah pasang kotak berlangganan di blog mbak, selama kurang lebih 4 bulan, tapi nggak ada pengunjung yang langganan blog saya. jadi saya lepas lagi deh hehe :D

    ReplyDelete
    Replies
    1. hehehe, yah itu lah permasalahan yang menimpa saya juga mba... spoiled

      Delete
  10. ilmu buat malem ini :)
    makasih gan :D

    ReplyDelete
  11. Sudah lama saya tidak mengurus blog-blog saya jadi harus baca berulang-ulang untuk mengerti post "Membuat Kotak Berlangganan jQuery Dialog Box" ini gan.. Terima kasih sudah berbagi. jadi mau urus lagi blog HOTLINE TERKINI saya gan.

    Oh ya mau tanya nih gan, kenapa semua blog saya, tidak bisa "EDIT LAYOUT" ya?. Makasih sebelumnya gan. Salam.

    ReplyDelete
    Replies
    1. saya juga sudah lama tidak mengurus blog ini gan, baru2 saja bisa ngeblog lagi...

      Delete
  12. mantap gan tutorialnya thanks,,,, kunjung balik dan follow back ya,,,,,
    http://endri-daryanto.blogspot.com/2013/12/download-activator-windows-7-full.html

    ReplyDelete
    Replies
    1. ok gan, terima kasih atas kunjungannya... shake

      Delete
  13. kotak langganannya jadi cakep. terimakasih atas kode css nya/

    ReplyDelete
  14. Bệnh giãn tĩnh mạch ngày càng trở nên phổ biến trong cuộc sống hiện đại. Tuy nhiên, không phải ai cũng biết về căn bệnh này.

    ReplyDelete
  15. Tìm hiểu về bệnh tiểu đường để biết được sự nguy hiểm của căn bệnh này.

    ReplyDelete
  16. Bình thường những nha sĩ có thể làm hàm răng giả hoặc cầu tháo lắp giữ khoảng chỗ mất răng !
    standa
    on ap lioa
    standa 10kva
    standa 10kva
    standa
    standa

    ReplyDelete