Cara Membuat Tombol Social Media Tanpa Gambar
Hai sob, kali ini saya 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:
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 Sosial Media Button */
#rizqi-socmed{ margin:5px auto;width:220px;}
.rizqi-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;}
.rizqi-fb:hover{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}
.rizqi-fb a:link{font-weight:700;font-size:50px;color:#fff;text-decoration:none}
.rizqi-fb a:visited{font-weight:700;font-size:50px;color:#fff;text-decoration:none}
.rizqi-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;}
.rizqi-tweet:hover{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}
.rizqi-tweet a:link{font-weight:700;font-size:50px;color:#fff;text-decoration:none}
.rizqi-tweet a:visited{font-weight:700;font-size:50px;color:#fff;text-decoration:none}
.rizqi-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;}
.rizqi-gplus:hover{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}
.rizqi-gplus a:link{font-weight:700;font-size:50px;color:#fff;text-decoration:none}
.rizqi-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 CSS Button -->
<div id="rizqi-socmed">
<div class="rizqi-fb">
<a href="Link Facebook">f</a>
</div>
<div class="rizqi-tweet">
<a href="Link Twitter">t</a>
</div>
<div class="rizqi-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 :)
0 Response to "Cara Membuat Tombol Social Media Tanpa Gambar"
BACA DULU SEBULUM BERKOMENTAR PERATURAN BERKOMENTAR DI BLOG INI :
- Di Wajibkan Berkomentar Dengan OpenID,supaya mimin bisa berkunjung balik
- Berkomentarlah sesuai artikel diatas,Jika diluar artikel gunakanlah tag [ OOT ].
- Berkomentar Disaran kan Sesuai Artikel
- Untuk Menyisipkan Kode Gunakan <i rel="code">Tulis kode yang sudah diparse di sini</i>
- Untuk Menyisipkan pre Gunakan <i rel="pre">Tulis kode yang sudah diparse di sini</i>
- Untuk Menyisipkan Catatan/Blockquote Gunakan <b rel="quote">Tulis catatan di sini</b>
- Untuk Menyisipkan Link Gunakan <i rel="anchor">URL DISINI</i>
- Untuk Menyisipkan Gambar Langsung Saja Tulis URL Imagenya
- Untuk Menyisipkan Video Youtube Langsung Saja Tulis URL Videonya
Konversi KodeEmoticon