Cara Membuat Widget "Statics Follow by Email" Bergaya Pop Out

Seperti yang sama-sama kita tau, belum lama ini, Blogger [Blogspot] akhirnya resmi mengadopsi salah satu Plugin Wordpress yang bertajuk "Statics Follow by Email" kedalam daftar Widget defaultnya. Dan sederhananya, Widget ini sebenarnya dibuat untuk memudahkan pengunjung blog kita, untuk mengikuti update postingan terbaru dari blog kita melalui email mereka (terutama jika mereka bukanlah seorang Blogger) :)

Namun pernahkah anda berpikir bahwa bentuk Widget tersebut sebenarnya agak-agak mirip dengan sebuah Search Form atau Kotak Pencarian? Nah, jika anda pernah berpikir demikian, saya ingin kembali bertanya, pernahkah anda berpikir untuk merubah bentuk Widget tersebut agar pengunjung blog anda tidak menyangka widget tersebut adalah sebuah Search Form atau kotak pencarian? Jika pernah, kali ini saya akan memberitahu anda bagaimana cara merubah Widget tersebut agar tidak disalahartikan oleh pengunjung blog anda sebagai sebuah Search form atau kotak pencarian.

Dan kali ini, kita akan membuat Widget tersebut tampil dengan gaya Pop Out yang letaknya tepat berada di pojok kanan bawah dari blog kita, dan penampakannya bisa anda lihat pada gambar paling atas *Maaf Widget tersebut sudah tidak saya pasang diblog ini :)

Dan untuk anda yang ingin membuatnya silahkan ikuti panduan singkat saya berikut ini:

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan,
3. Tambah atau Add Gadget, kemudian pilih HTML/JavaScript
4. Jika sudah, masukkan Script dibawah ini kedalamnya:

<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/AVvXsEgV-v9o-sdYG3FFO4jpJF-8_7MLx055x3CrATb1Kd7gJjkrJIkS9t6PY8GRsCPBuH0EiGSCfXoSqNAQ2aPXkmj74KVqfDlfaXcjt1VDyB1OuH0d0tt76m_GtIqxcGNamki-sIw2kmo82m3e/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="Follow"><span>Follow</span></a>
<h3>Follow "DJ Note"</h3>
<p>Get Free Instant Email updates directly to your Inbox!</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=DjNote', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" class="emailInput" name="email" placeholder="Enter Your Email..."/>
<input type="hidden" value="DjNote" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" class="emailSubmit"/>
</form>
<p class="djnoteFollowFooter">
<a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>
</p>
</div>
</div>

5. Ganti tulisan yang saya beri warna merah denga tulisan yang ingin anda tampilkan dan ganti ID Feed saya dengan ID Feedburner anda, sebagai contoh url Feedburner saya adalah:

http://feeds.feedburner.com/DjNote

Maka ID Feedburner saya adalah DjNote

6. Jika sudah Save Gadget anda, dan lihat hasilnya

Ps: Jika tidak berhasil, artinya anda belum pernah memasukkin jquery min kedalam template blog anda, untuk itu silahkan masukkan Javascript berikut terlebih dahulu, dan letakkan sebelum tag </head> :