Cara Membuat Subscriber seperti Wordpress

Cara Membuat Subscriber seperti Wordpress - Waw kagak sengaja ketemu di Mbah google , Semoga maksud dari judul di atas sobat sudah pada tau ea :).
Untuk demonya silahkan sobat lihat sekarang ini di Sudut kanan bawah, Form Subscriber itu form yang effect nya seperti Wordpress, nah udah pada taukan Form subscriber Wordpress gimana. Hmmm .... dari pada ngomong terus ikuti langkah Demi langkah tutorial ini Woke hehehe ...

Seperti widget ini berdasarkan jQuery plugin, Pertama anda harus memiliki Plugin jQuery dalam template Blog Anda.
Langkah ini adalah Diperlukan, Jika Blog anda sudah memiliki plugin ini maka Abaikan Langkah ini.
Jika Blog Anda Tidak memiliki Plugin ini, Instal Plugin jQuery. Tambahkan baris di bawah ini sebelum kode tag </head>.

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

Langkah instal script popout masukan 2 kode berikut sebelum tag atau di atasnya </head>

<style type="text/css"> /*<![CDATA[*/ #drilmfollowSubscribe {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);} .drilmfollowButton {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;} .drilmfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4XlRziBZSMl_k6qQoVKqwEE8KwYv1D9MSw42XixHCmzryP861bCNCJVt6XeISnTgoOpSnw80pgbjqAFR16ls-krd1kb-Zkw0lhmK2AW75C_kbR5DuBbIc0hNbC1FrLRavHuA55S5L-bDw/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;} .drilmfollowButton:hover,.followActive {color: #fff !important;} .drilmfollowButton:hover span,.followActive span {background-position: 0 -37px !important;} .followactive {background-color: #333;} .drilmfollowForm {padding: 15px;} .drilmfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;} .drilmfollowForm p {margin: 0 0 10px;} .drilmfollowForm .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;} .drilmfollowForm form {text-align: center;} .drilmfollowForm .emailInput:focus {color: #000;border-color: #000;} .drilmfollowForm .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;} .drilmFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;} .drilmFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;} .drilmFollowFooter a:hover {color: #fff;background: none;} /*]]>*/ </style> <script type="text/javascript"> /*<![CDATA[*/ ;(function(drilm){drilm(document).ready(function(){drilm.extend(drilm.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=drilm("#drilmfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);drilm(".drilmfollowButton").click(function(e){if(followBox.hasClass("followOpened")){drilm(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{drilm(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery); /*]]>*/ </script>

<div id="drilmfollowSubscribe" style="display:none;">
<div class="drilmfollowForm">
<a class="drilmfollowButton" href="#" title="Follow"><span>Follow</span></a>
<h3>Follow "<data:blog.title/>"</h3>
<p>Post gratis Instan langsung masuk ke kotak Email</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=DonsCit', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" class="emailInput" name="email" placeholder="Enter Your Email Address..."/>
<input type="hidden" value="DonsCit" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Berlanggan" class="emailSubmit"/>
</form>
<p class="drilmFollowFooter">
<a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>
</p>
</div>
</div>

Teks yang berwarna Gray anda ganti dengan ID Feedburner anda. Selanjutnya klik Simpan Template

Semoga  Cara Membuat Subscriber seperti Wordpress Berguna dan Bermanfaat, Terimakasih.

Follow

Follow "DonsCit"

Post gratis Instan langsung masuk ke kotak Email

Delivered by FeedBurner

Description: Cara Membuat Subscriber seperti Wordpress
Rating: 4.5
Reviewer: Id Bloger
ItemReviewed: Cara Membuat Subscriber seperti Wordpress