L I N K EFFECT

Innalillahi Wa innaillaihi roji'un... Sebelumnya BeBeN si bloglang mengucapkan turut berbela sungkawa atas meninggalnya salah satu sobat blogger kita yang bernama Sandhi Pratama Yudha Jaiman pemilik blog Coretan Jaiman. Blogger asal kota Jember dikarenakan sakit jantung yang dideritanya. Semoga amal dan ibadahnya diterima di sisi-Nya...AMIN. Menjawab pertanyaan dari sobat Silverline Studio Blog mengenai link :

cara bikin link membesar ketika disorot n bergambar gitu gimna gan??? n code teks membesar waktu disorot pa???

Hihihi...simpel sebenarnya, ini hanya permainan dari kode CSS di dalam template kita. Semua kode CSS yang di dalam template, pasti semuanya berada diantara :

<b:skin><![CDATA[/*

<-- All Code CSS here -->

]]></b:skin>

Kita lanjut pada pokok permasalahan saudara Silverline mengenai text anchor link [..] Masih ingat kode CSS kita tadi ada dimana? Cari kode "a" ^{tanpa tanda kutip} Nah itulah bahasa web ketika kita akan menuliskan sebuah link.
<a href="http://ben-tools.blogspot.com" title="Ben-Tools" target="_blank" /> Bagaimana dan apa saja variasi yang bisa kita terapkan di dalam membuat sebuah link ini. Mungkin sobat perhatikan di blog BeBeN ini ada beberapa link yang jika disorot huruf akan membesar dan efek lainnya. Perhatikan kembali di kode CSS template yang kodenya a dan a:hover. Kode tersebut pasti berbeda keberadaannya di dalam template sobat. Tapi dimanapun keberadaannya, mau di footer, header, body, dan lain-lain kode tersebut kalau diberikan efek akan sama hasilnya.

Kalau mau melihat apa yang bisa dilakukan terhadap link dan atributnya silahkan kunjungi HTML a Tag. Cari kembali kode a:hover pada template sobat. Kalau bisa yang berdiri sendiri terpisah dari tag apapun. Karena kalau sudah ke tag, biasanya efeknya ya hanya sekitar yang ke tag saja (moga-moga paham). Kode efek link yang ada pada blog BeBeN.

a:hover {
color:#ffffff;
font-weight:bolder;
font-size:larger;
background-image:url(http://LINK-IMAGE.com/1234.jpg);
cursor:url(http://LINK-IMAGE.com/1234.jpg),default
}

Keterangan :

• color:#ffffff;
Warna ketika link disorot.
• font-weight:bolder;
Menjadi tebal ketika disorot dan bisa juga normal atau none diganti saja.
• font-size:larger;
Disini BeBeN memakai kode larger, bisa diganti dengan XXpx atau XX% terserah mau memakai kodenya yang mana.
• background-image
Ini kemunculan gambar ketika disorot linknya. Biasanya gambar berupa blink-blink atau yang menarik. Kalau mau gambar blink² ini link gambarnya dan dihosting sendiri yaaa, soalnya BeBeN suka ngedelete gambar gak ujug-ujug gito (http://i27.tinypic.com/2626vyh.jpg).
• cursor
Ini efek mouse ketika menyorot sebuah link. Kalau di blog ini garis tengah ngaceung...xixixixi.

Bagi sobat Silverline Studio Blog semoga faham yah ^_^. Jadi intinya yang berbau-bau a:hover itu adalah efek waktu cursor kita menyorot sebuah link.
Bonus...
<style>HTML,BODY{cursor:url(http://LINK-GAMBAR/1234.jpg), auto;}</style>Letakkan kode tersebut sebelum/diatas tag </body>. Ganti link-gambar dengan gambar yang beresolusi sebesar cursor, dan lihat apa yang terjadi!!!

HAPPY BLOGGING WITH BLOGLANG STYLE.