Membuat Link CSS

by kwangkxz

Hallo rekan-rekan blogger …..


Menindaklanjuti artikel saya sebelumnya mengenai “Cara Membuat Link dan Button (Menu Navigasi)”, sekarang saya akan berikan informasi yg lebih baik yaitu dengan Link CSS.

Pertama-tama kita harus mendeklarasikan terlebih dahulu CSS-nya. Link yang akan dibuat nanti diberikan Class. Contohnya seperti ini :

<a href=”http://www.kwangkxz.co.cc” class=tombol1>Home</a>

Kode class=tombol1 merupakan script CSS yang mendefinisikan tampilan button pada Home, didalamnya terdapat warna misalnya merah, kemudian tulisannya 14 pt, dan berbagai pengaturan lainnya.

Setiap link bisa kita definisikan yg berbeda-beda.

Sebagai contoh, penulis mendefinisikan untuk link home sbb :

• Background warna biru
• Warna Teks putih, dan
• Padding sebesar 3px.

Oleh karena itu script CSS yang harus dibuat seperti ini :

a.tombol1 {
background: #333399;
padding: 3px;
color: #ffffff;
}

Untuk lebih jelasnya, silahkan ikuti langkah-langkah berikut :

1. Masuk ke Dashboard
2. Klik link Layout, sesudah itu pilih Edit HTML
3. Carilah script ini : ]]></b:skin>
4. Lalu ketikkanlah script berikut ini diatasnya.

a.tombol1 {

background: #333399;
padding: 3px;
color: #ffffff;
}

a.tombol2 {
background: #ff0000;
padding: 3px;
color: #ffffff;
}

a.tombol3 {
background: #339966;
padding: 3px;
color: #ffffff;
}

a.tombol4 {
background: #ff6600;
padding: 3px;
color: #ffffff;
}

a.tombol5 {
background: #cc99ff;
padding: 3px;
color: #ffffff;
}

5. Lalu klik SAVE TEMPLATE

6. Sesudah itu klik pada Page Elements

7. Sesudah halaman Page Elements ditampilkan, klik pada link Edit
yang terdapat pada HTML/JavaScript (tombol atau link yang
pernah dibuat sebelumnya). Klik tombol Add Gadget jika belum
ada.

8. Lalu akan tampil kotak dialog Configure HTML/JavaScript,
lakukan modifikasi pada link dengan menambahkan script
class=”tombol1” untuk link yang pertama (Home).
Sesuaikan dengan link yang anda buat.

<a href=”http://www.kwangkxz.co.cc>”class=”tombol1”>Home</a>

<a href=”http://www.blogger.com/profile/0123456789”class=”tombol2”>About</a>

<a href=”http://www.kwangkxz.co.cc/search/label/tutorial”class=”tombol3”>Tutorial&

lt;/a>

<a href=”http://www.kwangkxz.co.cc/search/label/testimonial”class=”tombol4”>Testimonial</a>

<a href=”http://www.kwangkxz.co.cc/search/label/contact”class=”tombol5”>Contact</a>

9. Jika sudah, klik Save

10. Akses Blogspot anda untuk melihat hasilnya.

Sampai disini dulu pembahasan mengenai “Membuat Link CSS” semoga bermanfaat bagi rekan-rekan blogger semua.

Artikel ini mungkin belum sempurna, dan bila ada yg mau ditanyakan, bisa mengisi kolom komentar atau via email, dan saya akan berusaha untuk membantu anda.

Terimakasih.