BASA YANG SUDAH BASI
Kemaren saya sedang JSS (Jalan Sore-Sore) di perkotaan internet ini sambil mencari sesuatu yang bermanfaat. Kebiasaan saya kalau lagi blogging selalu menyimpan atau mengarsipkan artikel atau source kode HTML/CSS yang menurut saya berguna (entah kapan.. siapa tau) dan yang paling penting adalah kalau itu berupa artikel maka artikel itu benar - benar saya perlukan dan kalau itu berupa Source Kode, hal itu harus benar - benar working dan teruji. Ketika melihat blog BLOGGER TUNEUP (modification-blog[dot]blogspot[dot]com) saya sangat tertarik dengan tombol DEMO pada salah satu postingan yang bereffect nudging yang pada awalnya hanya terlihat sebuah ikon tapi ketika mouse diarahkan ke ikon tersebut maka gambar tersebut seperti membuka.. wow amazing.
Nah.. terinspirasi itulah saya kemudian mencari tentang bagaimana cara membuat itu hingga pada akhirnya kutemukan diblog CSS Tuts (under-88[dot]blogspot[dot]com) tentang cara pembuatan effect tersebut. Dan yang paling mencengangkan lagi, ternyata effect animasi itu hanya dibuat dengan kode CSS saja bukannya Javascript.
Kalau begitu kita langsug saja bagaimana cara pembuatannya.
CARA PEMASANGAN
Ikuti langkah - langkah dibawah ini :
- Login ke Account Blogger
- Lalu Template - Edit HTML - centeng pada Expand Widget Templates
- Cari kode ]]></b:skin> (Gunakan Ctrl+F untuk mencari)
- Lalu selanjutnya Copy-Paste kode CSS dibawah ini tepat diatas kode ]]></b:skin> tersebut.
- Sebelum menyimpan pekerjaan sobat, biasakan untuk melakukan Pratinjau dahulu dengan menekan tombol Preview.
- Kalau tidak ada masalah silahkan klik Save Template untuk menyimpan.
CARA PEMAKAIAN
Kalau dalam source kode aslinya adalah seperti ini
Sehingga kalau di klik akan membuka pada halaman yang sama, tapi sekarang kita akan memanfaatkan kode target="output" sebagai tambahan supaya ketika kita klik maka akan terbuka pada tab yang baru.
Akan tetapi hal ini sebagai opsional saja, jika tidak suka maka silahkan dibuang saja dan kembali pakai kode yang diatas.
Untuk cara pemakaian menyertakan kode HTML dibawah ini :
Ini untuk tombol DEMO
Ini untuk tombol DOWNLOAD
Ini untuk tombol Informasi
Untuk pemanfaatannya silahkan memakai kreasi masing - masing.
PENUTUP
Semoga postingan kali ini bisa berguna dan bisa dimanfaatkan dengan baik. Sampai ketemu lagi di postingan yang tidak kalah menarik lainnya. Alhamdulillah
Post a Comment