12 April 2013

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

Posted at  23.09  |  in  widget



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..!

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 23.09
Anda menyukai postingan di atas? Silahkan di share..!
Blogging dan wawasan spiritual Post Author

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

5 komentar:

  1. Terima kasih saudara yudhaardiansyah atas informasi dan kunjungannya, salam...

    BalasHapus
  2. hebat bang! (h)
    abang raja CSS ya? hahaa :))

    BalasHapus
    Balasan
    1. haha... :d bukan lah, saya banyak2 googling dan surfing ke website luar apa yg saya dapatkan saya share kembali..

      Hapus
    2. oh.. !! :o
      iya atuh hahaa :)
      sukses slalu ya blog nya :)

      Hapus
  3. Terimakasih, artikel yang menarik~
    Kunjungi website kami:
    Disini

    BalasHapus

About Us-Privacy Policy-Contact us
Copyright © 2013 Wawasan spiritual dan blogging. Blogger Template by BloggerTheme9
Proudly Powered by Blogger.
back to top