Cara Desain Facebook like Box

Pada artikel sebelumnya Saya sudah mengulas mengenai atribut-atribut plugin Facebook Like Box, penjelasan tersebut cukup mendasar guna membantu anda untuk mendesain atau mengedit tampilan Like Box.



Artikel ini adalah lanjutan dari artikel sebelumnya. Mulai dari mengubah warna background, fonts serta penempatan atribut-atribut pada plugin Like Box tersebut.Di sini kita akan membuatnya menggunakan XFBML Script.









Like Box XFBML script

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

<script type="text/javascript">FB.init("12345");</script>

<fb:fan profile_id="ID-HALAMAN" stream="0" connections="12" logobar="0" width="288" height="274" css="http://www.alpra.cc.cc./style.css?1"></fb:fan>

 Perhatikan text yang berwarna merah. ID-Halaman di ganti dengan Id Halaman Facebook Anda.

Penting !

Perhatikan text "http://www.alpra.cc.cc./style.css?1" script tersebut untuk memanggil file script CSS yang anda simpan di file styles.css themes wordpress. Dan saya tekankan kepada anda, setiap kali mengubah kode script CSS maka anda harus mengubah juga angka >?1″ menjadi >?2″, >?3″ dan seterusnya hingga anda mendapatkan hasil tampilan like box yang cocok.







Dasar - Dasar Mendesain.



Berikut ini merupakan dasar script CSS untuk mendesain plugin Like Box, anda bisa mengatur atau menyesuaikannya dengan tema yang digunakan pada website atau blog.



1. Desain border dan background widget utama

/*Langkah 1 */

.fan_box .full_widget {

border: 2px solid #FF5000;

background: #FFF;

}

2. Desain teks, link, fans teks dan background top attribute

/* Langkah 1 */

.fan_box .full_widget {

border: 2px solid #FF5000;

background: #FFF;

}

/* Langkah 2 */

.fan_box .full_widget .connect_top {

border: 2px solid #FFF;

background: #FF5000;

}

.fan_box .connect_top .name_block a {

color: #FFF;

text-shadow: 1px 1px 0 #666;

font-family: Tahoma;

}

.fan_box .profileimage {

width: 50px;

height: 50px;

}

.fan_box .connect_widget {

margin-top: 10px;

color: #FFEA02;

}

.fan_box .connect_action {

padding: 0 !important;

}

.fan_box .connections {

border: 0 !important;

padding-top: 5px;

}

span.total {

font: Normal 12px Trebuchet MS;

}

.fan_box .connect_widget .connect_widget_interactive_area {

margin: 0 !important;

}

.fan_box .connect_widget td.connect_widget_vertical_center {

padding: 0 !important;

}

3. Desain image profil, nama user dan image grid



Dan berikut adalah CSS lengkap dari langkah 1 hingga langkah 3 dan simpanlah di styles.css themes file hosting Anda..

/* Langkah 1 */

.fan_box .full_widget{

border: 2px solid #FF5000;

background: #FFF;

}

/* Langkah 2 */

.fan_box .full_widget .connect_top {

border: 2px solid #FFF;

background: #FF5000;

}

.fan_box .connect_top .name_block a {

color: #FFF;

text-shadow: 1px 1px 0 #666;

font-family: Tahoma;

}

.fan_box .profileimage {

width: 50px;

height: 50px;

}

.fan_box .connect_widget {

margin-top: 10px;

color: #FFEA02;

}

.fan_box .connect_action {

padding: 0 !important;

}

.fan_box .connections {

border: 0 !important;

padding-top: 5px;

}

span.total {

font: Normal 12px Trebuchet MS;

color: #FF5000;

}

.fan_box .connect_widget .connect_widget_interactive_area {

margin: 0 !important;

}

.fan_box .connect_widget td.connect_widget_vertical_center {

padding: 0 !important;

}

/* Langkah 3 */

.fan_box .connections .connections_grid {

padding-top: 0 !important;

)

.fan_box .connections_grid .grid_item .name {

color: #FF5000;

font-family: tahoma;

}

.fan_box .connections_grid .grid_item {

padding: 0 5px 5px 0 !important;

color: #FF5000;

}

Anda dapat mengedit kode CSSnya sesuka Anda.



Click Here for Demo



Baca juga...

• Dasar - Dasar Mendesain Plugin Facebook Like Box


• Cara Memasang Desain Facebook Pada Sidebar Blog

Real Page http://alprablog.blogspot.com/