Cara Membuat Popup Subscribe Form di Blogger

Home / Blog / Cara Membuat Popup Subscribe Form di Blogger

Cara Membuat Popup Subscribe Form di Blogger

By : Waff

Setelah sekian lama mencari tutorial membuat subscribe form bergaya pop up akhirnya saya menemukannya di Timilsina prakash's blog kemudian saya mencoba menerapkannya di blog MWcrew, ternyata bagus juga.

Dari sekian banyak tutorial yang saya cari ternyata pop up nya hanya di tampilkan sekali mengapa hanya sekali? kalau terus-terusan kan lebih bagus.... ya karena pop up nya menggunakan cookie, artinya pop up nya meninggalkan jejak di cookie browser anda dan jika ingin menampilkannya lagi harus menghapus cookie di web browser anda, ribet kan...??? oleh karena itu tutorial kali ini saya buat agar pop up nya bisa tampil berkali-kali di blog.

Preview :

Jika ada yang berminat menggunakannya di blog anda saya maka simaklah tutorial di bawah ini, oh ya kode nya sedikit saya rubah sehingga tampil lebih cantik dan lebih rapi gan. ini dia cara membuatnya....

Tempatkan kode css di atas kode </head>

CSS

<style media='all' type='text/css'>
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:0px solid #cecece;
z-index:1;
}
#popupContact{
margin-top:10%;
margin-left:35%;
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:369px;
width:390px;
background: url(http://i897.photobucket.com/albums/ac173/MWcrew/Feeds.png) no-repeat;
border:0px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#fff;
font-size:22px;
font-weight:700;
border-bottom:0px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:12px;
top:4px;
position:absolute;
color:#FF0000;
font-weight:700;
}
</style>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://yensdesign.com/tutorials/popupjquery/popup.js' type='text/javascript'/>

Untuk membuatnya tampil secara terus-menerus cari kode <body> dan ganti dengan kode berikut...

<body onLoad="loadPopup()">

Sekarang cari kode <body> dan tempatkan kode berikut tepat dibawahnya...

<div id='popupContact'>
<a id='popupContactClose'>x</a>
<h1>Subscribe My Blog !</h1>
<center>

<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/><br/>
To receive the news update from our blog, please fill this form with your email then open your email and confirm the link.
<style>

.mbt-email{
background:url() no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 0px;
float:center;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#58ACFA
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:200px;
color:#666;}
</style>

<div class='mbt-email'>

<form action='http://feedburner.google.com/fb/a/mailverify' id='feedform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=MuhammadWafi&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input class='textarea' gtbfieldid='3' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}' onfocus='if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter email address here'/>
<input name='uri' type='hidden' value='MuhammadWafi'/><input name='loc' type='hidden' value='en_US'/>
<input class='mbt-emailsubmit' type='submit' value='Submit'/>
</form>
<div style='padding-left:10px'><a href='http://feeds.feedburner.com/MuhammadWafi'><img alt='MWcrew' height='26' src='http://feeds.feedburner.com/~fc/MuhammadWafi?bg=FF9900&amp;fg=FFFFFF&amp;anim=1&amp;label=listeners' style='border:0' width='88'/></a>
</div></div>
</center>
</div>
<div id='backgroundPopup'/>

Simpan...