Follow Email Pop Out Widget Blogger

Sebenarnya ini adalah sebuah Plugin Untuk Wordpress. Tapi sekarang tersedia untuk Blog Blogger. Widget ini adalah widget Berbasis Jquery dengan efek popout yang bagus dan halus. Anda akan mendapatkan lebih banyak pelanggan email dengan widget ini dan Sangat mudah untuk Instal di Blog Anda.

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>

1. Langkah instal script popout masukan 2 kode berikut sebelum tag </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/AVvXsEgch_PiwMF6HyLTLZ0vnqP_BJzso8_23zB2LWsOWn0BeZ-tf5i5j89j2-n5GcG6g8v5N34-X2b1PmOENVSnMjWMOdjFDAhroGNQja5rngRawIt1xafYmb0tX_OIzcbKwxJ-5_j3WMiZ6fyY/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=donorilmu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" class="emailInput" name="email" placeholder="Enter Email Anda..."/>
            <input type="hidden" value="DonorIlmu" 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 biru anda ganti dengan ID Feedburner anda.

2. Selanjutnya Klik

Sumber : DonorIlmu.Com

Anda sedang membaca artikel tentang Follow Email Pop Out Widget Blogger dan anda bisa menemukan artikel Follow Email Pop Out Widget Blogger ini dengan url http://share-tuts.blogspot.com/2012/10/follow-email-pop-out-widget-blogger.html. Anda boleh menyebarluaskan atau mengcopy artikel Follow Email Pop Out Widget Blogger ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.

Ingin mempromosikan Blog, Produk, Bisnis, Jualan atau lainnya ? Sobat bisa memasangnya diBlog ini. Tunggu apa lagi mumpung masih ada slot untuk sobat. Silahkan hubungi ane dengan meng-Klik Disini

Related Posts :