Widget G+ Followers Dan Facebook Like Box Sliding. Hasil hunting blogwalking ternyata masih banyak juga yang memasang Widget Facebook Like Box Sliding, cukup menarik juga sih untuk dijadikan bahan postingan kali ini, di postingan kali ini akan membahas Cara Membuat Widget Facebook Like Box Sliding di blog namun disini sedikit ditambahkan kode Google Plus Follower jadi lebih berwarna sliding widgetnya.
Kebanyakan kode yang dipasang oleh sobat blogger masih menggunakan Jquery agar efek show hidenya bisa berjalan nantinya, nah di postingan kali ini agak sedikit berbeda saya mengunakan kode CSS3 tanpa menggunakan kode Jquery, seperti yang sudah kita ketahui bersama salah satu yang berperan dalam lambatnya loading blog yah kode Jquery ini sumbernya, kita akan ganti kode Jquery-nya menggunakan kode CSS3 agar loading blog menjadi enteng.
Penggunaan kode CSS3 ini terbilang simple dan sederhana hanya dipakai untuk membentuk ikon FB like box dan G+ Follower saja didalam postingan kali ini, baiklah langsung saja buat sobat yang mau mencobanya mari kita simak bersama.
Langkah Pertama
Silahkan sobat salin kode CSS dibawah ini lalu letakkan diatas kode ]]></b:skin> atau di </style>
Langkah Ke Dua
Agar Facebook like nya dapat berfungsi diperlukan pemasangan kode Javascript SDK Facebook dan Javascript Google Plus yang sudah valid HTML5 seperti kode dibawah ini silahkan sobat salin dan letakkan dibawah kode <body> dan diatas kode </body>
Javascript SDK Facebook
Silahkan sobat simpan dibawah kode <body>
Java Script Google Plus Follower
Silahkan sobat simpan diatas kode </body>
Jika sebelumnya sudah pernah memasangnya silahkan lewati langkah ini.
Langkah Ke Tiga
Silahkan sobat salin kode HTML dibawah ini untuk Sosial Box nya lalu letakkan di atas kode </body>
Perhatikan kode yang ditandai dbalikcom untuk facebook dan 111632413681186402712 untuk G+ Follower. Dan selesai silahkan di SAVE dan selamat mencoba.
.socialbox{
position:fixed;
top:100px;
right:-286px;
height:250px;
width:285px;
background:#efefef;
border:1px solid #bbb;
border-right:0;
transition:all 400ms ease-in-out;
border-radius:0 0 0 3px;
}
.fbicon-box{
width:30px;
height:35px;
position:absolute;
top:-1px;
left:-30px;
background:#405D9B;
border-radius:3px 0 0 3px;
color:#fff;
font-family:Arial;
font-size:30px;
font-weight:700;
text-align:center;
padding-top:2px;
}
.socialbox:hover{
right:0;
z-index:2;
}
.socialbox2{
position:fixed;
top:145px;
right:-279px;
height:230px;
width:258px;
background:#efefef;
border:1px solid #bbb;
border-right:0;
transition:all 400ms ease-in-out;
border-radius:0 0 0 3px;
padding:10px;
}
.gpicon-box{
width:30px;
height:32px;
position:absolute;
top:-1px;
left:-30px;
background:#DD4B39;
border-radius:3px 0 0 3px;
color:#fff;
font-family:Georgia;
font-size:20px;
font-weight:700;
text-align:center;
padding-top:5px;
}
.socialbox2:hover, .socialbox2:active{
right:0;
}
Langkah Ke Dua
Agar Facebook like nya dapat berfungsi diperlukan pemasangan kode Javascript SDK Facebook dan Javascript Google Plus yang sudah valid HTML5 seperti kode dibawah ini silahkan sobat salin dan letakkan dibawah kode <body> dan diatas kode </body>
Javascript SDK Facebook
Silahkan sobat simpan dibawah kode <body>
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;js.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>Java Script Google Plus Follower
Silahkan sobat simpan diatas kode </body>
<script type='text/javascript'>
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>Jika sebelumnya sudah pernah memasangnya silahkan lewati langkah ini.
Langkah Ke Tiga
Silahkan sobat salin kode HTML dibawah ini untuk Sosial Box nya lalu letakkan di atas kode </body>
<div class="socialbox">
<div class="fbicon-box">f</div>
<div class="fb-like-box" data-href="https://www.facebook.com/dbalikcom" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
</div>
<div class="socialbox2">
<div class="gpicon-box">g+</div>
<div class="g-plus" data-action="followers" data-height="240" data-href="https://plus.google.com/111632413681186402712" data-source="blogger:blog:followers" data-width="260"></div>
</div>RESULT
Perhatikan kode yang ditandai dbalikcom untuk facebook dan 111632413681186402712 untuk G+ Follower. Dan selesai silahkan di SAVE dan selamat mencoba.
EmoticonEmoticon