Blog Archive
-
2010
(16)
-
Desember(16)
- Cara Meningkatkan Koneksi Internet Anda
- Apa yang dimaksud dengan Domain ?
- CARA MEMBUAT FIREFOX ANDA OPTIMAL DAN MENARIK
- Trik Mempercepat Loading Blog anda
- Cara Membuat Button dalam Blogspot
- Cara Membagi Postingan Menjadi 2 Kolom
- Chat di Facebook dengan Pidgin
- Menulis Artikel Blog Secara Offline | W Bloggar
- Cara Memasang Yahoo Messenger Di Blogger
- Membuat Background Di Folder
- Meningkatkan Kecepatan Firefox
- Cara Blokir Aplikasi Tertentu
- Tips Menghilangkan Pesan Windows Is Not Genuine Di...
- Cara Memasang Emotion, Smiley, Icon pada Facebook
- Cara Mengatasi Galat bX-rg6px pada Template Blog
- Cara Mendapatkan Kiriman Artikel dari Blog di Face...
-
Desember(16)
Blog Archive
-
▼
2010
(16)
-
▼
Desember
(16)
- Cara Meningkatkan Koneksi Internet Anda
- Apa yang dimaksud dengan Domain ?
- CARA MEMBUAT FIREFOX ANDA OPTIMAL DAN MENARIK
- Trik Mempercepat Loading Blog anda
- Cara Membuat Button dalam Blogspot
- Cara Membagi Postingan Menjadi 2 Kolom
- Chat di Facebook dengan Pidgin
- Menulis Artikel Blog Secara Offline | W Bloggar
- Cara Memasang Yahoo Messenger Di Blogger
- Membuat Background Di Folder
- Meningkatkan Kecepatan Firefox
- Cara Blokir Aplikasi Tertentu
- Tips Menghilangkan Pesan Windows Is Not Genuine Di...
- Cara Memasang Emotion, Smiley, Icon pada Facebook
- Cara Mengatasi Galat bX-rg6px pada Template Blog
- Cara Mendapatkan Kiriman Artikel dari Blog di Face...
-
▼
Desember
(16)
Diberdayakan oleh Blogger.
Entri Populer
-
Dalam review dan rubrik tips n trik kali ini saya akan coba membahas tentang background changer, Background changer adalah sebuah tools yan...
-
Banyak sekali aplikasi-aplikasi yang berpotensi membahayakan kinerja sistem kompoter kita, tapi biasanya kita hanya pasrah saja dan men...
-
Facebook Chatbar V. 3.7 adalah Add-ons yang digunakan untuk menampilkan emotion (smiley, icon) didalam facebook . Dengan adanya Facebook Ch...
-
Ingin status facebook anda mendapatkan kiriman artikel dari Blog TP ??? Jika YA, facebook anda akan mendapatkan kiriman artikel secara otom...
-
Sebenarnya saya sudah lama sekali ingin share Tips Menghilangkan Pesan Windows Is Not Genuine Di Windows 7 ini, tapi bingung juga soalnya ...
-
Mungkin sebagian dari Anda para pengunjung atau rekan Blogger, tahu yang dimaksud dengan "Button" ? Sebuah visualisasi tomb...
-
Setelah pada artikel sebelumnya dimana Kita mengetahui tentang apa itu Hosting , Dalam Belajar Internet kali ini Kita akan mempelajari a...
-
Postingan yang unik dan menarik merupakan salah satu daya tarik yang bisa dilakukan oleh para pemilik blog, dengan harapan agar pengu...
-
Keunggulan browser Firefox selain disinyalir sebagai browser tercepat, teraman, tercerdas dan terbaik dari seluruh browser yang ada, Firefo...
-
Menulis Artikel Blog Secara Offline , mungkin dapat dilakukan dengan berbagai cara. Mulai dengan menggunakan notepad, wordpad sampai dengan ...
Pengikut
Selasa, 14 Desember 2010
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.
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.
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar