Sliding Facebook Like Box With CSS3

Sliding Facebook Like Box With CSS3

Bola Hero Gawai

Sliding Facebook Like Box With CSS3

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.

Sliding Facebook Like Box With CSS3


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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</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....

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

40 Comments Add Comment

waaah pertamaax
izin praktek

Balas

berarti kalo udah memasang pada sidebar,musti dihapus dulu like box yg lama ya mas

Balas

Silahkan mas :)

Balas

Iya mas jika ingin mencoba menggunakan yang ini silahkan hapus dulu yang lama agar tidak double.

Balas

ijin copy mas...! sapa tau saya membutuhkannya di lain hari, oh....! ya mas, peraturan Adsense untuk blog indo sekarang ada sedikit perubahan, mas coba aja daftar lagi sapa tau bisa diterima (jangan pakai nama dan alamat yang pernah didaftarkan)

Balas

wah ... ijin praktek Kang :)

Balas

Iya mas nanti mau dicoba lagi hehehe :) makasih infonya.

Balas

Silahkan mas :)

Balas

memakai sliding seperti ini menghemat ruang di blogg yaa mas, saya boleh coba kan mas :D
thanks mas Adhy

Balas

Aduhh @@, Padahal dari Jam 11 tadi saya online , Lagi sibuk modif template Kompi Males sampai kgk tau kalau Kang Adhy Update :(

Balas

Saya pengen juga nih Kang, tapi kayaknya tampilan untuk mobile kurang apik ya Kang?

Balas

hanya bisa menyimak kang Adhy sebenarnya sudah lama saya ingin buat facebook like tapi ndak pernah jadi hehehehehe
terima kasih infonya kang....

Balas

liat demonya..eta efbi teh meni centil pisan ih...:D

Balas

waww, keren banget kang :-bd .. lumayan nih buat menghemat ruang blog,,,
makasih kang

Balas

Mantap juga bang tutornya... apalagi with css3 hehe!

Balas

Kelihatanya lebih bagus dan unik yah Kang like facebooknya
Saya coba dulu Kang Adhy makasih :)

Balas

Iya mas silahkan dicoba :)

Balas

Hehehe iya mas :)

Balas

Belum saya coba sih di hp :D

Balas

Sama-sama mas :)

Balas

Hehehehe iya kang harus ditoel baru keluar :)

Balas

Iya mas buat ngirit tempat :)

Balas

Biar lebih ringan mas :)

Balas

Heheheh iya kang jadi rada genit kata kang Lembu mah hehehe :)

Balas

Boleh Juga Triknya Kang :D

Balas

Wak bisa pake css3 juga ya Kang sliding nya :)
Keren Kang,,, haturnuhun :)

Balas

boleh juga nih untuk di coba, tapi fikir-fikir dulu apakah nantinya bereffec pada loading blog...

Balas

Sam1-sami kang :)

Balas

di copy ^_^
trimakasih tutorialnya kang kompi :-bd

Balas

Dengan CSS3 maka lebih ramah loading daripada yg menggunakan jquery sliding-nya.

Balas

Sama-sama mas :)

Balas

kunjungan rutin mas,keren juga nih triknya,saya save dulu ya mas adhy

Balas

Silahkan mas :)

Balas

Fantastic ADHY , thanks you very much :)

Balas

U're welcome Andres :)

Balas

wah bagus modifikasinya mas, menghemat ruang widget ini hehe :-bd , tapi kalo di tampilan mobile work apa tidak ya mas @@,

Balas

Sepertinya semua sudah menggunakan jQuery terbaru ya mas, hehe

Balas

mas adhy mau minta tolong di buatkan cara agar blog kalau seperti wodpres, kalau mau komentar harus memasukan Nama lengkap, email terus nama situs web, karena saya merasa terganggu tiap ada yang komentar tapi tidak menggunakan namanya Bisa ya mas adhy mohon di buatkan tutorialnya... yang gampang

Balas

Pada pengaturan komentar atur yang hanya akun Google saja mas, jadi yang tidak punya akun google tidak bisa berkomentar di blog mas

Balas

aku kok susah banget yah, kalo memahami upek2 mas?

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×