Memberikan gaya pada link

Hmm.. Pasti kalian pernah melihat link yang seperti diatas bukan..??

Ya..!!! Di samping linknya terdapat icon-icon jenis file linknya. Seperti icon zip, doc, pdf, atau bahkan html. Dengan menampilkan icon file tersebut maka itu akan lebih menjelaskan jenis file yang akan di download. Dan tentunya itu menjadi lebih menarik dibandingkan dengan hanya tulisan saja.

Agar setiap link yang berekstensi .zip .pdf .doc dapat menampilkan icon sesuai filenya, maka berikut caranya.

1. pastekan code diabwah ini setelah code <head>
<script type="text/javascript" src="http://www.geocities.com/ebenk_789/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$("a[@href$=pdf]").addClass("pdf");

$("a[@href$=zip]").addClass("zip");

$("a[@href$=doc]").addClass("doc");

});
</script>


2. cari kode //]]>

3. Copy lalu pastekan code dibawah sebelum kode //]]>

.pdf {
padding-left: 20px;
background: transparent url(http://lh5.ggpht.com/_Z5M1MdUefOA/SXPhPrLXq6I/AAAAAAAAAdQ/GKN2OxEqJAE/s144/icon-pdf.png) left top no-repeat;
}

.zip {
padding-left: 20px;
background: transparent url(http://lh5.ggpht.com/_Z5M1MdUefOA/SXPhPvYLGHI/AAAAAAAAAdg/1UwaevNKnuY/s144/icon-zip.png) left top no-repeat;
}

.doc {
padding-left: 20px;
background: transparent url(http://lh5.ggpht.com/_Z5M1MdUefOA/SXPhPlqjgGI/AAAAAAAAAdY/2ZseTlsj1IE/s144/icon-doc.png) left top no-repeat;
}


4. Save template

Bagaimana coba kamu buat link untuk file zip atau pdf. apa iconnya muncul disamping link atau gak..

Kalo memang belum muncul pastikan kembali apa ada yang salah ^_^

3 comments

pencari tutorial mod

ohh ternyata gitu ya.

kirain harus add gambar di sampingnya. ternyata pake css ya?

makasih ya ebenk

Reply

tru klo icon kaya "DOWLOAD" itukan berbentuk gif, gimana tuh om...pak...eh mas :f

Reply

tapi kuk linknya ga berubah yah, apa karena postingnya udah lama? harus buat link baru gtu?

Reply

Post a Comment