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>
<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;
}
.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;
}
.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;
}
.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.
Baca juga...
5 komentar:
@Adhi : udah gabung di faceblog.web.id blm gan? itu jejaring sosial khusus para bloger Indonesia :D
blog saya pke ginian bisa brapa like yah?? manteb jg nih infona hahha
@Rachiel : Semua tergantung pengunjung, minat ga ngelike blog kita :D
@ sadeva blum gan ntar di liat
@Adhi : cpt" deh daftar :D
Posting Komentar