Menggabungkan/Combining Image & Text Links

Menggunakan image link dan text link secara bersamaan memang jarang digunakan karena sebenarnya sebuah link bisa dibuat dalam bentuk image link atau text link, namun demikian mungkin saja pada kasus tertentu image link dan text link dirasakan perlu digunakan seara bersamaan dengan tujuan tertentu. Menggabungkan keduanya perlu menambahkan tag lain selain tag "a" agar image dan text links ditampilkan dengan cukup menarik. Anda bisa memanfaatkan tag "p", tag "div", tag "h1 s/d h6", tag "span" atau tag yang lain.

Kode dasar gabungan text link & image link

<a href="URL" title="Link title here!">
<img src="image.jpg" width="xx" height="xx" style="xx" />
Text Link here
</a>
Keterangan :
  • URL : alamat yang akan dibuka melalui image dan text link.
  • Link title : title link
  • image.jpg : URL image untuk image link.
  • xx : nilai untuk width dan height serta beberapa property css yang diperlukan untuk membuat image link
  • Text Link here : Text Link diletakkan di bawah Image Link

Contoh Gabungan Image & Text Link:

Tutorial Blogger & Blogdetik

Dapatkan berbagai tutorial blogger dan blogdetik di sini. Tersedia lebih dari 500 tutorial tentang kode css, javascript, widget, modifikasi blog dll.
Kode yang digunakan untuk image & text link di atas adalah sbb:
<a href="http://gubhugreyot.blogspot.com" style="text-align:center;display:block;width:300px;background:lightblue url(https://lh6.googleusercontent.com/-1wV0kpqbkNM/UCoIU9QQn0I/AAAAAAAAAHc/-K--GFGnnJU/s128/gray48.jpg);border:4px solid #09c;border-radius:8px;padding:10px;text-decoration:none;" target="_blank" title="Klik disini dan segera dapatkan tutorialnya!"><img height="70" width="270" src="http://4.bp.blogspot.com/-vurt8AmU2Uk/UDrZVO3vCrI/AAAAAAAAATc/ndwYRjIQ6P0/s320/gubhugreyot.png" style="border:3px solid #555;padding:3px;border-radius:10px;opacity:0.8;" /><h3 style="border-bottom:3px double #666;margin:5px">Tutorial Blogger &amp; Blogdetik</h3><span style="display:inline-block;color:#900;font:14px Arial;text-align:justify;">Dapatkan berbagai tutorial blogger dan blogdetik di sini. Tersedia lebih dari 500 tutorial tentang kode css, javascript, widget, modifikasi blog dll.</span></a>
Di bawah ini adalah demo sebuah link yang memadukan image link dan text link yang dibuat hanya menggunakan kode html. Sebenarnya akan lebih praktis dan simple apabila pembuatannya menggunakan bantuan kode css yang disimpan sebagai kode yang bersifat permanen (bisa disimpan di antara tag pembuka dan penutup head atau body). Anda bisa melihat contoh bagaimana membuat gabungan image link dan text link dengan kode css pada box di bawah.
Please click the button to display. Continue with editing code and click to see the results!

1 komentar:

  1. Ajib, Gan.. Saya sangat berterimakasih atas informasi script-nya. Luar biasa, sangat membantu. Dan sekarang sudah dipasang di blog flip-book saya: Sruput Dulu Gan Sekali lagi terimakasih banyak, Gan.. hiks..♪

    BalasHapus

My ProfileC l o s e

FollowerC l o s e