Cara Membuat Popup Subscribe Form di Blogger

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...


Note :

  • Ganti kode yang berlatar kuning dengan ID feedburner anda

Sekian tutorial dari MWcrew, selamat mencoba......
13 Comments
Related Post

Join the Discussion!

Yustin Annisa
August 08, 2012 11:33 AM | Delete comment

Thanks gan :D

kedy
January 29, 2013 9:22 PM | Delete comment

Makasih gan, sudah ane praktikan deh :D
Nitip situs sederhana gua ya Internet Science

kedy
January 29, 2013 9:23 PM | Delete comment

Wah ane praktikin yah gan, makasih tutorial nya
Nitip situs sederhana gua ya Internet Science

Kirain popup yg muncul pas blog kita ditutup, aku sedang cari yg itu

MWcrew
June 01, 2013 2:15 AM | Delete comment

@Toko Online BaruSearching google aja :D

Keren gan popupnya, kalo dipake untuk worpress bisa gak?, kalo bisa gimana caranya? ;)

MWcrew
October 06, 2013 9:25 AM | Delete comment

@$ 0.01 Hostgator Coupon Wah belum pernah nyoba kalo di wordpress... :)

tutorial89
January 30, 2015 8:36 PM | Delete comment

ada gak yang langsung kodenya di widget?

Dont give a spam please!
Untuk menyisipkan video, gunakan
Untuk menyisipkan gambar, gunakan
Untuk menyisipkan kode, gunakan
Untuk menyisipkan beberapa baris kode, gunakan
Untuk menyisipkan catatan, gunakan
Untuk menciptakan efek teks tebal gunakan