Membuat Subscribe Via Email Melayang Pada Blog Media Online

ok. sobat blogger yg slalu bahagia.....
Dalam posting Kali ini saya akan membahas bagaimana cara membuat widget subscribe via email melayang dengan jQuery, belum lagi ditambah tombol close,wow......pasti menarik...!
       ok. kita lanjut ke TKP...
namun sebelum nya sedikit Admin jelaskan begini ceritanya nanti setelah sobat memasang widget ini maka akan muncul icon di bawah samping pojok kiri blog sobat seperti yg ada pada blog Admin, klik icon itu untuk membuka widganya
udah jelas bukan......
mari kita lanjut cara pemasangan nya....
yang pertama sobat musti login ke blogger menggunakan akun blogger sobat,ingat akun blogger bukan akun twitter atau facebook,sampaikapan pun sobat ga'bakalan bs masuk ke halaman ntarmuka blogger
   untuk yang ke dua setelah sobat masuk ke halaman antarmuka blogger klik rancangan pilih edit HTML
  sebelum nya centang dulu kolom mungil disebelah tulisan Expan template,untuk anti sipasi terjadinya erorr saat pengeditan sobat download dulu salina dari template sobat dengan klik tulisan Download template lengkap,beres deh......
nah setelah sobat menjalankan langkah demi langkah yg ada di atas untuk selanjut nya sobat cari deh kode </head> tekan Ctrl+F untuk lebih mudah nya....
  nah setelah ketemu letak kan kode dibawah ini tepat persis diatas kode </head> awas jangan salah bisa berabe ntar 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 etelah itu langsung aja klik save tempale jangan ragu ragu kan sobat masih punya salinan dari template sobat yg barusan sobat download, bahasa keren nya sinpan sajalah begitu kira kira
   dan untuk yg ketiga atau yg ke tilu'bahasa sunda nya nak ora seng ke telu boso jawane hehehe ga'mudeng ya masak ga' mudeng udah jangan hiraukan kalimat itu,yuk kita lanjut sampaimana tadi o..ya sampai yg ketiga ya...
      nah untuk yg ketiga setelah sobat edit template sobat tadi sobat musti kembali kemenu rancangan,lalu Add tmbah gadget pilih gadget HTML java script jangan sobat pilih yg lain tar ga' jadi deh apa yg mau sobat bikin ok..
  setelah sobat memilih gadget HTML javascript nah langkah selanjut nya sobat copast deh kode di bawah ini:

silahkan buka untuk melihat

<style type="text/css">
#subscribe-button { float: left; position: fixed; bottom: 5%; left: 0; z-index: 999; }
#subscribe-widget { display:none; }
/* Overlay */
#btnt-overlay { background-color:#000; }
/* Container */
#btnt-container { min-height:350px; min-width:500px; color:#222; background-color:#fff; border:4px solid #ddd; }
#btnt-container .btnt-data { padding:8px; }
#btnt-container a.btntCloseImg { background:url(http://3.bp.blogspot.com/-1lucxKhy3Zs/T3vIg4k-5wI/AAAAAAAAArM/EiH85Hp-ZW8/s1600/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer; }
#description { color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic; }
#description img { float: left; height: 80px; padding: 0 25px 0 10px; width: 80px; }
#btntfollowForm { padding: 15px; }
#btntfollowForm p { margin: 0 0 10px; }
#btntfollowForm input:not([type="checkbox"]){ width: 93%; margin-top: 4px; margin-bottom: 20px; padding: 10px 5px 10px 25px; border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
#btntfollowForm input:not([type="checkbox"]):active,
#btntfollowForm input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }
#btntfollowForm .button input{ background: none repeat scroll 0 0 #3D9DB3; border: 1px solid #1C6C7A; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2; color: #FFFFFF; cursor: pointer; font-family: 'Arial Narrow',Arial,sans-serif; font-size: 24px; margin-bottom: 10px; padding: 8px 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); width: 30%; float: right; }
#btntfollowForm .button input:hover{ background: #4ab3c6; text-decoration: none; }
#btntfollowForm .button input:active,
#btntfollowForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }
.btntFollowFooter { text-align: center; font: 10px Tahoma, Helvetica, Arial, Sans-Serif; padding: 7px 0; margin-top: 80px; text-shadow: 0px 2px 3px #555; position: absolute; width: 500px; }
.btntFollowFooter a { color: #222; text-decoration: none; }
.btntFollowFooter a:hover { color: #fff; }
<!--[if lt IE 7]>
#btnt-container a.btntCloseImg { background:none; right:-14px; width:22px; height:26px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://3.bp.blogspot.com/-1lucxKhy3Zs/T3vIg4k-5wI/AAAAAAAAArM/EiH85Hp-ZW8/s1600/x.png',sizingMethod='scale'); }
#btntfollowForm input{ padding: 10px 5px 10px 32px; width: 93%; }
#btntfollowForm input[type=checkbox]{ width: 10px; padding: 0; }
<![endif]-->
</style>
<div id="subscribe-button">
<a class="subscribe" href="#"><img src="http://2.bp.blogspot.com/-NASh-8VP8qs/T32ePzbJtSI/AAAAAAAAAr8/wjiJnIb7GD4/s1600/subscribe_to_email.png" alt="subscribe" /></a></div>
<div id="subscribe-widget">
<div id="btntfollowForm">
<img alt="Subscribe" border="0" float="center" src="http://1.bp.blogspot.com/-WcR7_thytsA/T3xAvSp4RBI/AAAAAAAAArc/zIO8zUiOOT0/s1600/subscribeviaemail.PNG" />
<div id='description'>
<img alt="email" border="0" src="http://4.bp.blogspot.com/-RKkfCfOLNx8/T3wPtkmqYuI/AAAAAAAAArU/gGpb8_Hep70/s1600/email-icon.PNG" />Dapatkan Artikel Terbaru dari kami via Email, akan langsung di kirim ke Email anda</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=pengembarabiru', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" placeholder="Enter Your Email..." required="required" type="text" /><input name="uri" type="hidden" value="pengembarabiru" /><input name="loc" type="hidden" value="en_US" />
<div class="button">
<input type="submit" value="Subscribe" /></div>
</form>
</div>
<div class="btntFollowFooter">
Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a> | powered by <a href="http://www.ngeblogbarengbareng.blogspot.com" rel="dofollow" target="_blank">arieadie</a></div>
</div>
<script src="https://blogtipsntricks.googlecode.com/files/jquery.btnt.popup.js" type="text/javascript">
</script>
<script type="text/javascript">
jQuery(function ($) {
// Load dialog on page load
//$('#subscribe-widget').modal();
// Load dialog on click
$('#subscribe-button .subscribe').click(function (e) {
$('#subscribe-widget').modal();
return false;
});
});
</script>

catatan:
          ganti teks berwarna biru dengan teks sobat
          ganti yg berwarna merah dengan Id feed sobat
[contoh: : http://feeds.feedburner.com/pengembarabiru] 
jika sobat menginginkan posisi ikon berada di atas seperti yg ada pada blog ini sobat tgl ganti kode yg berwarna biru
   gimana mudah bukan pembuatan nya tak ada yg sulit didunia ini bila kita mau berusaha dan optimis...
         silahkan copast halal tdk ada sarat dan ketentuan pada blog Media Onlen untuk copast karna Media online hadir untuk saling berbagi informasi bagi semua hanya Admin harapkan jika sobat blogger sudi tinggalkan komentar sobat demi menjalin satu persatuan antar blogger,
   trimakasih telah berkunjung mantap jaya blogger

Twitter Delicious Digg Facebook Stumbleupon RSS