Saturday, March 24, 2012

Menambahkan Icon Hyperlink Pada Blog Secara Otomatis


Cara menambahkan icon sebelum link pada postingan blog secara otomatis | itulah yang akan saya bahas pada postingan kali ini, icon akan tampil sebelum link yang sobat simpan di postingan atau side bar blog  atau juga dimanapun itu di blog sobat sesuai ekstensi dari file atau link tersebut, misalkan jika link MP3 sobat masukan maka icon yang akan munculnyapun icon mp3 sobat bisa lihat pada gambar untuk lebih jelasnya.
Nah pada gambar di tersebut sobat bisa lihat (klik gbr. jika kurang jelas) link berektensi dan di ikuti icon sebelumnya. Untuk cara kerjannya nanti sobat akan  seperti ini lebih jelasnya.
Icon akan muncul ketika ektensi file berada di akhir link, saya kasih contoh file .pdf link seperti ini
<a href='http://theant-budiana.blogspot.com/theant.pdf'> Download E-book</a>
Kemudian link akan muncul seperti di bawah ini ketika sobat mempublikasikannya.
Gimana sobat tertarik untuk itu yuk kita lanjut ke cara menambahkan icon sebelum link pada blog.

  • Masuk ke akun blogger sobat
  • Rancangan => Edit HTML
  • Centang kotak kecil di samping Expand Template Widget
  • Cari kode ]]></b:skin> tekan ctrl+f atau f3 untuk mempercepat pencarian sobat.
  • setelah kode di temukan simpan kode di bawah ini sebelum atau di atas kode tersebut.

/*--------- BUS Hyperlink Icons ----------*/
a[href*='.js'] { 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkfAzvxG96_vGQPoTezEadL0vhp2BdL6LY4KvpEYSZIyn4JaMGVMfX2dIvZ7HjZV8BvnTsKedRG6ZCjecto5mljVHgYfzVKfPkyvocddgFD9hyphenhyphenvm0mNZg27-cpjSJ2hpOh2ZQFbOXl7fQ/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/AVvXsEhiFvs4YR35hjvl4_seQWqyvRi0U_C9kTv20vE4vz5lBzpJneTXTz_8Gfb0T58QMKRvNzdMWWs3txWA_NfnxdkBITypAzO81wiecJML02C8gRFUl3I9GvrKsdfe6XQYgaooFUAM2Qfajyk/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/AVvXsEikkERBr0aBlNjFU46VuPG3F7FC0YnkFipMohGgYRgdI-N9obcleE9nsXRU_OQ-gXsBVtlyZsofwNihvzNfOBLhMgwAinIr1ecLz6x_CH5wXromUgGFi_l5Ont-9Csso6lWyZdwlM3OQDA/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/AVvXsEgui9ZhnG7Q4ZzepNRYqFITuWoRhAkuiRu4PhtQIOKhRQjv6ozE3nNVa6kwdh-v2p22iT8g2s77J8JrFQpLUTDcZDP1VkyFdm6CJshTRua_yUHKgFP1udYXpxG_eTHk-8yx3KTRcQegvRI/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/AVvXsEjMy_UCruLJgW9AZGWbNqaRxv9-6NLrQPPWSxfLxb5YcvPjvp3ox2BhiG1v4VpAG0fnEnsafgR_Ir4jroPnWOdXrHFohYvpHtS2_l-kncTTkblHS7uf8h6cc5xfKzYHJFDks17uHBddoys/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/AVvXsEgrOeEmLDlEmAyULTgLfYUCGXHYDkqTQ58LUpvt-JPMGv4AUQnqsLnG5wHP3AJZxcCFhqPdBrc_000GJwyoUE1-POGCMCtQZp6iaIDpdirZuoKciUGeEZz25iSrKLExiTjzVy3ba5OBP8M/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/AVvXsEjuD0cTAVniXD2QmJnQpkPrkVebhrmtUP-uAFLOJahB5yD_IxZyizNyiGHdGXJMeE3cMKO2YPcnXJHowRhG2sHYrQIGwPfffvtp8Mh3rxgmyMmDnAmu8bU1xjTpoUb_u_4zRGoWyfMnEtM/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/AVvXsEjJI5Oixng6FmI6_wY4WQdg3LOKQOZUgZyLnLrwGqPiX5H-g8myXvaDE0PRN30pfGmMTogoVjWJVLAOh-6gamJjAJmQf6HddIiK6ADXy3Hfi4O6Uu5HrZbQrJhi2hT8DEpKaRsct2DqZPQ/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/AVvXsEimufZuCZWZ84AHYW5RX4bBwqdgtSXiYSs5p8Efw_6q0jr21JszSKvjfe02Qv0wIN4QYt6mKYPr_1Q-QclOEPJb31TpDPyKS3PtTqxNu92aMSU8xHsHoBfoZt3xLFVke5iKsoIuXZwZ3Vs/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/AVvXsEgm1hgcGmY3_spdaWWTXltJTCQJT1UqjBRjN53BD6Y6H_1QH_RMZqhQzlIiQsTWE7u7l-OUQczKiRYcfuO-S0EFBOFqe_3F8x-3vrag3RS3UyzffwznVVrhuVWNRh3qmheoH3MNSrUZvU0/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/AVvXsEgy76WR_swTAyd-VLjmrTBzcqHMUTu9OGWnuJoP6vvMZodOIepFEZsXE9ZrWL5gkUclcwzh9MGkk5mVjfXsc4IJ8sGYbI7oCZEM5DauAptlPEOPVWvNFaOn6qGtvNubf0rXrw1PfXeCxbo/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/AVvXsEgvS5ltgm6KeBpQ7bAUNyLH1ggVo05a1c6TnZRf-Zh0URljxZtu1hQaEmnLVVawt5UcEnLqHFufI353JXatfKwA5vbNyIAlNNpIHkK8ZMrBk1dOlgSeuIw6yMpYbeRS9k1fYn18gySenY8/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/AVvXsEjhaYj1vE2eERa1N5tuCOvvMnDdUyBOrcC8z4J20NFTkabPvB4AF934RdvLjHfLLUPWx43sz7lTGxgSb2pC5heZzrb8AXQVxisA979niNlkKITOzXWPSs40M-VYKO7OXzj8oEcRzAncGEI/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/AVvXsEglw_hZAQFncwdwoRfVC0p4Tp_PGibhUm2llFpGca_TdlcZqPHkEWL8oU1pt7jJLfdDrCAjlZ3LfIP12v2n5Mb2lVlucEaC_phSXDOs5-tL8pbZWkjIx0jDV8_FnLWdvuIhyfLbkOrPMXU/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/AVvXsEhwfwMuC1nLWmmwn3sQLO0yg1YV1LeOgi9RY74Eg306uc_NteP7an22eavGk3l_35O37Btwghyphenhyphenlt81WmdtbHpvmBuDlHIjYVKWfjySKEsluMszKkRC-boIwrDO2ZNolq4SR8b_bAY0b678/s400/e_mail.png) no-repeat 0px 0px; 
padding:0 0 0 25px; 
}
  •  Simpan template dan selesai.
