Email subscribe popup blogger - Modif Sendiri

    Halo, sambil ngabuburit nonton tv, saya mau meluangkan sedikit waktu untuk share artikel ini. Pada waktu yang lalu, saya sedang mencari widget subscribe email popup blogger di Google. Setelah saya mendapatkan scriptnya, saya modif lagi karena saya rasa tidak enak, karena widgetnya berjudul follow. Seperti apa widget yang sudah saya modif sendiri? Seperti ini :

Vers. Infoiki - LIVE DEMO

       Nah, tenang saja anda bisa memodifikasi SENDIRI bila anda tidakk suka dengan versi saya. Ok, ini adalah versi yang sering digunakan untuk peminatnya :

       Ok, mulai...

1. Login blog.
2. Tata letak.
3. Add gadget.
4. HTML/Java script.
5. Copas kode dibawah ini :

<!-- Subscribe --!>

<style type="text/css">

/*<![CDATA[*/

#djnotefollowSubscribe {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);}

.djnotefollowButton {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;}

.djnotefollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhANL1_Ntenc2WFeEvZeTcDxJ84vq8LOynxJySZWK751Dc6uNAbXEKfqSRUtF_UDpq5za7r5qlNzncrY3cFXAfIRiCz5RsGWchBYivNrWw1jvDP4bF-TUGBul3ZiakEEfcqj56-VIYTl9xN/s1600/follow-djnote.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}

.djnotefollowButton:hover,.followActive {color: #fff !important;}

.djnotefollowButton:hover span,.followActive span {background-position: 0 -37px !important;}

.followactive {background-color: #333;}

.djnotefollowForm {padding: 15px;}

.djnotefollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}

.djnotefollowForm p {margin: 0 0 10px;}

.djnotefollowForm .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;}

.djnotefollowForm form {text-align: center;}

.djnotefollowForm .emailInput:focus {color: #000;border-color: #000;}

.djnotefollowForm .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;}

.djnoteFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}

.djnoteFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}

.djnoteFollowFooter a:hover {color: #fff;background: none;}

/*]]>*/

</style>

<script type="text/javascript">

/*<![CDATA[*/

;(function(djnote){djnote(document).ready(function(){djnote.extend(djnote.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=djnote("#djnotefollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);djnote(".djnotefollowButton").click(function(e){if(followBox.hasClass("followOpened")){djnote(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{djnote(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);

/*]]>*/

</script>

<div id="djnotefollowSubscribe" style="display:none;">

<div class="djnotefollowForm">

<a class="djnotefollowButton" href="#" title="Subscribe"><span>Subscribe</span></a>

<h3>Subscribe us</h3>

<p>Get our news updates for FREE!</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=infoiki', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<input type="text" class="emailInput" name="email" placeholder="Your_Email@info.iki"/>

<input type="hidden" value="DjNote" name="uri"/>

<input type="hidden" name="loc" value="en_US"/>

<input type="submit" value="Sumbit Infoiki" class="emailSubmit"/>

</form>

<p class="djnoteFollowFooter">Taruh Script Feedcount atau apapun DISINI</a>

</p>
<a href="http://infoiki.blogspot.com/2012/07/email-subscribe-popup-blogger-modif.html">Get this</a>

</div>

</div>

6. Save.


   Keterangan : (Bila belum jelas, cocokkan dengan gambar Vrs - Infoiki).
1. Kode yang saya beri blog kuning bertuliskan INFOIKI, harap diganti dengan Id feed anda.
2. Kode berwarna abu - abu, adalah teks yang di klik pada popup.
3. Kode berwarna ungu adalah judul.
4. Kode yang saya beri blog hitam adalah, teks yang ada di dalam kolom email.
5. Kode yang saya beri blok merah adalah teks tombol.
6. Kode yang terakhir, yang saya tebali, letakkan apapun disana. Misal, letakkan 
by <a href="http://alamat-anda.blogspot.com">Nama Tampilan</a>
 Atau kode script feedcount atau apapun.


  Semoga Bermanfaat.