Cara Memasang Widget Facebook Twitter Gplus Follower Di Blog

Cara Memasang Widget Facebook Twitter Gplus Di Blog - Sesuai dengan judul di atas kali ini saya akan share bagaimana cara memasang widget follower socmed yang bisa kita pasang di blog bagi para blogger widget socmed merupakan suatu widget yang lumayan penting keberadaan nya dari perkembangan dunia IT dan teknologi kebanyakan blog pada saat ini memiliki trafik sebagian besar dari sosial media .

Sebelum anda membuat widget follower ini sebaiknya anda persiapkan terlebih dahulu fanspage facebook akun twitter entah itu untuk blog atau pribadi dan fanspage Gplus yang akan di pasang pada blog yang ingin di pasangi widget follower ,berikut cara pemasangan widget follower yang akan saya share di elsaviara.com

Cara Memasang Widget Socmed Follower

1.Masuk ke blogger dan pilih tata letak kemudian tambahkan gadget baru ,kemudian copy semua kode di bawah ini di gadget baru tadi dan simpan .

<div class="join-now"> 
<div class="join-now-profile">
<a href="http://www.Blogger.com/follow-blog.g?blogID=8520904820622677293" title="Join this site / follow" onclick="window.open(this.href, 'dofollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');return false;"> <i class="fa fa-users"></i> Join Now</a> </div> <div class="join-now-count">1.2K</div></div>
<div style='background:#fff;margin:0;border:1px solid #ccc;border-bottom:none;'>
<div style='background:#fff;margin:0;'>
<div class="fb-like-box" data-href="https://www.facebook.com/Yandi-Blog-1648941728693058" data-colorscheme="light" data-show-faces="false" data-header="true" data-stream="false" data-show-border="false"></div></div>
<div style="background:#fff; border-top:1px solid #ccc;margin:0; padding:5px 0 5px 40px"><a href="https://twitter.com/NovriandiYandi" class="twitter-follow-button" data-show-count="true" data-show-screen-name='false' data-lang="id">Ikuti @NovriandiYandi</a><div class="g-plusone" data-size="medium" data-count="true" data-width="100" data-href="https://yandinovriandi.blogspot.com"></div></div></div>
<div class="g-person" data-href="//plus.google.com/111353618882022197670" data-layout="landscape" data-rel="author"></div>
<script type='text/javascript'>
//<![CDATA[
(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='http://connect.facebook.net/id_ID/all.js#xfbml=1','facebook-jssdk';var b=document.getElementsByTagName('script')[0];b.parentNode.insertBefore(a,b)})();(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='http://platform.twitter.com/widgets.js';var b=document.getElementsByTagName('script')[0];b.parentNode.insertBefore(a,b)})();(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='https://apis.google.com/js/plusone.js';var b=document.getElementsByTagName('script')[0];b.parentNode.insertBefore(a,b)})();
//]]>
</script>

Keterangan :

Ganti semua kode yang saya tandai dengan ID dan link Socmed anda

2.Pasang kode CSS dibawah sebelum kode ]]></b:skin> caranya masuk ke template di blog anda dan klik edit HTML kemudian tekan CTRL + F masukan kode ]]></b:skin>  untuk mempermudah pencarian kemudian tekan ENTER dan simpan kode CSS nya tepat di atas kode ]]></b:skin>

.join-now{text-align: center; display: inline-block; margin-bottom: -20px; margin-top: 5px;} .join-now-profile a{ padding: 3px 8px; text-decoration: none; padding: 4px 12px; border-radius: 5px; font-family: Segoe UI; font-weight: 900; margin-top: 5px; float: left; color: white;/*warna tulisan*/ background:rgba(52, 152, 219,1.0);/*warna Background*/} .join-now-count { position: relative; padding: 1px 6px; border-radius: 5px; float: right; right: -53px; background: rgba(52, 152, 219,1.0);/*background Count*/ color: white;/*warna Tulisan count*/ top: -24px; } .join-now-count:before { position: absolute; content: ""; border: 9px dashed; border-color: transparent rgba(52, 152, 219,1.0) transparent transparent; left: -14px; top: 1px; }

jika hasil tampilan karena widget follower nya tidak sama karena widget ini memerlukan Fontawesome jika anda belum memasang nya silahkan simpan juga kode berikut di atas kode </body>

<script> //<![CDATA[ function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"); //]]> </script>

Sudah selesai silahkan lihat hasil hasil demo nya di SINI

Source : http://rh-w.blogspot.com/2014/08/cara-membuat-widget-fan-page-twitter.html                   http://www.kompiajaib.com/2014/12/mengatasi-render-blocking-css-font.html                   http://www.xkomo.com/2015/05/tutorial-membuat-widget-join-this-site.html