Follow Email Pop Out Widget Blogger

Follow Email Pop Out Widget Blogger. Jika dilihat dari bentuknya memang widget ini garapan dari Wordpress, namun sekarang Follow Email Pop Out Widget tersebut sudah dikembangkan dan bisa dinikmati oleh para Blogger. Dalam segi bentuk bisa dipastikan praktis dan tidak memakan tempat karena widget ini terletak di kanan bagian bawah. Follow Email Pop Out Widget Blogger juga berperan dengan kode jQuery, lihat saja bentuk dan modelnya semuanya terlihat bagus dan elegan, namun dalam menggunakan widget ini perlu diketahui sobat harus punya akun FeedBurner.

 Cara Membuat Follow Email Pop Out Widget Blogger

Langkah 1

• Login ke Blogger
• Masuk ke "Rancangan - Edit HTML"
• Cheklist "Expand Template Widget"

Langkah 2

• Cari kode </head>  dan letakkan kode dibawah ini sebelum kode tersebut

Peringatan:

• Jika di blog sobat sudah terpasang kode jQuery tersebut maka langkah diatas abaikan saja

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

Langkah 3

• Selanjutnya letakkan kedua kode dibawah diatas kode </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/AVvXsEiltj7DgJsebAYGUGfXqcpt13MpKwGtZf2RxT2ulByHcUvmnvirIW1tLSvhWcewRA1kOTCzo7LSH6eQZcm5IF8xl2ZoZs_YER35qYY6HYUaLhF3X7MrFn1I7jSCd1wwwTjon7Sfaju-4sK-/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>

• Dan yang ini juga diletakkan diatas kode </head> juga

<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=Dan-cow', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

            <input type="text" class="emailInput" name="email" placeholder="Enter Email Anda..."/>

            <input type="hidden" value="Dan-cow" 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>

Keterangan:

• Perhatikan kode langkah 3, pada kolom kode yang kedua ganti teks yang di Ketik merah dengan ID FeedBurner sobat

Langsung saja Simpan Template dan langsung lihat hasilnya.

Sekian dari saya semoga berhasil dan sukses