21 April 2013
Menambahkan ikon di samping hyperlink membantu pembaca Anda untuk mendeteksi format file easily.You dapat menambahkan ikon ini sangat sederhana dan mudah dengan menggunakan css.If link Anda yang menunjuk ke file mp3 maka akan menambah simbol musik di samping link dan sebagainya on.This menakjubkan trik ini bloggerized oleh Mohammad Sir Of MBT, Jadi aku memberikan semua kredit untuk MBT Blog.
How To Add These Icons To Your Hyperlinks?
- Login dengan akun Blogger anda
- Go to Template> Edit HTML
- Cari kode dibawah ini dengan tekan CTRL+F
]]></b:skin>- Copy kode di bawah ini tepat di atas kode ]]></b:skin>
a[href*='.js'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiszVh3Ub6QpN_gbch9cJ35vPeeMgvjTIAAMBBce5IR_uzIZQsrNVJOlOf_VS0BY9vx6vMSqIF9DnS5vKFEBQdvR-b42fAAen_MbJ3svd6UUgtdU24XT0GPc1nHiGVkc1jw-mc2eaUMTz0/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/AVvXsEgn9BtpSlZPWdikwx0P40se4p9FSXLHHmgSTvGM55Huj1Bg-qYZVyN6pxpF8hYdqtx-5BVWx6OMxd5gng7gIEeaorS4lSRbFOM3befxiLtd4sqs1tl3zgBhShbRWop_F5Gv61geDwzDByg/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/AVvXsEh1ZozxhkOBQHP5DsdkpHoV940Q_n6uYDGqULUY8f1vsVD3DA7CsCzOHejxOSHMqPANHpOiOammXaADBGX5PTLqoVgcoHtumm8bCoQDqrLZ0EZ06F8rQzq9Abaz-KKaKig8NZHwWACTj5E/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/AVvXsEh07Q0tEs55kNkHgPlwlu0NhQza_OOzHoXWSMntZEGlgPa6z9Z5FH8xNSAXt7isE-7WW-5n7jmyK4jPs2gmjVAdw3ob0wOClvqllVqFPGltAEinSbtNJRrBXGu1m6rS5XRm_UpBbBum39g/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/AVvXsEiv2QT84_tgGXY4KiaKdvJM1QMin6cKjIg0MjswT411dcC7HRQz8ZOuh1ANzUh4n5Yp3WtVDtxEIJRQSF9fIoTPoy-K7XRlhd7XxzU-o8HSnYF_vsaAPxcMtUnksbrMLgqVy2QU3LAa9kU/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/AVvXsEhWUzvcVXjBWW9vSJRsh93tx9Qlud4084qwqcmlFZ0noM5-z-5C7bU8dW_UpuKiXB0Im4ksuGqw_yVZowOtIWOJ_Tvf9Ho4OmC6yoG414897fuXjPKCQRFhY4J7gq3akfYet5V2BCBIArw/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/AVvXsEi1ffs1Uzyi1x8N9-Xw2liRLM9XgQwvANNQzOcrIx-_0AtDfCXS4EyoeMXEoDWkHAwkV2Zve25nELM45eumQ7UvI-zeHKd8w5XCg-rlPMpu7Xmf_uoFcDJvCQ2CVXG2ra3A5a9Nhl4Y-gg/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/AVvXsEjaOygd6yMED0TiKyVBRu5Ov5VqzniHKBb-VRYHy1Y33L7YEPio2XjYMQsmGMrGV-iAyLEbJIGKlKEwY2adlgmO7tlBMNdEQrfeYP1SvSsQUN7GTXeJ5KUuR1WqPHvyIEirrcrjH4Om40c/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/AVvXsEiADgErrEA77B00KJ4XeIcEr9iZcV4f-2zX6xgbrpEmIptbFv7d1ghuBrdl-eGWS6CZ65QQPPxq7E1CyH75M7TsCAA9TmAoAO5vaqufT2x1LdaGPPaYOTC7XoRZ0xAa9xoOq5Ryi1HOO-A/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/AVvXsEjwnWG1J9LhB7lGfrjhfSDHIJULeXJwC3yC5DSNGSBjuC3zBN1o_7C-ZWkix7sC48PfsF-tDxNtjbtH9P2g93e7DsimdKKqp93mmtw8Vk0ZVqQKK8m-x6pyv1SlZXBBUwVxJAZMr8wJn2Y/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/AVvXsEhqiLK_wsYY1OxaubXyjSaaxtHfUtmUDg3e-wt0FuAyJvLxPDLFvv-C2HoyOE6afh1M4dVRqygT5eLKcBrPEUrAV-aFhRLBAXuttx7WYSHFfKwMSddd_zDjy84cJwILpyOV9r7l7Hanm_c/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/AVvXsEgPl7qbABwQsS0nlp4dh7G6LeIwTOIjUga1qdXUsXZ0VRTZm2JI2zmcjThy2L4xCbdQwwh_nCre9Mej07IweQHNxTzf6SLxQ4qBxuQPD6PJiB5QCSXedQGy956fPSxeDwqEivySBJZKRds/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/AVvXsEgHa6Pb6wWmA7uKJhn1YkEpdnKk_Rsi_S6hh4S3MDRxsOefCPMGJeMQkwmsPSSoyfvxHnvK8rP8ckYTYqkO_HgaeFyAlyXGzmKUDRvfLEnHo-7ojGXtXRGpnDWFCxz0wFTHyHZMnhDVdo8/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/AVvXsEhpuvnlP0I8aI1pGgGWSy_iYqrW9ToveojlnbAot4GR3rwaJFjc5njkeRcK7O_ymTAJlo_Bg89JBxUVogSq-LYmU0Jt1zBPLh2ltSQK8nAhjGoK4suMM2N14l6LWGo-YnRLQ9NsqJQrfRE/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/AVvXsEi535gCkJEAnr4a5Uy3IkTjTNERW2QO1uiVt7pDXuAkvo9F-tvE8kLxmncGJ482SXWNEFjkaHy3eqq1lqpvnGaFHzwpmlX1MovG7X8YqQ8zi8OGQbedtQlxG6sBGKVrfkEJd8l0-UWD9MU/s400/e_mail.png) no-repeat 0px 0px;
padding:0 0 0 25px;
}
Anda juga dapat menggunakan ikon pilihan Anda dengan hanya mengubah link gambar ikon dalam kode di atas. Kode ini sangat mudah untuk mengedit dan saya berharap setelah membaca begitu banyak tutorial kami Anda setidaknya bisa mengedit kode ini. Bersenang-senang dan biarkan aku tahu jika Anda menghadapi masalah apapun. Nikmati! :)
Semoga Bermanfaat!
Thanks To Rahul Ippar
Langganan:
Posting Komentar (Atom)
0 komentar
Silakan isi Komentar sobat
dan gunakan kata-kata yang sopan.
Jangan nyepam ya n_n