Trik dan Tips CSS-HTML Untuk Link Blog

Pengetahuan dan ketrampilan, apa pun namanya, lebih mudah dan lebih cepat dimengerti kalau disertai banyak contoh. Demikian pula dengan pemahaman CSS (dan HTML). Sambil mencoba trik CSS dan HTML, selain kita jadi pintar juga blog kita jadi (sedikit) nyentrik. Contoh, coba tunjuk CSS dengan mouse. Ada keterangannya! Lumayan menghemat, penjelasan tidak terlalu penting atau hanya mendukung saja, tidak perlu ditulis lagi di blog.

Kata ‘title’ adalah kunci, <abbr title="keterangan">teks</abbr>. Berikut trik dan tips sederhana untuk link yang dapat diterapkan di blog.

Link sering dipakai di blog, biasanya bergaris bawah. Ada banyak cara membuat link tampil unik, yang biasa seperti ini, Link 1, yang sedikit unik  Link 2  atau  Link 3. Kode CSS-HTML masing-masing,

<a href="#">Link 1</a>
<a href="#" style="text-decoration:none;background-color:#ffd700;">Link 2</a>
<a href="#" style="text-decoration:none;color:#ff0000;">Link 3</a>

Kurang unik. Oke, bagaimana kalau begini Link 4 Unik, atau lebih suka ini Link 5 Unik?

<a href="#" class="linkanimasi">Link 4 Unik</a>
<a href="#" class="linkdrop">Link 5 Unik</a>

Sayang definisi CSS ‘linkanimasi’ dan ‘linkdrop’ tidak bisa di HTML, harus di berkas CSS:

.linkanimasi:hover {
	background:url('dot-2px.gif') repeat-x center bottom;
	text-decoration:none;
	padding-bottom:1px;
	color:#900;
}
.linkdrop:hover {
	position:relative;
	top:2px;
}

Kombinasikan metoda di atas, beri kotak warna bergradasi, atur setting, ini jadinya:  Unduh

<a href="#" class="linkboks">Unduh</a>

Kode HTMLnya sederhana, kode CSSnya? Tidak usah dululah ya.
 
😀
 

Tagged with: , , , , ,
Ditulis dalam Blog HTML dan CSS, Blog Tips dan Trik, Blogging
2 comments on “Trik dan Tips CSS-HTML Untuk Link Blog
  1. ary widodo mengatakan:

    Pertamax gan.

Silakan komentar, 'like' juga oke

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: