Sliding Facebook Like Box With Css3
Saya lihat masih banyak blog yang memakai sliding facebook like box. Cukup menarik juga sebab kita sanggup sedikit main-main dengan fb like box yang ada di blog dengan mouse kita. Namun aku lihat kebanyakan blog yang memakai sliding fb like box ini memakai jquery untuk efek show and hide-nya atau sliding-nya.
Untuk itu sekarang aku mencoba menciptakan sliding facebook like box ini dengan hanya memakai CSS3 tanpa menambahkan jquery atau javascript untuk efek sliding-nya supaya tidak menambah beban loading blog yang diakibatkan penambahan javascript ibarat tampak pada gambar gif di bawah ini.
CSS yang dipakai pun cukup sederhana hanya untuk membentuk ikon facebook dan kotak kawasan fb like box ibarat di bawah ini. Silahkan simpan arahan 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 sebab ini memakai fb like box HTML5, silahkan tambahkan javascript SDK facebook di bawah ini sempurna di bawah arahan <body>. Jika ternyata di blog Anda sudah terdapat arahan 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 arahan HTML di bawah ini di atas arahan </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 sanggup berjalan, silahkan pastikan blog Anda sudah memakai jquery library ibarat 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> Praktis bukan...? Selamat mencoba....
Sumber https://www.kompiajaib.com/
0 Response to "Sliding Facebook Like Box With Css3"
Posting Komentar