Rekan-rekan blogger tentunya memahami pentingnya button dalam penulisan blognya. Fungsi button bisa menambah estetika penampilan blog sehingga lebih pantas untuk ditampilkan daripada sekedar link biasa. Tips membuat Button dalam blog sebenarnya mudah. Hal ini lebih baik daripada kita memakai fasilitas link button dari pihak ketiga sehingga hanya menambah link keluar dan menambah berat loading blog kita. Mau mencoba membuatnya?.
Tanpa perlu banyak basa basi mari kita mulai tutorial button ini. Langkah awal kita mesti tahu peng-kode-annya dalam HTML, Contoh kode button sederhana sebagai berikut :
<button type="button">Klik di sini</button>
Hasilnya adalah sebagai berikut :
Cukup mudah bukan? Oke kita lanjutkan pada langkah berikutnya yaitu bagaimana bila button tersebut kita modifikasi sehingga memiliki warna yang menarik.
Contoh kode-nya adalah sebagai berikut :
<button type="button" style="background:#000000; color: #FFFFFF; font:bold 20px Verdana, Geneva, sans-serif; margin:5px 0 5px 0; padding: 0 10px 0 10px;">Click me!</button>
Hasilnya adalah sebagai berikut :
Masih mudah bukan? kita hanya perlu menyisipkan warna yang kita inginkan dalam kode.
Oke kita lanjutkan lagi. Bagaimana kita bisa me-link-kan button yang kita buat dengan link alamat yang kita tuju.
Caranya mudah saja kita hanya perlu menyisipkan kode button dengan kode url alamat yang kita tuju, misalnya kodenya sebagai berikut :
<a href="...alamat tujuan..." target="_blank"><button type="button">Klik link ini</button></a>
Contoh hasilnya adalah sebagai berikut :
Silahkan di klik untuk membuktikan link yang akan terbuka di tab yang baru.
Hal lain sebagai perhatian adalah nilai margin, padding bisa sobat sesuaikan sendiri sesuai selera dan kebutuhan. Begitu pula dengan background dan colour bisa sobat eksplorasi sendiri sesuai keinginan.
Semoga tutorial singkat ini bisa bermanfaat.
Silahkan baca artikel tutorial lainnya :
No comments:
Post a Comment