Apakah Anda seorang desainer? atau Anda sering berbagi widget, template, dll di blog? Jika ya, maka Anda harus mampu mendemonstrasikan skill atau keahlian Anda dalam hal merancang, mendemonstrasikan widget, template, dll.
Sebagian besar dari Anda mungkin menggunakan semacam tombol 'View Demo' atau 'Lihat Demo' tapi kebanyakan dari mereka mungkin memiliki gambar di tombol tersebut. Baru-baru ini tombol Widget share jejaring sosial juga mencakup gambar. Untungnya sekarang ini setelah kemajuan CSS untuk Level 3, kita dapat membuat tombol yang cantik dan menarik tanpa gambar atau script.
Keuntungan dari menggunakan murni CSS3 adalah tidak terlalu memberatkan loading blog anda. Sebagai seorang blogger atau desainer kita harus selalu mencari cara untuk meminimalkan loading blog sebanyak mungkin tanpa merugikan tampilan dan nuansa dari blog dengan memanfaatkan beberapa teknik dasar dan lanjutan dari CSS.
Postingan kali ini saya akan share ke anda tentang cara membuat tombol view demo warna warni CSS3 dengan efek di tekan. Semua tombol telah diuji dan bekerja dengan baik di Firefox, Chrome, Opera maupun Internet Explorer.
Bagaimana cara menggunakan tombol-tombol ini?
Sebelum kita mulai, Anda harus tahu bagaimana menggunakan tombol-tombol ini. Karena setiap tombol-tombol di bawah ini ada file CSS yang terpasang.
Sebelum kita mulai, Anda harus tahu bagaimana menggunakan tombol-tombol ini. Karena setiap tombol-tombol di bawah ini ada file CSS yang terpasang.
- Masuk ke akun blogger anda -> Template -> Edit HTML -> Proceed
- Centang Expand Template Widget
- Cari Tag ]]></b:skin> (untuk memeudahkan pencarian gunakan Ctrl + F)
- Tepat diatas kode ]]></b:skin> pastekan salah satu kode CSS yang terlampir dibawah ini (untuk mendapatkan kode CSS silahkan klik "View CSS" )
Catatan:
Setiap kali anda ingin menerapkan gaya (style) tombol-tobol tersebut dalam postingan blog atau dimana saja, gunakan kode-kode HTML yang telah diberikan untuk setiap tombol masing-masing.
Jangan Lupa untuk mengganti tanda # dengan Link anda.
Tombol-tombolnya antara lain:
Shiny Black
- View CSS
- Kode HTML yang digunakan:
Shiny Blue (Biru mengkilat)
- View CSS
- Kode HTML yang digunakan:
Green (Hijau)
- View CSS
- Kode HTML yang digunakan:
Magenta
- View CSS
- Kode HTML yang digunakan:
Shiny Orange (warna jingga mengkilat)
- View CSS
- Kode HTML yang digunakan:
Slick dark red (Merah tua licin / halus)
Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 00.11
ijin coba gan... :)
BalasHapus@MoyenxZ ZiEVeR Silahkan mas, dengan senang hati. Terima kasih kunjungan dan komentarnya..
BalasHapusnice info
BalasHapusdi tnggu kunjungan bliknya
http://cybernatar.blogspot.com/
Thanks a lot...insya allah, nanti blogwalking ke blog anda mas. salam.. :)
Hapusnice info gan mkasih infonya...
BalasHapusditunggu kunjungan baliknya
http://arungjonga.blogspot.com
Terima kasih mas atas apresiasinya, sudah mas. Follow back ya? salam...
BalasHapussalam kenal kang trmkasih kang infonya berguna kang
BalasHapusSama-sama mas, salam kenal juga dari saya.. :)
HapusMela udah nyoba tpi ko gagal mulu y om cek dong mngkin ad salah di blog mela search di google winmediatv
BalasHapusMhn maaf email yg masuk baru saya buka, karena kode css nya saya simpan di google drive sekarang udah saya share ke mela. Silahkan di cek kemudian ikuti lagi tutorialnya diatas..
Hapusblognya keren abiiiiss bos....ijin nyimak +belajar hehehe...
BalasHapusTerima kasih banyak kang yudha atas apresiasi dan kunjungannya, silahkan kang dengan senang hati. Salam..
Hapus