Skip to main content

Salam Blogger, senang Anda berkenan kembali di Blog ini. Artikel kali ini tentang cara Membuat Kotak Berlangganan FeedBurner Dengan Jquery. Sebenarnya apa sih fungsi kotak berlangganan feedburner ini..? Kotak ini berfungsi sebagai media yang mempermudah pengunjung Blog untuk memperoleh informasi ter-update atau terbaru dari artikel Anda. Caranya pengunjung hanya melampirkan alamat E-mailnya yang masih aktif dan secara otomatis pengunjung akan mendapatkan informasi terbaru dari artikel Anda melaluli E-mailnya, dan ini gratis..!!!

Membuat Kotak BERLANGGANAN FEEDBURNER Dengan JQuery

Berikut Cara Membuat Kotak Berlangganan FeedBurner Dengan Jquery.

1. Yang pasti Anda harus mendaftar Feedburner terlebih dahulu.

Bacar juga artikel :    Cara Daftar Google Feedburner

2. Tutorial ini hanya untuk Anda yang pernah mendaftar di Feedburner sebelumnya.
3. Silahkan masuk ke Feedburner
4.Silahkan cari " Publicize" lalu klik dan pilih " Email Subscriptions ".

Membuat Kotak BERLANGGANAN FEEDBURNER Dengan JQuery


5. Kemudian klik " Activate"

Cara Membuat Kotak Berlangganan FeedBurner Dengan Jquery


6. Silahkan simpan kode kotak berlangganan ( Anda bisa menyimpannya di notepad/untuk sementara )

Cara Membuat Kotak Berlangganan FeedBurner Dengan Jquery


Berikutnya masuk Akun blogger Anda, lalu klik TEMPLATE kemudian pilih EDIT HTML, dan ikuti langkah dibawah ini

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

CSS
#tipblogku-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;
}


8. Kemudian, tambahkan kode dibawah ini, diatas </body>.

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

9. Terakhir, tambahkan kode HTML berikut. sebelumnya masuk ke LAYOUT / Tata Letak lalu pilih tambah gadget ( add gadget ).


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


Catatan : Kode diatas yang Anda paste-kan adalah kode pada langkah no. 6

10. Save atau Simpan.

Sekian dulu penjelasan saya tentang Cara Membuat Kotak Berlangganan FeedBurner Dengan Jquery, semoga artikel saya ini bermanfaat bagi sobat blogger semua,. Terima Kasih Salam Blogger.

Jika ada problem dengan tutorial diatas silahkan kontak saya dengan mengisi kontak form atau klik Kotak Saya pada menu side bar atas.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar