Akhirnya come back untuk memberikan tutorial blog di NguentenPon™ . Kali ini saya akan memberikan tutorial yang sangat menarik untuk teman-teman blogger, apakah itu? Yaps sesuai judul diatas, saya akan memberikan tutorial cara membuat icon untuk link download (unduh). Saya juga akan menjelaskan pengertian dan fungsi dari icon ( ikon ) itu sendiri agar bisa menambaah referensi teman-teman blogger.
Banyak sekali beberapa blogger yang menyediakan konten lagu,video dan lain-lain untuk di download ( unduh ) secara gratis, namun kita sering kali menemui link download ( Unduh ) hanya berupa teks, terkadang pengunjung tidak mengerti teks itu menuju link donwload ( Unduh ) meskipun ada tanda berupa warna atau yang lainnya, saya sendiri juga pernah pada saat ingin mendownload ( mengunduh ) sebuah file namun karena pada saat dulu masih awam dalam internet akhirnya saya tidak jadi mendownload ( mengunduh ) karena yang muncul hanya berupa teks yang dulu saya anggap itu hanya sebuah teks tanpa menuju link.
Dengan adanya icon untuk link download ( Unduh ), akan membuat pengunjung yang ingin mengunduh jadi mudah dan tidak kebingungan. Untuk lebih lengkapnya silahkan simak secara lengkap Pengertian, Fungsi dan Cara Membuat Icon ( Ikon ) Untuk Link Download ( Unduh ) Di Blog dibawah ini.
Subtopik :
1. Pengertian Icon ( Ikon )
2. Fungsi Icon ( Ikon )
3. Cara Membuat Icon Untuk Link Download Di Blog
--
1. Pengertian Icon ( Ikon )
Pengertian icon adalah tampilan yang menjadi simbol atau wujud dari suatu objek yang terdapat dalam sistem operasi atau aplikasi.
Ikon, juga disebut simbol, ialah antarmuka grafik di sebuah data yang digambarkan oleh gambar kecil yang menggambarkan program komputer ataupun berkas komputer dalam pengelola berkas sebuah sistem operasi. Dibuat melalui manipulasi langsung atas simbol, sering ditunjuk melalui tetikus, sehingga pengguna dapat menjalankan fungsinya dengan menggerakkan tetikus tersebut, melihat informasi atau menghapus berkas itu.
2. Fungsi Icon ( Ikon )
Ikon juga digunakan di perangkat lunak. Ikon sering ditempatkan di sebuah bilah alat (toolbar) yang bisa dijalankan fungsinya oleh pengguna dalam program itu dengan mengeklik ikon itu.
3. Cara Membuat Icon Untuk Link Download Di Blog
Icon pada link download bisa memberikan informasi tambahan tentang rincian file yang akan diunduh. Misalkan icon dengan logo PDF mempunyai arti bahwa file tersebut memiliki format pdf. Berikut ini langkah-langkahnya :
Sebelumnya copy dulu script berikut
/*---------Hyperlink Icons ----------*/
a[href*='.js'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnOXgz2Lxbab_0W-kUAyJiT83fvIAb3iTD-5NMmTOZl1OxEmJch2Nj9ybETMDoM8JUMa556xGeysWOCwo-CSohINHyQrbeOMKfv7NwjC2G73KrLoZYKHFqVkNqcMyjdXIJ9z8qOSq_1w/s400/file_js.png) no-repeat 0 0;
padding:7px 0 0 25px;
}
a[href*='.gif'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQblgcUbBsQKt4JGLMHeLaLbkqjx1Po3epsrveZ-xl6Uq6A5JEB7zY0F2nRRTOa8vGr3CeIk6mcvKUOdrKYHFRaVLCZCUEFgHmTEYM-mhNrOGMbNdHi1_Nb53liAzZsaVflA6hmnapcQ/s400/file_gif.png) no-repeat 0 0;
padding:7px 0 0 25px;
}
a[href*='.doc'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx1l3jjWhMbxPyoprdejVBTUxbkK3czRIGxJti-kxhVPR2wG-5Qpe7PTg7llELOd4e27EF4nQqGa-HLpdmgRu7q_z2R0oh36GLVGv8yhxpKB9k9DcVX5AZwbHt-bnHZZD7k8lx8hI66Q/s400/file_doc.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}
a[href*='.rar'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL3i8HaDqql_mnQrahmSxOAkRLtIviNaf44E1KwvkxcOeL0O7icMN07PFtROhjbVS53XGdNCJewJ-DGUzeGlTYUL8wC_BPhZYfHcLQ5I3X7zr_T8p3x-bA61UhB9RTe05ySgDHOuQhfg/s400/file_rar.png) no-repeat 0px 0px;padding:7px 0 0 25px;
}
a[href*='.zip'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXRKTCQnnkxnXPN0LiF84jxo3cXRpx9JPgevFtzbHssss37yoCNs6iX1v9L6zDUglNhzPf8TTwCm6cV94wlzYMWnTGT6SR_U-1gdBJhyphenhyphenzNYqHLjUWS6fdTDws8zFiDX42fR9uNL4BGHQ/s400/file_zip.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}
a[href*='.mp4'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGPFuDIQEr6WR4cBfpcbXS96VF_ycSQ0TR0pDsz2tJBTfPvwTEtlm_kwmRVkovz-CIBfN31f_8X0svqbCxGmRPt33lnedXwD29tgc4V-9VKGMk31efJulR1L_34Pn02H1VtiL2JA5aiQ/s400/file_mp4.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}
a[href*='.php'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe21weo8BT11ISAdOFfrcel7Fg1-sogSaH_N0iBSbGysCTR7HTTwRvqsTfizN797GCxO_wYTHqlTZyAIMJ2wCpKTmewW_7BMMaIily5U2qYOjwEZ9Xad1OaoXT46z83bVrBQhwurPFiA/s400/file_php.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}
a[href*='.xml'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-BDpfSbCzsDvf4L0mpJ5uC5nbk2jJBUMInlMg9PtsbIkTTSgo9X3XCgh7ZO0pYqhLvev-y0z4AOBfICwvElaglX22lc1IsLm0L5pBWwvjsFwze0VHtz8yqsHVu3VSdvuZTgVepuN_4Q/s400/file_xml.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}
a[href*='.pdf'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvC4w_Ah21MoXQi94GsJjM9TUKqgZ6UpyAkIq-9MXSRVZCnMU9Sb7Kke0TtAQW4bwcl6mC37UJ6nUWmxPuSr4r_tYZ-3O6KfPCGKWGLCAizeMfpnfSoMUzFlZJB50vVv-4SlY2RisTcw/s400/file_pdf.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}
a[href*='.xls'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjwxPMh2ZaVH2yjb32ftWDIvK9Gl1Jf6bLD89Yu1Q5h3ZFm5J6ucXHFKpWUQrzyIKiPPC1QFDW79Q-ArCKOKGhBWxjm5Posk-r_40Qj2GQd4OkZReRYmd8dyJZFQvjua9qf9tCv64HyQ/s400/file_xls.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}
a[href*='.mpg'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1UPlrswTuDJt2w8awD0nleIAF-A72-MQHThwEWkIrnGkwcSNbP6S7PHws1F2FvdGXXUlYR8VXrOojEFIKbYVGqIg4yHMrbrgEitCpoBbZaoOKwME7xd4D95U2MlMY5z07fjXPFCH_EQ/s400/file_mpg.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}
a[href*='.bmp'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPppcOlAR2BRyZxKFplhnaABDwLIXUd4hq2lVDYFTnfpOuEcxMVq4gxPcudNRPDv3Mv0ujOE4AZvL0baHXCosHuJLc5A-fjrkHXPU2krHV83ftcvnXt362x83hSe_MGUcYwpW6MvN59w/s400/file_bmp.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}
a[href*='.avi'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyDoeiSPQjTxQ_DyinsoYyFIRs6sbd-_Fo90G0mQ1SLGJ04reM5cNvjvrNY03JHG4008veWuSk7Oo-aKAAQ0nLWN76_yU1WnnGMGuDqY9iOifhUl_JvKioONH8sOsXruG8fYlPpPTZYw/s400/file_avi.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}
a[href*='.mp3'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjT8SFnVHj8AjjmCskdhnEhSMUqu6H38c7GCfUe07sUayIDUQzbaU45cdXpOVpkh33HTsbaRfZWhX_T2A7rNZA-PW6n7aVK9snVoEbrZYQlLtCf8gD281mHgfqCg_-0WX_eg7yYA42Jg/s400/audio_alt.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}
a[href*='mailto'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6PhLMjF4sJ_H80V2H6Yd6WlEBb64jnikIppK7s0pKB2zq_N1KFFN8jIK4qhQxm3uVTExQu-qW0BQq0IbzJLaC1TEi7PDiItNe2iVgwggtgg9WCxlhnPh0WBnNOMRr7S98l61vQX1dPQ/s400/e_mail.png) no-repeat 0px 0px;
padding:0 0 0 25px;
}
1). Login ke Dashboard blogger dan buka halaman Template >> Edit HTML
 |
