Widget Pop Up Follow By Email Untuk Blogger

Widget Pop Up Follow By Email adalah Widget Baru untuk Blogger atau Blogspot. Sebenarnya ini adalah sebuah Plugin Wordpress. Sekarang tersedia untuk Blog Blogger. Widget ini adalah widget Berbasis Jquery dengan efek pop out Nice dan halus. Sobat akan mendapatkan lebih banyak pelanggan email dengan widget ini dan Sangat mudah untuk Instal di Blog sobat.

1. Seperti Jquery biasanya jika sobat ingin menggunakan plug in dari jquery maka di template sobat harus sudah ada atau terinstal kode jquery jika di template sobat belum terinstal jquery, maka pertama sobat cukup letakkan  kode scipt jquery berikut sebelum atau di atas kode </ head>  Jika kesulitan mencarinya coba sobat baca Cara Cepat Mencari Kode HTML.

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

2. Simpan template.

3. Sekarang kita akan menambahkan Widget Pop Up Follow By Email, untuk itu kita akan  menambah elemen HTML/Java Script.
Caranya: pada menu Rancangan - Tambah Gadget - Pilih HTML/Java Script - Lalu copy kode berikut ke dalamnya.

<style type="text/css">
/*<![CDATA[*/
#w2bfollowSubscribe {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);}
.w2bfollowButton {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;}
.w2bfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVPlFqKx5SCkUVqcUsYQdT_lTdld155ReTS53JdKOhmxLUwsW3568_MAHa_Xk1FBnDIMSWblcor-nxH8nvcfJKbDt9aHn8QP8j0aGU6uJMU9FqFKFIR3qOWh8toB0T-0vpHPTloJJeDfE/s1600/follow-O.W.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
.w2bfollowButton:hover,.followActive {color: #fff !important;}
.w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
.followactive {background-color: #333;}
.w2bfollowForm {padding: 15px;}
.w2bfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
.w2bfollowForm p {margin: 0 0 10px;}
.w2bfollowForm .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;}
.w2bfollowForm form {text-align: center;}
.w2bfollowForm .emailInput:focus {color: #000;border-color: #000;}
.w2bfollowForm .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;}
.w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
.w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
.w2bFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b("#w2bfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>
<div id="w2bfollowSubscribe" style="display:none;">
<div class="w2bfollowForm">
<a class="w2bfollowButton" href="#" title="Follow"><span>Follow</span></a>
<h3>Follow "Oto Website"</h3>
<p>Ikuti Kami Via Email Dan Dapatkan Info Terbaru tiap harinya</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=otowebsite', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" class="emailInput" name="email" placeholder="Enter Your Email..."/>
<input type="hidden" value="otowebsite" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" class="emailSubmit"/>
</form>
<p class="w2bFollowFooter">
<a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>
</p>
</div>
</div>

4. Simpan.

Keterangan:

• Ingat jika di template sobat sudah terinstal Jquery 1.7.1 maka langkah pertama tidak perlu di lakukan.
• Teks warna Biru silahkan sobat ganti dengan nama blog sobat.
• Teks warna Merah silahkan sobat ganti dengan kata-kata sobat sendiri.
• Teks warna Hijau silahkan sobat ganti dengan Id feed bunner sobat.

Oke dah saya rasa cukup untuk kali ini, jika ada kesulitan silahkan bertanya, ok!

Bagaimana apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles kali ini!