Cara Membuat Widget Berlangganan Email Seperti WordPress

[Platform Blogspot/Blogger] Pernah melihat Widget Pop Up Float Follow pada blog WordPress, dan apakah Anda tertarik untuk membuatnya? Silakan Anda ikuti tutorial yang akan diberikan ini tentang cara membuat widget berlangganan Email Pop up seperti Wordpress.

Demonstrasi » Disini (lihat bagian kanan bawah)

Silakan ikuti tutorial dibawah untuk pemasangan.
1. kalian harus mendapatkan Link FeedBurner, karena ini berfungsi sebagai pengirim email nanti untuk berlangganan, contoh alamat http://feeds.feedburner.com/newsinfopedia
(untuk mendapatkan link tersebut Anda bisa menuju tab Layout » Add Gadget » Follow By Email » Ambil linknya.

2. Masuklah ke tab Layout » Add Gadget » HTML/Javascript.

3. Masukan Kode berikut:

<style type="text/css">
/*<![CDATA[*/
#newsinfopediaSubscribe {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
.followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
.NewsinfopediaButtonFollow {background: #464646;color: #fff;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
.NewsinfopediaButtonFollow span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnXPzONXvwCS66TazQm8XhV9GjzQdiwmLTuGudNWd4PItJO_ye5LbQRxQTVow6HIsy6OOtjxP5_GnU23MOK_niPnGTkz2mQ3IKklsN5S_EJ28av_nfG38D5dmrWNTWZR3sdrchxiJSHPsS/s1600/follow-djnote.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
.NewsinfopediaButtonFollow:hover,.followActive {color: #fff !important;}
.NewsinfopediaButtonFollow:hover span,.followActive span {background-position: 0 -37px !important;}
.followactive {background-color: #333;}
.NewsinfopediaForm {padding: 15px;}
.NewsinfopediaForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
.NewsinfopediaForm p {margin: 0 0 10px;}
.NewsinfopediaForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
.NewsinfopediaForm form {text-align: center;}
.NewsinfopediaForm .emailInput:focus {color: #000;border-color: #000;}
.NewsinfopediaForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
.emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
.emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
.NewsinfopediaFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
.NewsinfopediaFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
.NewsinfopediaFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(newsinfopedia){newsinfopedia(document).ready(function(){newsinfopedia.extend(newsinfopedia.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=newsinfopedia("#newsinfopediaSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);newsinfopedia(".NewsinfopediaButtonFollow").click(function(e){if(followBox.hasClass("followOpened")){newsinfopedia(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{newsinfopedia(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>
<div id="newsinfopediaSubscribe" style="display: none;">
<div class="NewsinfopediaForm">
<a class="NewsinfopediaButtonFollow" href="#" title="Langganan">Berlangganan</a>
<h3>Berlangganan Lewat Email</h3>
<p>Dapatkan Update berita dan artikel kami gratis</p>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=newsinfopedia', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="emailInput" name="email" placeholder="Masukan Email Anda..." type="text" />
<input name="uri" type="hidden" value="NewsInfoPedia" />
<input name="loc" type="hidden" value="en_US" />
<input class="emailSubmit" type="submit" value="Subscribe" />
</form>
</div>
</div>

Catatan: Anda bisa rubah kode diatas sesuai kesinginan Anda agar menjadi widget yang lebih berbeda.

4. Anda dapat rubah/edit teks yang diberi warna ungu tersebut sesuai keinginan Anda. Dan yang berwarna kuning silakan Anda ubah dengan alamat terakhir dari Akun FeedBurner Anda.

Catatan : Apabila tidak muncul, silakan tambahkan kode jQuery pada blog Anda. Tidak munculnya widget disebabkan karena blog Anda belum terpasang jQuery.
Anda bisa gunakan jQuery versi :
- 1.4.2
- 1.7.1
- 1.8.3
- 1.8.23