Membuat Tombol Social Media Hanya dengan CSS3, Tanpa Gambar sedikitpun :). Dengan menggunakan css sebagai pengganti gambar adalah salah satu cara efektif untuk meningkatkan kecepatan loading blog. Hasilnya sudah saya coba di browser google chrome dan mozilla firefox versi 18.0.1 dan hasilnya seperti digambar berikut:
Kalau mau liat yang lebih jelas silahkan liat demonya:
 |
| 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 ]]></b:skin> (gunakan CTRL+f agar mudah nyarinya)
lalu letakkan kode berikut tepat diatas kode ]]></b:skin>
/* 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
<!-- Start HTML X-Gen CSS Button -->
<div id="xgen-socmed">
<div class="xgen-fb">
<a href="Link Facebook">f</a>
</div>
<div class="xgen-tweet">
<a href="Link Twitter">t</a>
</div>
<div class="xgen-gplus">
<a href="Link Google Plus">g</a>
</div>
</div>
<!-- End -->
# 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 )
Sumber
Sumber
