Membuat image sebagai link memang bisa dilakukan secara langsung menggunakan xHTML, namun demikian akan lebih praktis dan memudahkan blogger apabila "image link" tertentu dibuat dengan menggunakan bantuan kode css sehingga kode html yang digunakan menjadi lebih sederhana. Hal-hal seperti inilah yang membuat "arti pentingnya belajar css" untuk mendukung aktifitas ngeblog/blogging/posting.
. Berbagai tutorial menarik tersedia lengkap di "gubhugreyot". Membuka gubhugreyot mungkin saja akan membuat anda lebih tertarik untuk mengobrak-abrik template dan menjadikan blog anda tampil dengan gaya yang berbeda?!
Kode dasar membuat image sebagai link
<a href="URL" title="Link title here!"><img src="image.jpg" alt="text here" width="xx" height="xx" /></a>
Keterangan:
- URL : alamat dokumen baru yang akan dibuka melalui image link.
- Link title : Teks yang akan dimunculkan sebagai tip/tooltip.
- image.jpg : image yang digunakan sebagai link.
- alt : Teks singkat yang menerangkan tentang image.
- xx : ukuran width dan height. Nilai dihitung dalam satuan pixel (px).
Contoh Image Link :
<a href="http://gubhugcss-jquery.googlecode.com/svn/tooltip/jQttipnoclass.js" title="Klik untuk download javascript tooltip." target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMV5dE5Rx6kCMBbF4Hm6OlXkKxirp6YF0RgJYtdj0ZmuSV7IDL6QqxgCT4kqtgWbS-04rNVaObaI-qDZ7TkdgH6ba7qEbnaI-csMILu6Z-hrL2ObfJ3sAjXIAWhLzFzlJSH9RkfLpmnJA/" width="169" height="50" alt="download link" /> </a>
Contoh Image Link ditengah kalimat atau paragraf:
Berbagai tutorial blogger dapat dengan mudah anda dapatkan, namun mungkin anda perlu membuka tutorial blogger dan blogdetik yang ada di. Berbagai tutorial menarik tersedia lengkap di "gubhugreyot". Membuka gubhugreyot mungkin saja akan membuat anda lebih tertarik untuk mengobrak-abrik template dan menjadikan blog anda tampil dengan gaya yang berbeda?!
Kode yang digunakan untuk membuat image link seperti di atas sbb:
Berbagai tutorial blogger dapat dengan mudah anda dapatkan, namun mungkin anda perlu membuka tutorial blogger dan blogdetik yang ada di <a href="http://gubhugreyot.blogspot.com/" target="_blank" title="Dapatkan lebih dari 500 tutorial blogger dan blogdetik di sini!"><img alt="gubhugreyot" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivPNxSQFrpATewOUNQL9-N-ejnT2eMc4e5aPHHbt4omRT7Exbm5s_JMRPsABVEWazTJKLdpy4gjAVem5RIdbhJCc1C29SRepp00f1-1BuFug64utD81ifC0ICaSrNzBJcI4FdCAFg5cy0/" width="104" style="padding:0 6px;border:0;margin:0;" /></a>. Berbagai tutorial menarik tersedia lengkap di "gubhugreyot". Membuka gubhugreyot mungkin saja akan membuat anda lebih tertarik untuk mengobrak-abrik template dan menjadikan blog anda tampil dengan gaya yang berbeda?!
Keterangan:
Penambahan attribute style yang berisi css property padding, border dan margin digunakan sebagai css reset karena mungkin saja setting image default menggunakan border, padding dan margin dengan ukuran tertentu. Bisa saja css property yang harus ditambahkan dalam tag style tak hanya ke-3 property tersebut namun harus menambah yang lain seperti background:none, border-radius:none dan box-shadow:none. Semua tergantung setting default image yang ada di template.Membuat Image Link dengan Kode CSS
<style type="text/css">
a.download{
display:block;
margin:20px 0;
width:169px;
height:50px;
border:2px solid #eee;
border-radius:8px;
padding:8px;
box-shadow:0 0 6px #000;
background:#555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMV5dE5Rx6kCMBbF4Hm6OlXkKxirp6YF0RgJYtdj0ZmuSV7IDL6QqxgCT4kqtgWbS-04rNVaObaI-qDZ7TkdgH6ba7qEbnaI-csMILu6Z-hrL2ObfJ3sAjXIAWhLzFzlJSH9RkfLpmnJA/) center no-repeat;
transition:0.5s;
-o-transition:0.5s;
-ms-transition:0.5s;
-moz-transition:0.5s;
-webkit-transition:0.5s;
}
a.download:hover{
background-color:#900;
border-color:red;
box-shadow:-2px -2px 2px #444, 4px 4px 4px #000;
}
</style>
<a class="download" href="URL" target="_blank" title="Link title here!"></a>Di bawah telah disertakan demo image link yang dibuat hanya dengan kode html dan image link yang dibuat dengan bantuan kode css. Image link yang dibuat dengan kode css juga menggunakan css3 transition untuk membuat efek hover lebih menarik.
Please click the button to display. Continue with editing code and click to see the results!
Tidak ada komentar:
Posting Komentar