| Edit HTML |
2). Salin semua kode perintah diatas dan letakkan diatas baris ]]></b:skin> pada halaman Edit HTML.
 |
| Cari ]]></b:skin> |
4). Berikutnya kode css akan menampilkan icon berdasarkan tipe file yang terdapat pada baris link. Misalkan, jika pada link terdapat pada baris link terdapat kata-kata: .pdf maka akan tampil icon pdf.
Contoh :
Masukkan di bagian HTML di postingan
<p>
<br><a href="http://www.tes.com/xyz.pdf">Download Ebook</a>
<br><a href="http://www.tes.com/xyz.js">Download File</a>
<br><a href="http://www.tes.com/xyz.gif">Download Gambar</a>
<br><a href="http://www.tes.com/xyz.doc">Download Dokumen</a>
<br><a href="http://www.tes.com/xyz.rar">Download File</a>
<br><a href="http://www.tes.com/xyz.zip">Download File</a>
<br><a href="http://www.tes.com/xyz.mp4">Download Video</a>
<br><a href="http://www.tes.com/xyz.php">Download File</a>
<br><a href="http://www.tes.com/xyz.xml">Download File</a>
<br><a href="http://www.tes.com/xyz.xls">Download Dokumen</a>
<br><a href="http://www.tes.com/xyz.mpg">Download Video</a>
<br><a href="http://www.tes.com/xyz.bmp">Download Gambar</a>
<br><a href="http://www.tes.com/xyz.avi">Download Video</a>
<br><a href="http://www.tes.com/xyz.mp3">Download Lagu</a>
<br><a href="mailto:irawan_cyber@yahoo.com">Kirim Email</a>
</p>
Seperti ini :
 |
