Ditulis oleh: Ditulis pada: 4/29/2014
Saya lihat masih banyak blog yang menggunakan sliding facebook like box. Cukup menarik juga karena kita bisa sedikit main-main dengan fb like box yang ada di blog dengan mouse kita. Namun saya lihat kebanyakan blog yang menggunakan sliding fb like box ini menggunakan jquery untuk efek show and hide-nya atau sliding-nya.
Untuk itu kini saya mencoba membuat sliding facebook like box ini dengan hanya menggunakan CSS3 tanpa menambahkan jquery atau javascript untuk efek sliding-nya agar tidak menambah beban loading blog yang diakibatkan penambahan javascript seperti tampak pada gambar gif di bawah ini.
CSS yang digunakan pun cukup sederhana hanya untuk membentuk ikon facebook dan kotak tempat fb like box seperti di bawah ini. Silahkan simpan kode CSS-nya di atas kode ]]></b:skin> atau </style>
.socialbox{
position:fixed;
top:10%;
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;
}
Kemudian karena ini menggunakan fb like box HTML5, silahkan tambahkan javascript SDK facebook di bawah ini tepat di bawah kode <body>. Jika ternyata di blog Anda sudah terdapat kode ini silahkan lewati langkah ini.
<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>
Kemudian tambahkan kode HTML di bawah ini di atas kode </body>
<div class="socialbox">
<div class="fbicon-box">f</div>
<div class="fb-like-box" data-href="https://www.facebook.com/kompiajaib" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
</div>
Silahkan ganti URL https://www.facebook.com/kompiajaib ini dengan URL facebook Anda.
Agar facebook like box-nya dapat berjalan, silahkan pastikan blog Anda sudah menggunakan jquery library seperti di bawah ini (berapa pun versinya).
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
Mudah bukan...? Selamat mencoba....