Cara Membuat Widget Subscribe Box Keren

 Pada posting kali ini saya akan berbagi tentang cara membuat widget subscribe box keren dan terlihat sangat elegan yang bisa  Anda tambahkan di bagian footer dari posting blog Anda. Widget ini menampilkankan integrasi dengan Facebook, Twitter dan Feedburner.

Widget ini telah dioptimalkan untuk blog dengan lebar yang kecil dan terlihat sempurna di semua blog. Widget menggunakan Jquery, CSS dan HTML.

Anda dapat melihat live demo widget ini pada postingan ini di bawah berikut. Pastikan anda like halaman Facebook saya ya hehe :p .

Like Facebook dan Berlangganan Posting Melalui E-mail

Berlangganan Melalui E-mail.

Setelah Anda melihat demo diatas, untuk menambahkan widget ini di blog Anda,Anda hanya perlu mengikuti langkah-langkah sederhana berikut:

Menambahkan kode

Copy dan paste kode dibawah. Buka dashboard blog >Template > kemudian Edit HTML. Tekan Ctrl + F dan cari <data:post.body/>  paste dalam template Anda dan paste tepat di bawah <data:post.body/>.

Catatan: Kode <data:post.body/> mungkin lebih dari satu dalam template(biasanya 2-4)  jadi pastikan bahwa Anda telah memilih <data:post.body/> yang tepat. Jika widget tidak muncul coba mengubah lokasi kode <data:post.body/> sampai berhasil dan widget muncul.

<section class="newsletter">

<h2>

Like Facebook dan Berlangganan Posting Melalui E-mail

</h2>

<div id="form-newsletter">

<div class="social facebook">

<a href="https://www.facebook.com/kangusepdotcom" target="_blank">

      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzZRACVL7TO2zJcv5f38vqBpKQxA7aBCpPkb0SsqY_93bzgiBSNtdT8oe8zm64mRGIlyh8uP-56c6I03rmx-I1K7MIhxAmKYsQTHpTDTA0SsFShfFbTt0vB4iBS0gStIQpENDLTkYWR-RL/s1600/nl-facebook@2x.png" />

    </a>

    <iframe allowtransparency="true" class="social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fkangusepdotcom&amp;width=90&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=519648428126767&amp;locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;">

    </iframe>

  </div>

<div class="social twitter">

<a href="https://twitter.com/usepMUfc" target="_blank">

      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK6si4fwxw-228E5heFHdVHLcR2Tuj0zUj6oEWrVUrPR66agCSHYOIAgz7UwuJ92opGCM3OzsSf-t9RcW-YF-ztG_1To2t7SgCaZ6LhK_ApOMoRs7m5BSeLRSF7-s1paAar-R2gR6Wx2lO/s1600/nl-twitter@2x.png" />

    </a>

    <iframe allowtransparency="true" class="social-box twitter-follow-button twitter-follow-button" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=usepMUfc&amp;show_count=false&amp;show_screen_name=false&amp;size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button">

    </iframe>

    <script>

      !function(d,s,id){

        var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;

        if(!d.getElementById(id)){

          js=d.createElement(s);

          js.id=id;

          js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);

    </script>

  </div>

<div class="newsletter-form">

<fieldset>

<h2>

       Berlangganan Melalui E-mail.

      </h2>

<div class="fields">

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=kangusepdotcom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email here.." />

          <input name="uri" type="hidden" value="kangusepdotcom" />

          <input name="loc" type="hidden" value="en_US" />

          <input class="subscribe" name="commit" type="submit" value="Subscribe" />

        </form>

</div>

</fieldset>

</div>

</div>

</section>

<style>

.newsletter{text-align:center;margin:20px 0;}

.newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}

.newsletter .social{padding-top:20%;width:20%;float:left;position:relative}

.newsletter #form-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}

.newsletter:before,.newsletter:after{content:&quot; &quot;;display:table}

.newsletter:after{clear:both}

.newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}

.newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}

.newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}

.newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}

.newsletter .social a:hover img{transform:scale(1.1)}

.newsletter .social .social-box{bottom:20px;left:50%;position:absolute}

.newsletter .social .social-box.fb-like{margin-left:-45px}

.newsletter .social .social-box.twitter-follow-button{margin-left:-30px}

.newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}

.newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}

.newsletter .newsletter-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}

.newsletter .newsletter-form fieldset .fields{position:relative}

.fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}

.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:10px;transition:all ease 0.6s;}

.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}

</style>

<script type="text/JavaScript">

fontsize = function () {

    var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width

    $(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);

};

$(window).resize(fontsize);

$(document).ready(fontsize);

</script>

Mengedit kode

Setelah menambahkan kode di atas , Anda perlu membuat beberapa perubahan yang diperlukan untuk mengubah ID pengguna. Dalam kode di atas saya memiliki 6 huruf yang berwarna biru, Anda perlu untuk mengubahnya dengan ID anda. Dua yang pertama untuk nama pengguna Facebook, ketiga dan keempat untuk Twitter dan dua yang terakhir adalah untuk ID Feedburner Anda.

Setelah selesai mengedit ID pengguna simpan Template Anda.

Selesai... !

Gampang sekali kan gan cara membuat widget subscribe box keren, semoga berhasil dan jika ada pertanyaan silahkan berkomentar !