| Contoh |
Hasil :
 |
| Hasil |
--
Akhirnya selesai artikel Pengertian, Fungsi dan Cara Membuat Icon ( Ikon ) Untuk Link Download ( Unduh ) Di Blog Semoga bisa bermanfaat untuk teman-teman semua. Apabila ada yang ditanyakan silahkan berkomentar di kotak komentar. Tunggu artikel tentang tutorial blog di Minggu depan, serta simak juga artikel lainnya di NguentenPon™.
Teman-teman juga bisa mengunjungi situs yang saya rekomendasikan khususnya untuk pecinta anime yaitu fuyukai.com
Sumber Literatur :
http://www.pengertianpengertian.com
Wikipedia
123 Trik Tersembunyi
Sumber Gambar :
http://icons.iconarchive.com
Kata Kunci : Pengertian, Fungsi dan Cara Membuat Icon ( Ikon ) Untuk Link Download ( Unduh ) Di Blog
Admin :
Nama : Rizki Indra Prasetyawan
Fb : Rizki Indra Prasetyawan
Mau Copas?
Silahkan copas namun harus diedit dan tidak boleh sama persis serta harus disertai sumber link.
https://nguentenpon.blogspot.co.id/2016/01/pengertian-fungsi-dan-cara-membuat-icon-ikon-untuk-link-download-unduh-di-blog.html
