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..!!!
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 ".
5. Kemudian klik " Activate"
6. Silahkan simpan kode kotak berlangganan ( Anda bisa menyimpannya di notepad/untuk sementara )
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 ).
Catatan : Kode diatas yang Anda paste-kan adalah kode pada langkah no. 6
<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.