06 January, 2012

Pilihan Tampilan CSS Facebook Like Box

Oke ini dia ke empat source kode CSS yang nantinya dapat merubah tampilan dari Facebook Like Box. Postingan sebelumnya Merubah Tampilan Like Box Facebook

Untuk lebih jelas nanti jadinya seperti apa silahkan lihat ke-empat sample Like Box facebook yang sudah jadi di sini.

Selanjutnya :
  • KLIK Template.
  • Jangan lupa untuk mengback-up template anda.
  • Edit HTML --- Lanjutkan.

dan Copy tampilan salah satu dari empat source kode CSS di bawah ini (pilih salah satu saja), dan Pastekan di atas kode :

]]></b:skin>

Facebook Like Box 1

.fb-like-box {
background: rgb(166,171,173);
background: -moz-radial-gradient(center, ellipse cover,  rgba(166,171,173,1) 1%, rgba(215,222,227,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(166,171,173,1)), color-stop(100%,rgba(215,222,227,1)));
background: -webkit-radial-gradient(center, ellipse cover,  rgba(166,171,173,1) 1%,rgba(215,222,227,1) 100%);
background: -o-radial-gradient(center, ellipse cover,  rgba(166,171,173,1) 1%,rgba(215,222,227,1) 100%);
background: -ms-radial-gradient(center, ellipse cover,  rgba(166,171,173,1) 1%,rgba(215,222,227,1) 100%);
background: radial-gradient(center, ellipse cover,  rgba(166,171,173,1) 1%,rgba(215,222,227,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6abad', endColorstr='#d7dee3',GradientType=1 );
width: 292px; height:258px;
border: 1px solid #DCDCDC;
}

Facebook Like Box 2

.fb-like-box {
background: -moz-linear-gradient(top,  rgba(125,185,232,0) 0%, rgba(174,205,229,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,0)), color-stop(100%,rgba(174,205,229,1)));
background: -webkit-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(174,205,229,1) 100%);
background: -o-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(174,205,229,1) 100%);
background: -ms-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(174,205,229,1) 100%);
background: linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(174,205,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#aecde5',GradientType=0 );
width: 292px; height:258px;
border: 1px solid #DCDCDC;
}

Facebook Like Box 3

.fb-like-box {
background: rgb(255,236,214);
background: -moz-linear-gradient(top,  rgba(255,236,214,1) 18%, rgba(255,175,75,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(18%,rgba(255,236,214,1)), color-stop(100%,rgba(255,175,75,1)));
background: -webkit-linear-gradient(top,  rgba(255,236,214,1) 18%,rgba(255,175,75,1) 100%);
background: -o-linear-gradient(top,  rgba(255,236,214,1) 18%,rgba(255,175,75,1) 100%);
background: -ms-linear-gradient(top,  rgba(255,236,214,1) 18%,rgba(255,175,75,1) 100%);
background: linear-gradient(top,  rgba(255,236,214,1) 18%,rgba(255,175,75,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffecd6', endColorstr='#ffaf4b',GradientType=0 );
width: 292px; height:258px;
border: 1px solid #DCDCDC;
}

Facebook Like Box 4

.fb-like-box {
background: rgb(255,255,255);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI0NyUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWRlZGVkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1)));
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
background: radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=1 );
width: 292px; height:258px;
border: 1px solid #DCDCDC;
}

Note : Perhatikan pada kode yang saya Blod warna biru itu merupakan pengaturan width (lebar) dan height (tinggi), itu di sesuaikan dengan kode width dan height dari kode yang anda dapat dari developer like box facebook pada IFRAME nya.

Oke... gimana tampilan Facebook Like Box nya...??? seep selamat mencoba, salam Nge - LIKE. salam.. brada and sista...


Page 2 of 2. <back | 1 | 2 | end

2 comments

  1. Keren gan! thx ya,,


    visit back : http://pks-dpc-lamongan.blogspot.com/

    ReplyDelete
  2. susu kambing02:40

    mantab gan.. senang bisa berkunjung kesini, semoga bermanfaat .salam kenal, kunjungan baliknya ditunggu

    www.produsensusukambingbubuk.com

    www.produsensusukambing.com

    www.sarimaduutama.web.id

    www.globalmandirisejahtera.web.id

    Info: Kami Pusat pabrik susu kambing etawa bubuk organik berkualitas, ( Supplier terbesar dan terperaya di indonesia ) Peluang usaha bagi anda yang memiliki bakat didunia Bisnis marketing untuk menjadi mitra distributor susu kambing etawa di kota anda,

    ReplyDelete


Copyright © 2016 Photoshop blog dan Blogger