Clean Social Subscribe Widget for Blogger

Clean Social Subscribe Widget for Blogger - Subscribe Widget adalah salah satu widget yang banyak digunakan oleh para blogger untuk memberikan pelayanan update postingan kepada pengunjung yang ingin berlangganan artikel dari blog langsung dikirim ke alamat email pelanggang dengan bantuan feedburner google. Layanan ini memudahkan pelanggan untuk mengupdate artikel yang kita tulis diblog kita, sehingga pelanggan tinggal membaca artikel kita langsung dikotak masuk email mereka.

Nah, pada kesempatan kali ini, saya akan berbagi sedikit tips cara membuat form Subscribe yang menarik untuk anda. Selain kotak Subscribe, untuk berlangganan lewat email, widget ini juga dilengkapi dengan sosial media seperti Facebook Like, dan Twitter Follower. Jadi, menurut saya Widget Clean Social Subscribe ini sangat PAS untuk dipasang dibagian akhir postingan anda, selain memudahkan pengunjung untuk berlangganan artikel, pengunjung juga bisa mengikuti fanspage facebook kita dan follow akun twitter dengan mudah.

Untuk demo bisa dilihat dibawah ini:

Subscribe for new posts ?

Get all posts directly in your mail.

Untuk anda yang ingin memasang Clean Social Subscribe Widget for Blogger, anda bisa mengikuti langkah-langkah sederhananya dibawah ini:

1. Masuk Ke Akun Blogger
2. Pilih Template > Edit HTML
3. Kemudian cari kode <data:post.body/> lalu paste kode dibawah ini tepat dibawah kode tersebut.

Note! Mungkin anda akan menemukan lebih dari satu kode <data:post.body/>, Maka pastikan anda meletakkan kode dibawah ini pada kode <data:post.body/> yang tepat.

 <section class="newsletter">
<h2>
Subscribe for new posts ?
</h2>
<div id="form-newsletter">
<div class="social facebook">
<a href="https://www.facebook.com/semua.tutorialku" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj01U0rTXW-BfZJhWNq7z7tYMvWhz2-EtaUbi9MCpfNPNjbkbs8QIJJd7nc0phEIf2u1HU6YJoCh51tNCtPqNZUdQC612JiWXganShhyFRsWZmKqenapsU8QrijXhpNGfge-LvZVrih8fxd/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%2Fsemua.tutorialku&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/RamaDony96" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaiLkvNrsFh6qRLO1eccPlhemen3Pio6PlG94x8N7uVgHTuP2gM61N9Tzhp4xPdZA3LAFOzfUWT9I7h2Tdaq_C_ewPntJdbEUXxbfcbBYew37opZnaCpldJ15HonkhStZxDh8Smw-PG_dt/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=RamaDony96&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>
       Get all posts directly in your 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=Semua Tutorial-ku', '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" placeholder="Enter Your Email here.." />
          <input name="uri" type="hidden" value="Semua Tutorial-ku" />
          <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> 

Konfigurasi! Setelah anda menambah kode diatas dengan benar, selanjutnya anda tinggal mengganti ID Fanspage Facebook, ID Twitter dan ID FeedBurner dengan ID yang anda miliki. Jika sudah selesai, Simpan Template blog anda.

Sekarang telah memasang Clean Social Subscribe Widget for Blogger diblog anda, semoga widget ini dapat berjalan dengan baik dan terlihat sempurna diblog anda, ya.
Semoga bermanfaat..