Karna kode sangat sederhana sobat juga bisa mengganti gambar icon sesuai keinginan sobat dengan mengganti url icon pada kode di atas dengan url kode sobat.
Jika sobat tertarik dengan artikel saya sobat bisa lihat juga artikel saya yang lainnya

  1. Cara agar link terbuka di tab baru
  2. Cara pasang link di postingan blog
Semoga artikel saya bermanfaat jangan lupa tinggalkan jejak sobat disini agar saya dapat kunjungi blik blog sobat trimakasih.
Theant Budiana

About the Guest Author:
Saya bukanlah orang yang ahli dalam dunia blogger tapi saya mencoba untuk berbagi ilmu dari apa yang saya ketahui dari paman saya, saya sangat suka blogging dan berbagi ilmu, tapi bukan berarti saya master blog salah besar jika sobat anggap saya hebat saya hanya seorang anak kampung yang mencoba untuk tidak kampungan dan tertinggal informasi alias GAPTEK, banyak artikel yang saya tulis di Blog Urang Sunda dan lihat juga blog saya satu lagi di Dunia Maya Saya dan klik disini untuk mengetahui lebih lanjut tentang saya


Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Stumble Facebook Twitter
warning

Anda bingung?
Jangan ragu untuk bertanya kepada saya lewat komentar di bawah, saya akan mencoba menjawabnya sesegera mungkin, bahkan jika sobat ada saran untuk saya silahkan jangan ragu untuk memberi saran kepada saya asalkan komentar no spam. Komentar anda, adalah bekal untuk kemajuan blog saya, saya akan kunjungi balik blog sobat jika sobat meninggalkan jejak sobat disini.

0 comments:

Comments
0 Comments
Facebook Comments Post by Blog Urang Sunda

Post a Comment

Sponsor BUS

Dapatkan juga sponsor untuk Blog anda dengan klik gambar di bawah, untuk mengetahui caranya KLIK DISINI. Kalo mau yang lebih tinggi penghasilannya KLIK DISINI Adsense Indonesia

Buat Blog

Alexa Rank

 

Info My Blog

cobi?
Yahoo bot last visit powered by MyPagerank.NetMsn bot last visit powered by MyPagerank.Net
Google PageRank Checker Powered by  MyPagerank.Net
SEO Stats powered by MyPagerank.Net
web log free

Recent Comment

| BLOG URANG SUNDA © 2009. All Rights Reserved | Template Style by My Blogger Tricks .com | Design by Brian Gardner | Back To Top |