Bagaimana cara menyesuaikan Versi HTML5 tentang Facebook Like Box dengan CSS?

Unknown

5 Jun 2013

Belum ada komentar

 

Pada tutorial kali ini, kita akan belajar cara menyesuaikan Versi HTML5 tentang Facebook Like Box dengan CSS, menghapus border di sekitar kotak, menambahkan border dan mengubah warna latar belakang seperti kotak. Kita juga akan belajar untuk menyembunyikan logo Facebook social plugin di bagian bawah kotak. Anda dapat mengubahnya sesuai dengan keinginan dan  tema blog. 

Kode HTML  

Pastekan kode berikut dimana saja anda ingin memunculkan kotak like Facebooknya,

<div id="fb-root"></div>
<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.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="tbicustomlb">
  <div class="fb-like-box"
      data-width="245" data-height="275"
      data-href="https://www.facebook.com/pages/Eyang-anom/427305383989192"
      data-border-color="#F4F4F4" data-show-faces="true"
      data-stream="false" data-header="false">
  </div>         
</div>

Catatan:

• Ganti  https://www.facebook.com/pages/Eyang-anom/427305383989192 dengan Facebook Fans page URL anda.
• Kalau mau mengganti lebar lihat "width" dan panjangnya lihat "height" atur sesuai keinginan anda.

Kode CSS   

1. Masuk akun blogger anda-> klik Template-> Edit HTML
2. Cari tag/kode ]]></b:skin>  (Gunakan Control + F untuk memudahkan pencarian)
3. Pastekan kode berikut di bawah ini tepat diatas kode  ]]></b:skin> kemudian simpan template.

.tbicustomlb {
    margin: 10px auto;
    background-color: #F4F4F4;
    width: 251px;
    padding: 10px 0 10px 10px;
    height: 240px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border: 10px solid #FF9F00;
}

.tbicustomlb:hover {
    border: 10px solid #008000;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

Tambahan: 

Mengubah kode background, warna, ukuran dan warna border sesuai dengan tema blog anda:  

1. Kode yang di sorot warna biru adalah untuk mengubah background like box anda
2. Atur atribut tinggi (height) dan lebar (width) sesuai dengan ukuran kotak like anda
3. Kode yang di sorot warna orange (kuning jeruk) adalah untuk mengubah warna border
4. Kode yang di sorot warna green (hijau) adalah untuk mengubah warna border hover  

Semoga Bermanfa'at and Happy Blogging..!