Modifikasi facebook like box (Beda!)

     Lagi - lagi, saya posting tentang Modifikasi facebook like box. Kenapa? Karena lagi pengen posting tentang ini. Nah, desain kali ini, sering kali di gunakan oleh para blogger. Memang nampak sama, tetapi di widget ini ada pernak - pernik yang bisa membuat lebih menarik. Seperti apa sih, bentuk dan pernak - perniknya? Ok, ini dia :

    Untuk cara pembuatannya, memerlukan web hosting. Nah, untuk anda, yang belum tahu atau belum mengenal web hosting, saya sarankan baca tutorial dibawah ini :

1. Apa itu Web hosting?
2. Cara membuat web hosting di Google Site
3. Membuat file hosting sendiri di Google code

    Oke, setelah mengetahui dan bisa melakukan hosting, anda bisa mencoba tutorial modifikasi facebook like box kali ini.  Kalau anda malas, membuat file hosting, bisa pakai punya saya. Pokoknya, tenang saja ya!

1. Copas kode dibawah ini, ke notepad.

/* ------ Infoiki Custom Like Box ----- */

    .fan_box a:hover{
      text-decoration: none;
    }

    .fan_box .full_widget{
      height: 200px;
      border: 0 !important;
      background: none !important;
      position: relative;
    }

    .fan_box .connect_top{
      background: none !important;
      padding: 0 !important;
    }

    .fan_box .profileimage, .fan_box .name_block{
      display: none;
    }

    .fan_box .connect_action{
      padding: 0 !important;
    }

    .fan_box .connections{
      padding: 4px !important;
      margin:3px 0px 5px 0px!important;
      border: 0 !important;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-weight: bold;
      color: #666;
    }

    span.total{
      color: #365899;
      font-weight: bold;
      background:#ECEEF5;
      padding:4px !important;
      margin:3px 0px 5px 0px!important;
      border:1px solid #E1E4ED;
     -moz-border-radius:3px;
     -webkit-border-radius:3px;
    }

span.total:hover{
     border:1px solid #6383C1;
    }

    .fan_box .connections .connections_grid {
      padding-top: 10px !important;
    }

    .fan_box .connections_grid .grid_item{
      padding: 0 10px 10px 0 !important;
    }

    .fan_box .connections_grid .grid_item .name{
      font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
      font-weight: normal;
      color: #289728 !important;
      padding-top: 1px !important;
    }

    .fan_box .connect_widget{
    position: absolute;
    bottom: 0;
    left: 0px;
    margin: 0 !important;
    }

    .fan_box .connect_widget .connect_widget_interactive_area {
    margin: 0 !important;
    }

    .fan_box .connect_widget td.connect_widget_vertical_center {
    padding: 0 !important;
    }

    /*---------------Infoiki Custom Like Box End--------------*/

  NB : Kode warna yang saya beri blog kuning, adalah warna font like box.
2. Save dengan nama FB.css
3. Hosting file ke web hosting. Saya sarankan anda memakai dari google code.
4. Setelah itu, Login blog.
5. Tata letak.
6. Add gadget -> HTML/Java script.
7. Copas kode dibawah ini :

<style>
    #mbtlikebox{
      color: #365899;
      font: bold 11px arial;
      background:#ECEEF5;
      padding:3px !important;
      margin:5px 0px!important;
      border:1px solid #E1E4ED;
     -moz-border-radius:3px;
     -webkit-border-radius:3px;
      width:290px;
    }

#mbtlikebox:hover{
     border:1px solid #6383C1;
    }
</style>
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
    <script type="text/javascript">FB.init("");</script>
    <fb:fan profile_id="LIKE PAGE ID" stream="0" connections="10" width="350px" height="200px" header="0" logobar="0"   css="Link hosting file"></fb:fan> 
<div id="mbtlikebox"><a rel="nofollow" target="_blank" style="text-decoration:none; color:#365899;" href="LIKE PAGE URL">Visit our page »</a><div style="float:right"><a href='http://infoiki.blogspot.com/2012/07/modifikasi-fb-box-beda.html' style="text-decoration:none; color:#365899;">Create this one »</a></div></div>

KETARANGAN
1.Tulisan berwarna hijau, adalah ID fb fans page anda. Contoh :

https://facebook.com/pages/infoiki-community/123456789
Angka berwarna hijau, adalah ID fb page anda.
2. Kode warna biru adalah alamat tautan file hosting yang tadi sudah anda upload. Atau bisa pakai punya saya : http://infoikiblog.googlecode.com/files/fb.css
3. Kode berwarna merah, width = lebar & height = tinggi.
4. Kode berwarna hitam yang ditebalkan, ganti dengan URL page FB anda.

8. Save.
jangan lupa lihat sumbernya di sini gan.