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>
.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...
0 Komentar untuk "Pilihan Tampilan CSS Facebook Like Box"