Membuat Langganan Email Menggunakan jQuery


Alhamdulillah... Sekian lamanya aku tidak ngeblog, pada hari ini aku akan memberikan sedikit Tutorial yang tidak terlalu penting sih namun jika sobat ingin mencobanya silakan di buat di blog sobat sendiri.

Sobat pasti tahu apa itu Langganan Email, ini merupakan sebuah kolom  yang di dalamnya kita dapat berlangganan pada suatu blog yang kita ikuti, melalui email Sobat, memang sangat banyak dan sudah tidak asing lagi para blogger membuat blognya dengan menampilkan sebuah kotak Langganan Email, mengapa? menurut ku ini merupakan cara agar menaikan trafic pengunjung pada suatu blog apabila si Penulis Blog menulis suatu artikel.

Di sini aku akan membuat sebuah Kotak langganan email dengan gaya pop up, Bagaiamana? "Kotak email yang aku buat, pada setiap yang berkunjung ke suatu halaman blog akan keluar sebuah kotak yang di dalammnya akan berisi kotak subcribe. seperti contoh di bawah ini :


Menurut ku ini sebuah widget yang bagus di pasang di blog sobat, Menagapa? Kelebihannya sangat banyak yaitu:
  • Membuat Pengunjung dapat berlangganan secara langsung melalui emailnya.
  • Tidak berat dan tidak membuat sebuah blog menjadi susah di buka atau crash
Untuk lebih cepatnya dan menghemat waktu, mari kita coba membuatnya.


Tahap Pertama

1. Login » Blogger
2. Rancangan » Edit HTML
3. Kemudian Cari kode ]]></b:skin> Kemudian letakan kode di bawah ini tepat di atas kode ]]></b:skin>

*/  SUBCRIBEMAIL POPUP */
#popupContactClose{
cursor: pointer;
text-decoration:none;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}

4. Kemudian masukan kode di bawah ini sebelum Kode </body>
<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>Judul Subcribe</h1>
<p id="contactArea">
Masukan Kode Subcribe email di sini
</p>
</div>
<div id="backgroundPopup"></div>

Sobat bisa membuat sebuah kotak langganan email menggunakan feedburner, contohnya seperti yang bercetak tebal di bawah ini

<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>Subscription to SimplexDesign</h1>
<p id="contactArea">
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=codelain', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>Enter your email address:</p>
<p><input type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="Simplex" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" />
</form>

</p>
</div>
<div id="backgroundPopup"></div>

Kode yang berwana tebal adalah kode subcribe yang didapat dari feedburner.
Untuk mendapatkan kotak langganan Feedburner silakan ikuti petunjuk ini.
login to your feedburner account » click on your blog feed » click on Publicize tab » Click on Email Subscriptions » Active this service » Kode Langganan berada di dalam kotak URL .


5. Pada tahap ini kita akan memasukan kode jQuerynya, silakan Sobat cari kode </head> Kemudian masukan kode di bawah ini tepat di atas kode </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="http://dinhquanghuy.110mb.com/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
var popupStatus = 0;
//this code will load popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}

//This code will disable popup when click on x!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}

//this code will center popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});

}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie("anewsletter") != 1) {
//centering with css
centerPopup();
//load popup
loadPopup();
}
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
}
});
});
</script>


Pop-up tidak akan muncul selama 7 hari jika pengunjung pernah berkunjung ke blog kita, maka dari itu widget ini tidak akan menggangu pengunjung untuk berkunjung ke blog kita, jika sudah 7 hari pop-up akan muncul kembali.
Backup lah template sobat, jaga-jaga jika ada kesalahan dalam pembuatannya,

6. Jika tutorial di atas sudah di ikuti dan sudah selesai, kemudian klik SAVE TEMPLATE

Alhamdulillah tutorial yang di buat sudah selesai, silakan sobat membuatnya sendiri di blog sobat, Selamat mencoba

7 Responses to "Membuat Langganan Email Menggunakan jQuery"

  1. berkunjung ke blog teman lama sambil minta sumbangan klik submit feeds :D

    ReplyDelete
  2. mantap postingannya boy....
    follow and comment me

    ReplyDelete
  3. wah makin lama makin mantap oiy.... happy blogging, sekalian followan end tukeran link yuk?

    ReplyDelete
  4. thanks sob atas triknya :) ane belom ngerti2 kyk ginian :) ijin bookmark yah gan :) jgn lupa berkunjung ke blog ane yah gan :)

    ReplyDelete