Membuat Tombol Email Subscribe Melayang di Blog

Email Subscribe adalah suatu layanan newsletter atau yang sering kita kenal dengan "berlangganan", jadi fungsi dari layanan ini adalah mengirimkan setiap artikel yang terbit di blog kita kepada email-email yang telah di submit dan di konfirmasi tentunya. Dengan layanan semacam ini kita dapat membantu pengunjung untuk mendapatkan notifikasi terhadap topik yang baru di blog kita, tatkala mereka lupa untuk mengunjungi blog kita, maka newsletter ini akan berperan sebagai reminder untuk mengingatkan mereka akan hadirnya berbagai update menarik yang telah tersedia di blog kita. Dari situ, lama-kelamaan kita akan mendapat banyak pengunjung yang loyal dan rutin berkunjung untuk sekedar silaturahim atau bahkan menggali ilmu dari konten yang kita suguhkan.

Dalam hal ini, ada berbagai macam cara yang bisa mebuat pengunjung tertarik untuk berlangganan artikel di blog kita, salah satu langkahnya adalah dengan cara memasang widget newsletter. Pasalnya setiap orang yang merasa bahwa blog kita akan berguna baginya dan masa depanya, mereka pasti ingin sekali selalu mendapat inovasi dan update terbaru dari blog kita, apalagi jika mindset mereka dan topik blog kita sejalan dan tidak bersebrangan.

Berdasarkan sedikit kesimpulan diatas, pada kesempatan kali ini saya akan membagikan sebuah widget email subscribe yang kiranya bagus untuk dipasang di blog anda, dan juga anda tidak usah takut nantinya widget ini akan memakan tempat dan space yang besar di blog anda, pasalnya widget ini bersifat pop-up/melayang yang di tempatkan pada bagian kanan bawah website, dan bersifat easing atau buka tutup. Jadi awalnya widget ini hanya akan menampilkan tombol yang bertuliskan email subscribe, dan kemudian pada saat anda mengklik tombol tersebut, tombolnya secara otomatis akan terbuka atau nge-scroll keatas dan menampakkan widget email subscribe-nya.

Widget Preview

Seperti yang saya tekankan tadi bahwasanya widget ini bersifat hide atau tersembunyi, jadi penampakan awalnya akan seperti gambar yang di kiri, dan setelah di klik tombol "+ follow", maka secara otomatis widgetnya akan scroll atau muncul keatas (kelayar monitor) seperti pada gambar yang ada dikanan. Dan untuk menutupnya "widget" lagi juga cukup mudah, anda tinggal klik lagi tombol "+Follow", maka nanti sendirinya akan menutup menjadi hide kembali.

Cara Membuat Tombol Email Subscribe Melayang

1. Login ke Blogger.

2. Pilih Tata Letak / Layout.

3. Klik Add Gadget.

4. Pilih HTML/JavaScript.

5. Letakkan kode dibawah ini kedalamnya.

<style type="text/css">
/*<![CDATA[*/
 #esgfollowSubscribe {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);}
 .esgfollowButton {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;}
 .esgfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXohm3xhkG4jhq4t1suQt7HAf0HqSl5VT4HxziC0ppbI8U3_vPdF9_ZG7fgd7553op2dxp971wtEmF2FvtLJcbs_A1lDqGDaACwJ-whnpOMLdeTrBy9NXJ0t5MWZ1R6C5TTP_dqliEbu4/s1600/follow-bloggertrix.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
 .esgfollowButton:hover,.followActive {color: #fff !important;}
 .esgfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
 .followactive {background-color: #333;}
 .esgfollowForm {padding: 15px;}
 .esgfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
 .esgfollowForm p {margin: 0 0 10px;}
 .esgfollowForm .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;}
 .esgfollowForm form {text-align: center;}
 .esgfollowForm .emailInput:focus {color: #000;border-color: #000;}
 .esgfollowForm .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;}
 .esgFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
 .esgFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
 .esgFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(esg){esg(document).ready(function(){esg.extend(esg.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=esg("#esgfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);esg(".esgfollowButton").click(function(e){if(followBox.hasClass("followOpened")){esg(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{esg(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>
<div id="esgfollowSubscribe" style="bottom: -971px;">
<div class="esgfollowForm">
<a class="esgfollowButton" href="#" title="Follow"><b>+ Follow</b></a>
<center>
<h3>Follow tuliskancom</h3>
Get Free Email Updates to your Inbox
</center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tuliskancom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="emailInput" name="email" placeholder="Enter Your Email..." type="text">
   <input name="uri" value="tuliskancom" type="hidden">
   <input name="loc" value="en_US" type="hidden">
   <input class="emailSubmit" value="Subscribe" type="submit">
  </form>
<div class="esgFollowFooter">
<a href="http://feedburner.google.com/" target="_blank">Delivered by FeedBurner</a><a href="http://betelm.blogspot.com/2013/05/membuat-tombol-email-subscribe-melayang-di-blog.html" target="_blank">Get This Widget</a>
  </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

Keterangan : Ganti kode yang berwarna merah dengan ID Feedburner anda.

6. Klik "Save/Simpan" gadget, dan selesai.

Demikian informasi terbaru tentang cara membuat tombol email subscribe melayang di blog, baca juga artikel menarik lainya seputar tutorial blog tentang cara memasang like box fb melayang di tepi blog, semoga bermanfaat, dan selamat mencoba.

Artikel Referensi : Bloggertrix