Cataloged AutobiographyBERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



LINK: HOVER DAN ROLLOVER
Januari 31, 2009
Posted by: Fauzie


Mempunyai rollover effect dan warna yang menarik ke atas text link pada post dan sidebar blog atau website pasti akan memberi identiti yang tersendiri kepada website kita.


Bagi rencana kali ini mari kita belajar menukar template bagaimana hendak mendapatkan warna yang berlainan apabila cursor diletakkan ke atas sesuatu link dan juga bagaimana menukar warna latarbelakang apabila cursor diletakkan pada tajuk post (post title).

Dalam rencana ini, contoh-contoh yang akan ditunjukkan telah di upload dengan menggunakan Google Pagecreator.

Link Style Secara Ringkas

Template-template Blogger menggunakan apa yang dipanggil "Cascading Style Sheets" (CSS) untuk menentukan bagaimana webpage kita akan kelihatan. Pada dasarnya, terdapat jenis atau asas stylesheet:-

a:link { }
a:visited { }
a:hover { }
a:active { }

a:link { } - style untuk link tersendiri
a:visited { } - style untuk link yang telah diklik atau dilawati
a:hover { } - style bagi memberi sesuatu effect apabila cursor diletakkan pada sesuatu link
a:active { } - style untuk element yang diaktifkan (activated element)

Contoh-contoh style dan rollover effect yang boleh dimasukkan atau diletakkan di dalam { } adalah seperti berikut:


color : #XXXXXX ;

Ini ialah contoh style untuk menukar warna teks di mana #xxxxxx kod color hexadecimal. Bagi mendapatkan contoh-contoh kod warna, anda bolehlah rujuk "Hexadecimal HTML Color Codes" yang terdapat di internet.


text-decoration : none ;
text-decoration : underline ;
text-decoration : overline ;
text-decoration : line-through ;
text-decoration : blink ;

Apabila perkataan "none" digunakan, semua garisan bawah pada link akan hilang (nota: biasanya semua perkataan atau ayat yang ada "link" mempunyai garisan di bawahnya (underline). Dan apabila ditukar kepada "underline", semua perkataan atau ayat yang mempunyai link akan mempunyai garisan di bawah. Bagi perkataan "overline", semua link akan mempunyai garisan di bahagian atas.

font-weight : normal;
font-weight : bold;
font-weight : bolder;
font-weight : lighter;

Style di atas adalah untuk menukar ketebalan "font". "normal" untuk saiz biasa, "bold" dan "bolder" untuk menjadikan saiz font lebih tebal dan "lighter" untuk mendapatkan font yang tidak terlalu gelap.

font-style: normal;
font-style: italic;

Kod di atas adalah untuk menukar bentuk huruf dalam bentuk biasa atau italic (mereng).

font-family: Verdana, Arial;

Penggunaan font jenis Verdana, Arial di atas hanyalah sebagai contoh sahaja. Anda boleh memberi nama-nama font lain yang anda suka sebagai "typeface" untuk link anda.

font-size : 85%;
font-size : 10px;
font-size : xx-small;
font-size : x-small;
font-size : small;
font-size : medium;
font-size : large;
font-size : x-large;
font-size : xx-large;
font-size : smaller;
font-size : larger;

Di atas ialah kod style untuk mendapatkan saiz font yang dikehendaki. Untuk saiz dalam peratus (%) dan dalam pixel (px), anda boleh menentukan berapa besar yang anda perlu. Apa yang anda perlu buat ialah tukarkan saiz dalam peratus itu atau dalam pixel.

background-color : #XXXXXX;

Untuk kod warna bagi latarbelakang, sila rujuk "Hexadecimal HTML Color Codes and Names" melalui internet.

text-transform : uppercase;
text-transform : lowercase;

Kod di atas akan menukar huruf link kepada "uppercase" (huruf besar) atau "lowercase" (huruf kecil).

border-style : none;
border-style : hidden;
border-style : dotted;
border-style : dashed;
border-style : solid;
border-style : double;
border-style : groove;
border-style : ridge;
border-style : inset;
border-style : outset;

Jenis-jenis border yang anda boleh gunakan pada link.

border-color: #XXXXXX;

Untuk mewarnakan border di keliling link gunakan kod di atas. Untuk kod warna sila rujuk Hexadecimal HTML Color Codes.

Menukar "Link Style" dalam Template

Buka dashboard template anda dan klik Layout->Edit Html->scroll ke bawah dan anda akan dapat melihat 3 jenis stylesheet seperti di bawah ini:-

Nota: untuk lebih mudah mencari stylesheet tersebut, anda tekan butang ctrl dan butang F serentak. Satu kotak kecil akan muncul dan anda taip perkataan bagi barisan pertama stylesheet ini iaitu a:link {, dan anda akan dibawah terus ke stylesheet yang hendak dicari itu.

a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color :$titlecolor;
text-decoration :underline;
}

Dengan menukar kod-kod di atas boleh menjadikan blog atau webpage anda lebih menarik.

Disini saya sediakan beberapa contoh kod stylesheet serta effect dari penukaran yang dilakukan.

Contoh 1:
:link {
color:#0066CC;
}
a:visited {
color:#CC0000;
}
a:hover {
color:#2D8930;font-size=120%
}

Bagi contoh di atas link akan bertukar kepada warna merah bila diklik dan warna hijau apabila cursor diletak ke link saiz font membesar.

Klik di sini untuk melihat contoh di atas.

Contoh 2
a:link {
color:#0066CC;
}
a:visited {
color:#cc0000;
}
a:hover {
color:#2D8930;background:#ffff66;
}

Di atas adalah contoh kod untuk link mempunyai warna latar belakang apabila cursor diletakkan di atas link.

Klik di sini untuk lihat contoh di atas.

Contoh 3
a:link {
color:#0066CC;
}
a:visited {
color:#cc0000;
}
a:hover {
color:#2D8930;
font-family: monospace;
}

Kod ini akan menukar font atau typeface apabila cursor diletakkan ke atas link.

Klik di sini untuk lihat contoh di atas

Contoh 4
a:link {
color:#0066CC;
text-decoration: none;
}
a:visited {
color:#cc0000;
text-decoration: underline;
}
a:hover {
color:#2D8930;
text-decoration: blink;
}

Dalam contoh ini anda akan dapati link akan "blink" apabila cursor di atas link dan link akan mempunyai garisan bawah setelah dilawati (click).

Klik di sini untuk lihat contoh di atas

Contoh 5
a:link {
color:#0066CC;
}
a:visited {
color:#cc0000;
}
a:hover {
color:#2D8930;
border-style: inset;
border-color: #D462FF;
}

Link akan mempunyai border berwarna unggu apabila cursor berada di atas link.

Klik di sini untuk lihat contoh di atas

Contoh 6
Contoh ini adalah kombinasi "rollover effects" yang telah ditunjukkan di atas. Untuk mendapatkan "effect" tersebut, anda boleh memasukkan kesemua style di bahagian a:hover seperti berikut:

a:link {
color:#0066CC;
}
a:visited {
color:#cc0000;
}
a:hover {
color:#2D8930;
font-family: monospace;
font-weight: bold;
font-size: 120%;
background: #ffff66;
text-decoration: blink;
}


Klik di sini untuk lihat contoh di atas

Nota: Harus diingat, tidak semua "effect" di atas dapat dilihat dalam semua browser terutama Internet Explorer (IE). Untuk melihatnya dengan jelas, sila gunakan Firefox