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.
thanks.... di modif lagi Mas Bro
ReplyDelete