Gambar di atas adalah tampila plugin facebook standard. facebook hanya menyediakan 2 tampilan yaitu light dan dark. Bosen juga liat tampilan facebook like boxnya. Kali ini saya akan mendesain facebook like box sendiri dengan cara mengubah kode CSS nya. Mendesain plugin facebook ini bukan lah hal yang gambang. Langsung saja menuju materi hari ini.
1. Main Widget.
Main widget merupakan inti dari plugin ini, pada script bawaannya (default) terdapat dua pilihan warna yakni Light dan Dark. Berikut contoh tampilan main widget beserta CSS script yang sudah saya buat.
Berikut kode CSSnya
/* Main Widget */
.fan_box .full_widget{
height: 250px;
border: 2px solid #084E96;
background: #f2f2f2;
position: relative;
}
.fan_box .full_widget{
height: 250px;
border: 2px solid #084E96;
background: #f2f2f2;
position: relative;
}
2. Top Element
Terdapat 3 atribut penting pada elemen ini, diantaranya Image Profile Page, Profil Page Name dan Connect Widget Button.
Keterangan :
- .connect_top
- .connect_action
- .profileimage
- .name_block
- .connect_widget,.connect_widget_interactive_area dan td.connect_widget_vertical_center
Berikut Kode CSSnya
/* Top Element */
.fan_box .full_widget .connect_top{
border: 2px solid #f2f2f2;
background: #FFEA02;
}
.fan_box .full_widget .connect_action{
background: #BDC7D8;
}
.fan_box .connect_action .profileimage {
}
.fan_box .connect_action .name_block{
}
.fan_box .connect_action .connect_widget{
}
.fan_box .connect_widget .connect_widget_interactive_area {
background: #FFBB00;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
background: #109504;
}
.fan_box .full_widget .connect_top{
border: 2px solid #f2f2f2;
background: #FFEA02;
}
.fan_box .full_widget .connect_action{
background: #BDC7D8;
}
.fan_box .connect_action .profileimage {
}
.fan_box .connect_action .name_block{
}
.fan_box .connect_action .connect_widget{
}
.fan_box .connect_widget .connect_widget_interactive_area {
background: #FFBB00;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
background: #109504;
}
3. Fans Connections
Disini anda akan melihat atribut Total Count User dan daftar User Profil (nama dan foto).
Keterangan:
- .connections
- .total
- .connections_grid
- .grid_item
- .name
Berikut kode CSSnya.
/* Fans Connection */
.fan_box .connections{
background: #A3D98A;
}
.fan_box .connections span.total{
}
.fan_box .connections .connections_grid {
background: #0281FF;
}
.fan_box .connections_grid .grid_item{
background: #FFE5FF;
}
.fan_box .connections_grid .grid_item .name{
color: #000;
}
/* 3 */
.fan_box .connections{
background: #A3D98A;
}
.fan_box .connections span.total{
}
.fan_box .connections .connections_grid {
background: #0281FF;
}
.fan_box .connections_grid .grid_item{
background: #FFE5FF;
}
.fan_box .connections_grid .grid_item .name{
color: #000;
}
.fan_box .connections{
background: #A3D98A;
}
.fan_box .connections span.total{
}
.fan_box .connections .connections_grid {
background: #0281FF;
}
.fan_box .connections_grid .grid_item{
background: #FFE5FF;
}
.fan_box .connections_grid .grid_item .name{
color: #000;
}
/* 3 */
.fan_box .connections{
background: #A3D98A;
}
.fan_box .connections span.total{
}
.fan_box .connections .connections_grid {
background: #0281FF;
}
.fan_box .connections_grid .grid_item{
background: #FFE5FF;
}
.fan_box .connections_grid .grid_item .name{
color: #000;
}
Dengan keterangan atribut diatas akan sedikit mempermudah pengeditan CSS script untuk plugin Like Box yang akan anda desain.
Baca juga...
0 komentar:
Posting Komentar