Tampilan Biasa |
Saat disentuh Mouse (hover effect) |
Oke, berikut ini tutorial untuk Membuat Tombol Social Media Hanya dengan CSS3
1. Dihalaman pertama blogger (dashboard) pilih "Template" lalu pilih "Edit HTML"
2. Cari kode ]]>
(gunakan CTRL+f agar mudah nyarinya)
lalu letakkan kode berikut tepat diatas kode ]]>
/* Start CSS X-Gen Sosial Media Button */
#xgen-socmed{ margin:5px auto;width:220px;}
.xgen-fb{float:left;background:#254dfd;padding:20px 5px;-webkit-border-radius:8px 8px 8px 0;-moz-border-radius:8px 8px 8px 0;border-radius:8px 8px 8px 0;margin:7px;width:40px;max-height:20px;text-align:center;border-top:5px solid #0121b1;border-right:5px solid #0121b1;-webkit-transition: all 0.26s ease-out 0s;-moz-transition: all 0.26s ease-out 0s;-o-transition: all 0.26s ease-out 0s;transition: all 0.26s ease-out 0s;}
.xgen-fb:hover{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}
.xgen-fb a:link{font-weight:700;font-size:50px;color:#fff;text-decoration:none}
.xgen-fb a:visited{font-weight:700;font-size:50px;color:#fff;text-decoration:none}
.xgen-tweet{float:left;background:#00cae8;padding:20px 5px;-webkit-border-radius:8px 8px 8px 0;-moz-border-radius:8px 8px 8px 0;border-radius:8px 8px 8px 0;margin:7px;width:40px;max-height:20px;text-align:center;border-top:5px solid #006f7f;border-right:5px solid #006f7f;-webkit-transition: all 0.26s ease-out 0s;-moz-transition: all 0.26s ease-out 0s;-o-transition: all 0.26s ease-out 0s;transition: all 0.26s ease-out 0s;}
.xgen-tweet:hover{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}
.xgen-tweet a:link{font-weight:700;font-size:50px;color:#fff;text-decoration:none}
.xgen-tweet a:visited{font-weight:700;font-size:50px;color:#fff;text-decoration:none}
.xgen-gplus{float:left;background:#313232;padding:12px 5px 28px 5px;-webkit-border-radius:8px 8px 8px 0;-moz-border-radius:8px 8px 8px 0;border-radius:8px 8px 8px 0;margin:7px;width:40px;max-height:20px;text-align:center;border-top:5px solid #000;border-right:5px solid #000;-webkit-transition: all 0.26s ease-out 0s;-moz-transition: all 0.26s ease-out 0s;-o-transition: all 0.26s ease-out 0s;transition: all 0.26s ease-out 0s;}
.xgen-gplus:hover{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}
.xgen-gplus a:link{font-weight:700;font-size:50px;color:#fff;text-decoration:none}
.xgen-gplus a:visited{font-weight:700;font-size:50px;color:#fff;text-decoration:none}
/* end */
* kamu bisa memodifikasi lagi css diatas kalau mau
3. Klik "Simpan Template"
4. Pilih "Tata Letak" atau "Layout"
5. Klik "Tambah Gadget" (lebih bagus di sidebar) lalu pilih "HTML/Javascript", Masukkan kode berikut didalamnya
">t
">g
# Ganti teks yang warna hijau dengan linkmu
6. Buka blogmu dan lihat hasilnya :)
6. Buka blogmu dan lihat hasilnya :)
note:
- Kalau ada yang kurang jelas silahkan tanya via komentar dibawah
- Kalau ini bermanfaat silahkan klik like dibawah atau join blog ini ( jangan habis sedot kabur :D )