Membuat Banner Sederhana dengan CSS

Minggu, 14 Oktober 2012 | comments

Sudah baca artikel saya tentang CSS? Jika belum, silahkan baca dulu artikel saya yang berjudul "Ayo Kenalan Sama CSS".

Seperti yang saya bicarakan sebelumnya, selain untuk menentukan tata letak, CSS juga dapat digunakan untuk memperindah tampilan, selain itu juga dapat untuk membuat suatu gambar.

Artikel kali ini, saya akan mengajarkan cara membuat logo banner sederhana dengan menggunakan CSS. Contoh logo banner dapat sobat lihat di halaman Link/Banner Exchange, kira-kira seperti itulah tampilannya.

Kelebihannya, banner yang dibangun dengan CSS akan pertama tampil saat loading halaman. Dan cobalah disable load images pada browser, maka banner ini akan tetap tampil.

Bagaimana cara membuatnya? Sebenarnya caranya mudah sekali, sobat tinggal menuliskan judul blog atau deskripsi blog sobat, lalu tanamkan link blog sobat di dalamnya.

Misalkan, saya ingin membuat logo bertuliskan "Live it Now!", cukup tuliskan kata-kata itu, seperti ini:
"Live it Now!"

Lalu tanamkan link blog sobat, bisa dituliskan kodenya secara manual, atau cukup dengan mem-blok tulisan lalu klik pada fungsi link, lalu masukkan URL blog sobat.

Maka linknya jadi seperti ini: "Live it Now!"

Yang perlu sobat lakukan selanjutnya adalah menemukan kode dari link yang sobat buat lalu mengeditnya. Klik saja pada html, lalu cari link sobat. Untuk link di atas, kodenya seperti ini:
<a href="http://livitno.blogspot.com/" target="_blank">"Live it Now!"</a>

Tinggal tambahkan kode CSS untuk memperindah tampilan link tersebut, contohnya saya menambahkan kode CSS nya jadi seperti ini:
<a href="http://livitno.blogspot.com" target="_blank" style="margin:10px; border:5px outset silver; border-radius:5px; font-size:large; font-weight:bold;">"Live it Now!"</a>

Maka gambar yang dihasilkan adalah seperti ini:

"Live it Now!"

Keterangan:
Kode berwarna merah itulah yang disebut kode CSS
-margin: 10px; artinya jarak tepi atas, kanan, bawah dan kiri gambar adalah 10px.
-border: 5px outset silver; artinya ketebalan garis tepi adalah 5px dengan efek outset 3D berwarna warna silver.
-border-radius: 5px; untuk membuat efek sudut lengkung sebesar 5px, makin besar angka, makin besar kelengkungannya.
-font-size:large; untuk membuat ukuran huruf besar, jika kurang besar, gunakan x-large
-font-weight:bold; untuk memberi efek tebal (bold) pada huruf.

Mungkin cukup segitu dulu tutorial sederhana ini, cari saja dan tambahkan kode-kode CSS lain untuk semakin memperindah tampilan banner.
Share this article :

Posting Komentar

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Live It Now! - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger