Google Plus dan Facebook Like Box Sliding Widget

Rabu, 30 April 2014

Laba-Laba Blog - Tidak mungkin para pengguna blogger tidak memiliki google plus karena syarat untuk membuat blogger harus memiliki akun google plus, artikel yang sedang kami bahas ini merupakan salah satu cara bagaimana website kita menjadi lebih dikenal orang banyak. Sangat mudah sekali apabila anda ingin membuat akun google plus atau facebook serta gratis untuk mendaftarnya.

Akun google plus (+) dan facebook, itu merupakan jalan utama menjadi website terkenal dan disitulah kita dapat mempublikasikan artikel kita maka secara otomatis pengunjung blog akan semakin melonjak dari dua akun tersebut. Bagaimana cara agar pengunjung tertarik mengunjungi blog kita? cara yang tepat adalah dengan memasang widget ini, widget ini sangat mudah serta cocok untuk dipasang di blog anda. Tunggu apa lagi? bila anda tertarik, ikutilah langkah-langkah di bawah ini.

1. Simpan kode CSS di bawah ini.

.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;
}

2. Simpan kode HTML di bawah ini.

<div class="socialbox">
<div class="fbicon-box">f</div>
<div class="fb-like-box" data-href="https://www.facebook.com/Muhammadagielkblogspotcom" 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/LaBlogID" data-source="blogger:blog:followers" data-width="260"></div>
</div>

*) Silahkan ganti URL Facebook dan Google Plus dengan URL milik anda.

3. Simpan kode ini di bawah <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>

4. Simpan kode ini di atas </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>

5. Dan yang terakhir, anda jangan lupa pastikan blog yang anda miliki sudah menggunakan Jquery Library seperti di bawah ini (berapapun versinya).

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>

6. Selesai.