Kiat Cara membuat dan meletakkan tombol di blog

Untuk membuat tombol di situs web atau blog Anda cara termudah adalah dengan menggunakan gaya CSS untuk menempatkan gambar tombol sebagai latar belakang teks (tautan Anda). Tenang terdengar agak rumit, tetapi ada beberapa baris kode dan kemudian meletakkan atau memodifikasi tombol akan menjadi tugas yang sangat sederhana dan cepat. 
Sebelum memulai, kita perlu menemukan atau membuat 2 gambar untuk digunakan sebagai tombol, mereka harus memiliki ukuran yang sama karena kita akan menggunakan satu ketika blog muncul dan yang lainnya ketika kita mengarahkan kursor ke tautan. Berikut adalah beberapa program gratis untuk mengedit gambar, mereka bagus untuk membuat tombol dan gambar lain yang Anda butuhkan di blog Anda. Setelah itu Anda perlu meng-host gambar di suatu tempat kami sarankan ImageShack.

Sekarang mari kita mulai meletakkan tombol-tombol baru di blog Anda, pertama mari kita meletakkan gaya CSS, masuk ke halaman edit html, cari body {... ada beberapa hal di sini ...}, sebelum kata body meletakkan kode di bawah ini: 

.botao a {text-decoration: none; 
font-family: Arial, Helvetica, sans-serif; 
warna: # 000000; 
warna latar: # F2DBB9; 
background-image: url (http://img10.imageshack.us/img10/5389/overuar.jpg); 
lebar: 210px; 
indentasi teks: 5px; 
tinggi: 30px; 
display: blok; 
garis-tinggi: 30px; 
ukuran font: 12pt; 
} 
.botao ke: hover { 
color: # 000099; 
warna latar: # cbe1ec;
background-image: url (http://img254.imageshack.us/img254/6578/outa.jpg); 
} 

Ini membuatnya sangat mudah untuk menemukan kode tombol ini ketika Anda ingin mengubahnya, halaman edit html Anda terlihat seperti ini: 

/ * Tata letak primer * / 
.botao a {text-decoration: none; 
font-family: Arial, Helvetica, sans-serif; 
warna: # 000000; 
warna latar: # F2DBB9; 
background-image: url (http://img10.imageshack.us/img10/5389/overuar.jpg); 
lebar: 210px; 
indentasi teks: 5px; 
tinggi: 30px; 
display: blok; 
garis-tinggi: 30px; 
ukuran font: 12pt; 
} 
.botao ke: hover { 
color: # 000099; 
warna latar: # cbe1ec;
background-image: url (http://img254.imageshack.us/img254/6578/outa.jpg); 
} 
body {background-color: $ mainBgColor; 

Kemudian klik untuk menyimpan, sekarang kita letakkan tautan di mana kita akan menggunakan tombol-tombol ini, masukkan tata letak halaman, klik tambahkan gadget, html / javascript dan tempelkan kode ini:

nama situs 
nama situs 
nama situs 
nama situs

Lakukan saja perubahan dengan meletakkan nama dan alamat situs yang Anda inginkan, Anda dapat menempatkan situs web sebanyak yang Anda inginkan, tidak ada batasan. Sekarang cukup simpan dan lihat blog Anda tautan ini sudah akan muncul dengan tombol yang Anda buat. 
Sepertinya semuanya sudah siap, tetapi tidak menjelaskan cara mengubah tombol-tombol ini, kode yang kami terbitkan hanyalah sebuah contoh, nilai-nilai yang ada dalam kode mengacu pada ukuran tombol yang kami gunakan, jadi ketika menggunakan gambar Anda lakukan penyesuaian yang diperlukan. 

indentasi teks: 5px; margin kiri dari 
lebar teks : 210px; lebar 
tinggi tombol : 30px; ketinggian tombol 
-tinggi tombol : 30px; tinggi baris (harus sama dengan tinggi tombol)

Pada lebar tombol kita masih harus memeriksa apakah teks tautan kita tidak akan terlalu besar untuk tombol karena jika teks menempati dua baris gambar tombol akan mengulang dan tentu saja efek visual dari ini buruk untuk tata letak, dalam hal ini Anda Anda harus mengurangi teks tautan atau mengulang tombol yang lebih luas.

Detail lainnya adalah mengapa kita menggunakan warna latar belakang jika kita sudah melakukan tombol dengan gambar, jawaban untuk ini sederhana: lebih baik aman daripada berarti maaf jika gambar tidak dimuat untuk alasan apa pun warna latar belakang akan tetap muncul kami sarankan menggunakan warna yang mirip dengan warna tombol. Kegunaannya adalah, misalnya, jika latar belakang blog Anda hitam dan menggunakan tombol putih dengan teks hitam, jika tombol itu tidak muncul karena suatu alasan teks tautan mungkin tidak terlihat karena warna latar belakang blog, menempatkan warna latar belakang pada tombol kami yakin bahwa setidaknya warna ini akan selalu muncul bersama tautannya