Cara Membuat Button dalam Blogspot

Mungkin sebagian dari Anda para pengunjung atau rekan Blogger, tahu yang dimaksud dengan "Button" ?


Sebuah visualisasi tombol yang muncul dalam layar monitor Anda, dan apabila di klik, maka akan terjadi proses yang sudah kita rumuskan berbentuk kode HTML dan dia akan melakukan sesuatu seperti yang kita perintahkan.


Dan kali ini, Saya akan  memberikan informasi mengenai Cara Membuat Button dalam Blog atau Website kita. 

Untuk kode HTML yang Saya maksudkan tadi, tulislah kode ini :

<button type="button">Ketik teks Anda di sini</button>

Maka, hasilnya akan seperti dibawah ini :

Ada beberapa kode lainnya juga agar Button yang kita buat bisa lebih menarik, seperti contoh dibawah ini :

dan untuk menghasilkan tombol button seperti diatas, Anda bisa membuat kode HTML seperti dibawah ini :

<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;">Klik Disini !</button>

Keterangan :

• background : warna latar button.
• color : warna tulisan/text.
• padding : Jarak tepi button dengan teks di dalamnya, 0 10px 0 10px artinya padding atas bernilai atau = 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.

Dan masih banyak Kode HTML lainnya yang bisa Anda tambahkan untuk lebih memperindah Button yang ingin dibuat.


Mungkin Anda memerlukan lebih dari satu button untuk mengisi blog Anda, dan apabila isi dari button yang ingin ditambahkan, sama dengan button yang sudah ada, tentunya Anda akan berulangkali menuliskan kode yang sama. Dan tentunya dengan penulisan Kode HTML yang berulang-ulang, itu menyebabkan pekerjaan kita jadi kurang efisien bukan ?


Oleh sebab itu, kita harus mengatur kode html tersebut bisa mencakup keseluruhan button yang akan dibuat dengan menggunakan CSS, dimana kumpulan elemen dari HTML, dijadikan dalam bentuk CSS seperti kode dibawah ini : 

#buttonku {

background:#000000;
color:#FFFFFF;
font:bold 20px Verdana, Geneva, sans-serif;
margin:5px 0 5px 0;
padding: 0 10px 0 10px; }

Dan kode CSS biasanya berada diantara kode :


<b:skin><![CDATA[ ... ]]></b:skin>

Selanjutnya tinggal mengatur HTML-nya seperti ini :


<button id="buttonku" type="button">Tekan Disini !</button>
<button id="buttonku" type="button">Klik Disini !</button>
<button id="buttonku" type="button">Klik Sekali lagi !</button>


Hasilnya akan nampak seperti dibawah ini :







Bila Anda ingin menyisipkan sebuah link dalam button tersebut, maka tuliskanlah Kode HTML link seperti dibawah ini :

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

Keterangan :
target="blank" dapat diartikan, link akan diarahkan ke tab baru.


Contoh button yang menggunakan link :

<a href="http://www.newkaze.co.cc/"><button type="button">New Kaze</button></a>
<a href="http://www.cyberkaze.blogspot.com/" target="blank"><button type="button">Cyber Kaze</button></a>

Hasilnya :

Posted in: Blog