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.
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; }
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>
<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.tentang-komputer-internet.co.cc/"><button type="button">Tentang Komputer Internet</button></a>
<a href="http://dreamlandhost.com/" target="blank"><button type="button">Hosting Murah Berkualitas</button></a>
<a href="http://dreamlandhost.com/" target="blank"><button type="button">Hosting Murah Berkualitas</button></a>
Hasilnya :
Oke, sampai disini pembahasan mengenai cara membuat button dalam blogspot kita, semoga bermanfaat, dan trik ini sebenarnya dapat Anda kembangkan lebih jauh, sehingga tampilannya sesuai dengan yang Anda inginkan.
Selamat mencoba dan,
Terimakasih.
