Trik Membuat Tombol Social Media Tanpa Gambar, Hanya dengan CSS3

Hai sob, nah kali ini Xray Blog akan sedikit bereksperimen dengan css button. Ya, saya akan berbagi hasil eksperimen saya untuk 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:

Tampilan Biasa

Saat disentuh Mouse (hover effect)

Kalau mau liat yang lebih jelas silahkan liat demonya: Demo

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 :)

sekian Tutorial Tombol Social Media Tanpa Gambar, Hanya dengan CSS3

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

Tweet