Trik membuat button pada blog anda

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 :


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 :


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 :



Selanjutnya tinggal mengatur HTML-nya seperti ini :






Hasilnya akan nampak seperti dibawah ini :





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


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

Contoh button yang menggunakan link :


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

0 Response to "Trik membuat button pada blog anda"

Post a Comment