Informasi terbaru Hias Tombol Like Facebook dengan CSS
Tombol Like facebook, adalah widget yang disediakan facebook untuk penggunanya yg memiliki situs maupun blog. Tombol Like Facebook ini bisa di pasang ke blog / situs dan bisa terhubung langsung ke facebook.. Untuk memasang tombol ini silahkan saja kunjungi halaman widget facebook di http://www.facebook.com/facebook-widgets/index.php.
Ikuti instruksi untuk mendapatkan kodenya, bisa di pasang di banyak tempat, sidebar, akhir tulisan, dibawah judul artikel maupun di bagian header. Sejatinya tombol ini warna nya transparant, dia akan mengikuti warna dari element yg dihinggapinya.
Tapi, jika mau, kita bisa menghiasi widget ini dengan CSS buatan sendiri, seperti Tombol like blog ini :
Biar lebih mudah, kita bongkar aja triknya, hiasan pada tombol like facebook tidak serta merta langsung bagus seperti yang ada sekarang ini, kita mengujinya beberapa kali sebelum memasangnya di blog. Dan disini kita memanfaatkan editor script dari situs w3schools.com
Pertama tama pergilah ke http://www.w3schools.com/css/default.asp, disana kita akan diajarin CSS, klik editor seperti yang ada di gambar contoh berikut :
Mengklik Try it Yourself kita akan di bawa ke window baru, sebuah editor...
Biar gak panjang ceritanya, kita kasih kode yg kita gunakan aja. So dibagian editor masukan kode CSS berikut (pada barisan kode CSS) tentunya, :
Dan kode HTML nya seperti ini :
Nah, dieditor CSS w3schools, jika kita masukan kode tadi dengan benar dan mengklik Edit and clik me >> , akan terlihat hasilnya..
Karna CSS adalah bahasa yang elastis, sungguh sulit menjelaskannya, jadi silahkan menggunakan imajinasi dan sesuaikan dengan tempat dimana widget ini akan dipasang nantinya...
Ikuti instruksi untuk mendapatkan kodenya, bisa di pasang di banyak tempat, sidebar, akhir tulisan, dibawah judul artikel maupun di bagian header. Sejatinya tombol ini warna nya transparant, dia akan mengikuti warna dari element yg dihinggapinya.
Tapi, jika mau, kita bisa menghiasi widget ini dengan CSS buatan sendiri, seperti Tombol like blog ini :
Biar lebih mudah, kita bongkar aja triknya, hiasan pada tombol like facebook tidak serta merta langsung bagus seperti yang ada sekarang ini, kita mengujinya beberapa kali sebelum memasangnya di blog. Dan disini kita memanfaatkan editor script dari situs w3schools.com
Pertama tama pergilah ke http://www.w3schools.com/css/default.asp, disana kita akan diajarin CSS, klik editor seperti yang ada di gambar contoh berikut :
Mengklik Try it Yourself kita akan di bawa ke window baru, sebuah editor...
Biar gak panjang ceritanya, kita kasih kode yg kita gunakan aja. So dibagian editor masukan kode CSS berikut (pada barisan kode CSS) tentunya, :
#ulikeme {
background:#E0EBFF;
width:600px;
height:60px;
padding:0;
margin:0;
}
#ulikeme-atas {
background:#fff;
background-image:URL('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_KFeXpGqvokHiWtM3cQz6X1eN8DkanMp2FoYTBCeujyjIj809wH75Yoxevlyi-OMmnuqzU7KjhyEucr3CktEekI0k3v4u0pE02TjwYqH-LaY4HxLYZZoPWzzdAEeEkDQu-ZeWmSXnNr0S/s1600/like.JPG');
background-repeat: no-repeat;
background-position:left bottom;
float:left;
width:600px;
height:18px;
}
#ulikeme-bawah {
padding-top:10px;
padding-right:15px;
background:#E0EBFF;
float:left;
width:580px;
height:30px;
}
Dan kode HTML nya seperti ini :
<div id='ulikeme'>
<div id='ulikeme-atas'></div>
<div id='ulikeme-bawah'>disini kode like facebook di apit</div></div>Nah, dieditor CSS w3schools, jika kita masukan kode tadi dengan benar dan mengklik Edit and clik me >> , akan terlihat hasilnya..
Karna CSS adalah bahasa yang elastis, sungguh sulit menjelaskannya, jadi silahkan menggunakan imajinasi dan sesuaikan dengan tempat dimana widget ini akan dipasang nantinya...
0 komentar:
Posting Komentar