Membuat "Buttton" Sederhana dalam Blog

Membuat "Buttton" Sederhana dalam Blog

Posted by rike on 0

Kamu tahu dong yang namanya "button", yap,... button yang kita optimasi kali ini merupakan visualisasi tombol yang ada pada layar monitor kamu. Pada saat kamu meng-klik tombol tersebut (dengan menggunakan mouse) maka akan terjadi sesuatu (Kamus Komputer dan Teknologi Informasi). Sok ilmiah, padahal nyontek tuh (ha..ha.. bruaaakkk). Kok, ada bunyi "bruaaakkk"-nya? Sorry, saking terpingkalnya, OB jatuh dari kursi. Kembali ke button! Untuk peng-kode-annya dalam HTML dijabarkan sebagai berikut :

<button type="button">Tulis teks kamu di sini</button>

Hasilnya :

Mudah bukan? Kalau begitu selesai deh postingnya... Lho kok simpel kali OB? It's just kidding, friend. Yuk, kita ikuti lanjutan trik blogger optimasi button dalam blog.

Sebelum beranjak lebih jauh, mari sama-sama kita kupas peng-kode-an sederhana lainnya untuk menghiasi sebuah "button". Contohnya seperti di bawah ini :

Adapun kode HTML "button di atas adalah :

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

Keterangan :

• background : warna latar button.


• color: warna teks/tulisan.


• padding : Jarak tepi button dengan teks di dalamnya (ke dalam), 0 10px 0 10px artinya padding atas=0; kanan=10px; bawah=0; kiri=10px.


• margin: jarak button dengan tepi bidang gambar (ke luar), 5px 0 5px 0 artinya margin atas=5px; kanan=0; bawah=5px; kiri=0.


• font : huruf teks.

Catatan :

Masih banyak asessoris kode lainnya yang dapat kamu tambahkan dalam "button" tersebut.

Namun tidak jarang, kita ingin membuat lebih dari satu button dalam menghiasi blog. Apabila karakteristik "button" yang akan kamu tambahkan sama dengan "button" yang telah ada, tentu kamu akan senantiasa berulangkali menulis kode yang sama pula. Betul tidak? Alangkah kurang efesiennya penulisan kode HTML yang berulang-ulang tersebut. Sehingga adalah merupakan hal yang arif, jika kita mengatur kode tersebut agar lebih multiguna gitu loh. Nah, disinilah muncul peran CSS (jangan tanya kepanjangannya, ya?) yang bermanfaat untuk menampilkan elemen HTML. Mari kita ambil kode HTML "button" diatas dan akan kita jadikan ke dalam bentuk CSS :

#buttonku {

background:#000000;

color:#FFFFFF;

font:bold 20px Verdana, Geneva, sans-serif;

margin:5px 0 5px 0;

padding: 0 10px 0 10px; }

Catatan :

Dalam blog kode CSS biasanya berada diantara kode <b:skin><![CDATA[ ... ]]></b:skin>.



Selanjutnya tinggal mengatur HTML-nya seperti ini :

<button id="buttonku" type="button">Click Me!</button>

<button id="buttonku" type="button">Click Me too!</button>

<button id="buttonku" type="button">Click Me too..too!</button>

... dst

Hasilnya :









..dst



Catatan :

Apabila kamu ingin lebih memperdalam ilmu pemprograman ini yang di antaranya termasuk HTML dan CSS, coba kunjungi W3schools.

Hmm... rasanya ada yang kelupaan nih? Oh, iya...! Sekarang bagaimana kalau "button" tersebut ingin kita letakkan sebuah link. Caranya cukup mudah, yakni dengan menyisipkan kode HTML "button" ke dalam kode link yang lebih kurangnya digambarkan sebagai berikut :

<a href="...alamat yang dituju..." target="blank"><button type="button">Tulis teks kamu di sini</button></a>

Keterangan :

target="blank" diartikan link akan diarahkan ke tab baru.



Tips :

Jika link berada dalam blog kita sendiri, sebaiknya jangan diarahkan ke tab baru (boros he..he..). Sebaliknya jika link berada di luar area blog, silakan tambahkan kode target="blank" tersebut.

Contoh "button" dengan menggunakan link :

<a href="http://optimasi-blog.blogspot.com/"><button type="button">Optimasi Blog</button></a>

<a href="http://www.w3schools.com/" target="blank"><button type="button">W3Schools</button></a>

Hasilnya :

Kamu pun bisa mencoba untuk mengobrak-abrik kode lainnya, sehingga tampilan "button" tersebut berkesesuaian dengan apa yang kamu inginkan. Akhirnya, Selamat ber-"button" ria...