Cara Membuat Widget Email Subscribe Melayang/Pop Up di Blog

Ok sobat, berikut ini seocips akan membagikan widget blog yaitu widget email subcribe efek popup atau yang lebih kita kenal dengan widget berlangganan artikel tapi dengan efek popup. Jika kamu belum tahu kegunaanya bisa baca artikel yang sudah kami bagikan sebelumnya: membuat widget berlangganan via email sederhana. Salah satu kelebihan widget ini adalah tempilannya yang kelihatan mewah dan profesional.

Popup Email Subscribe

Tampilan Popup Email Subscribe ini adalah seperti gambar diatas. Bagaimana keren bukan? untuk lebih jelasnya kamu dapat melihat demonya dibawah ini:

DEMO SHOW

Untuk menggunakannya sebelumnya sebelumnya blog sobat sudah terdaftar di Google Feedburner, kalau belum, baca: cara daftarkan blog ke Rss Feedburner. Oh iya berbicara mengenai popup baca juga: widget popup email subcription V2 dan Membuat popup dengan tombol. Ok berikut..

Cara memasang widget Feedburner melayang di Blog

Cara memasangnya, kamu tinggal memasukan kode di bawah ini ke dalam widget HTML/JavaScript di blog kamu:

<style type="text/css">
* html #exestylepopupdiv {position:absolute;}
#exestylepopupdiv {z-index: 999999;display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4w2d9M86zM2O9WC0U95-s-ifmZ2PAI2_k_wq-x8K9RcgjZSICO3p15JcSDNaBDsCMPfOq-qkq66lEHbfuUv_QBqH-e5liWlrPZrshGHXzh1K4-A5-boU9tpOcIaqzCl2vReQNYgeNQg/s128/exeideasopacity0.5.png');margin:0; overflow-y:auto;}
#exestylepopup {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkVCf8KAS7RYSipOhiUgQSWbvKRz9lJNq9Rv4bRIdOJJY9FALe49oWKePUa6HFRTd8-aMADU9LrRT1507daXHlf6Fl4rdmCATgvfk3uM82oofHavsUssLtOCoLRI91AbPICPM6a8RR2A/s748/EXEIdeasBlog.png); background-repeat:no-repeat; overflow:none;}
.exestylepopup {width:770px; height:334px; position:fixed; top:50%; left:50%; margin-top:-167px; margin-left:-396.5px;}
form#exestylepopup {display:block; margin:0;}
form#exestylepopup #exefield {padding:2px; position:absolute; top:171px; left:480px; width:200px; font-size:16px; border:none; background:transparent;}
form#exestylepopup #exebutton {position:absolute; left:474px; top:214px; width:249px; height:42px; border:none; background:transparent;}</style><!--[if lte IE 6]><style type="text/css">/*<![CDATA[*/html {overflow-x:auto; overflow-y:hidden;}/*]]>*/</style><![endif]--><div id="exestylepopupdiv"><div id="exestylepopup" class="exestylepopup"><center style="color:#000;cursor:pointer;float:right;margin-right:-20px;margin-top:-20px;" onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1wTxsCIewNlsT55EmawbaF2kWPl9bzvryPya-T0062SAM0BBvI-efCtUFDJPJHSeGnhKEpXLrZALeew-rtW_zcAXAiJmTF2VIs8xWnFDfUtKkAA4avFCkYc4AtgvnC40dBsNIq_nssg/s40/exeideasclose.png"/>
</center><form id="exestylepopup" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=seocips', 'popupwindow', 'scrollbars=yes, width=600, height=550'); return true">
<input type="hidden" value="seocips" name="uri"/>
<input type="text" id="exefield" name="email" value="Enter Your E-Mail Here..." placeholder ="Enter Your E-Mail Here..." /><input type="hidden" name="loc" value="en_US" />
<input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj09nBa4sMH7JRCjwXXnhBEOJdPl15SN_C12HTofgdu61VmiEU3bmDV-F5NJjsCvlPCf9L_irGa3ObFnvgSwa0MB6-Bqf9yF41r8aIPYJGkgAT1x7iTN1ojLybBqn_GMmRML4t0RFKFOQ/s128/exeideasblank.gif" id="exebutton" /></form></div></div>

Ganti tulisan seocips (berwarna diatas) dengan id widget feedburner milik kamu, simpan dan uji coba apakah berhasil atau tidak. Oh iya sob, jika kamu tertarik ingin memasang widget seperti ini dibawah postingan, coba baca:

• Memasang Widget Feedburner di bawah Postingan

Ok sobat sekian cara membuat email subscribe melayang / Widget Berlangganan efek popup melayang di blog, semoga bermanfaat.