Cara Membuat Widget Subcribe e-Mail Pop Up Style ala Wordpress

MalvinShare-Pada kesempatan kali ini MalvinShare akan ngasih tutorial mengenai Cara Membuat Widget Subcribe e-Mail Pop Up Style ala Wordpress. Seperti Widget Subcribe e-Mail yang lainnya, Subcribe e-Mail Pop Up Style ala Wordpress ini berfungsi sama yaitu sebagai komponen pelengkap sebuah blog untuk para pengunjung yang berfungsi sebagai fasilitas  berlangganan artikel update yang kita tulis. Namun yang mesti teman-teman ketahui, widget ini memiliki style khas dengan efek Pop up yang tampilannya sama persis seperti subcribe e-Mail pada wordpress. Dari segi tampilanya yang mirip dengan subcribe e-Mail pada wordpress, widget ini bloeh diacungi jempol, karena stylenya yang tidak berlebihan sehingga membuat loading widget ini ringan. 

Untuk demonya, teman-teman bisa lihat langsung pada bagian kanan bawah blog ini yang bertuliskan follow(sekalian aja follow ya, hehe), atau lihat screenshotnya dibawah ini.

Berikut akan saya jelaskan tutorial cara Cara Membuat Widget Subcribe e-Mail Pop Up Style ala Wordpress di blogger.

Cara Membuat Widget Subcribe e-Mail Pop Up Style ala Wordpress di Blogger

1. Login account blogger kamu

2. Pilih Rancangan

3. Klik tambah gadget, lalu pilih HTML/Javascript, kemudian masukkan kode 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/AVvXsEjSJupaZ6TUhkJ_jXOu_ziY1zqUxA_GeSU5C0DX6AamqRln1ZAJ8wiWlKfqVFPV7QRj8SEZt74ta-JlzgukBUsbuJfHNiFoakK2PG_aH1ALHnK5dRgrQBY8dyKmFxJE51ErXxncjcLvpldT/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 "MalvinShare"</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=MalvinShare', '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>

4. Simpan

5. Selesai

Keterangan :

- Ganti kode yang berwarna merah dengan URL feedburner kamu