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 dibawah ini setelah code <head>
<script type=''text/javascript'' src=''http://code.jquery.com/jquery-1.4.2.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdpmOaD_RzmeMnZB6wWI33rpXC5S16T1BnUZzAR7ig7WiKDOEAtVZXyMlEAujbHTbcTxkN05pXDgJ7SxnOUeirsLVhEdFiS8LpN6_lS_FPadgZvPw2FXfFwBgjwPPwCmYQ0hT8bdR30AE/s144/icon-pdf.png)
left top no-repeat;
}
.zip {
padding-left: 20px;
background:
transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy00O7fKD46w1G9hpJeW_RNspuoHalW7vmjVXJVFHeYT0RQ0TyCcO_KbBmGFJY7655F69P37EPYJLpdjsjtQ6BgaM84zJl_IpukXlJffho5h4exCnAHmAoSUa_yoOOZJjmvE7iJQGWfBA/s144/icon-zip.png)
left top no-repeat;
}
.doc {
padding-left: 20px;
background:
transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpn_Ov2cUnrSEECBcSsB0UCYtthk9sw0SDGgGTA810XlmvyfomXw5VbPdKz8xIMBgQ0x359ksS0D7OSMQ4m4xaNYhTG4oGRkbAjKnIa3z9HZQkRxIrVRl_6iPpqOdXnNFAFnV0HhoOhME/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 tidak...
Kalo memang belum muncul pastikan kembali apa ada yang salah...
