Follow Email Pop Out Widget Blogger

Sebenarnya ini adalah sebuah Plugin Untuk Wordpress. Tapi sekarang tersedia untuk Blogger. Widget ini adalah widget Berbasis Jquery dengan efek popout yang bagus dan halus. Anda akan mendapatkan lebih banyak pelanggan email dengan widget ini dan Sangat mudah untuk Instal di Blog Anda.

Seperti widget ini berdasarkan jQuery plugin, Pertama anda harus memiliki Plugin jQuery dalam template Blog Anda. Langkah ini adalah Diperlukan, Jika Blog anda sudah memiliki plugin ini maka Abaikan Langkah ini. 

Jika Blog Anda Tidak memiliki Plugin ini, Instal Plugin jQuery. Tambahkan baris di bawah ini sebelum kode tag </head>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

1. Langkah instal script popout masukan 2 kode berikut sebelum tag </head>

<style type="text/css">
/*<![CDATA[*/
#drilmfollowSubscribe {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);}
.drilmfollowButton {background: #464646;color: #CCC !important;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;}
.drilmfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBmdzn-rVFHoClYgkXjkKsGE1Ish7A0mGHJ-qiW1ymBU925tQp-M6PsWWgBaY8V2l2TA98mT-l4Ln1VBsGfx8bKS7XqKbbL1L4lX1n6vMzpMtavex2U-Iq6O4p3ADyv0phV6ucCfkHynIb/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
.drilmfollowButton:hover,.followActive {color: #fff !important;}
.drilmfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
.followactive {background-color: #333;}
.drilmfollowForm {padding: 15px;}
.drilmfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
.drilmfollowForm p {margin: 0 0 10px;}
.drilmfollowForm .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;}
.drilmfollowForm form {text-align: center;}
.drilmfollowForm .emailInput:focus {color: #000;border-color: #000;}
.drilmfollowForm .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;}
.drilmFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
.drilmFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
.drilmFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(drilm){drilm(document).ready(function(){drilm.extend(drilm.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=drilm("#drilmfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);drilm(".drilmfollowButton").click(function(e){if(followBox.hasClass("followOpened")){drilm(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{drilm(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>

 2. Terus Add a Gadget >> HTML .Masukkan script ini

<div id="drilmfollowSubscribe" style="display:none;">
<div class="drilmfollowForm">
<a class="drilmfollowButton" href="#" title="Follow"><span>Follow</span></a>
<h3>Follow "<data:blog.title/>"</h3>
<p>Post gratis Instan langsung masuk ke kotak Email</p>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bacablogtekno', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" class="emailInput" name="email" placeholder="Enter Email Anda..."/>
<input type="hidden" value="bacablogtekno" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Berlanggan" class="emailSubmit"/>
</form>
<p class="drilmFollowFooter">
<a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>
</p>
</div>
</div>

3. Teks yang berwarna biru anda ganti dengan ID Feedburner anda.
4. Selanjutnya klik Simpan Template

Thanks for reading & sharing INFO COMPUTER