Sabtu, 03 April 2010

EXTERNAL LINK WITH IMAGE - JQUERY

External links with image. External links atau links yang menuju keluar dan biasanya diberi variasi (target) "_blank", "new", "top", "_self", "_parent"... Penulisan ext links ini bisa diberi gaya :D dengan memberikan gambar panah kecil biasanya, disamping kanan :p Contoh :
DEMO
Tuh kan ada gambar panah kecilnya ;)) Sebenarnya master choen sudah membahas trik ini untuk ditanamkan di blogger "External links" dengan menggunakan icon - jQuery. Disini Mstr Choen menggunakan attribut
<div class="extlinks">

isi postingan....

</div>

Nah itu untuk memanggil trik ini versi Mstr Choen :D Sebenarnya ada yang lebih sederhana versi sobat Ishan. Hanya dengan menuliskan HTML sederhana link dengan variasi yang BeBeN si bloglang ganteng kalem tea sebutkan diatas :)) sudah bisa membuat si panah kecil itu tampak :))

Untuk bisa memakai trik ini, di dalam template sobat harus sudah ada script jQuerynya. Kita gunakan saja yang sudah ada di si embah ;))

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Silahkan mau pake yang mana, satu saja jangan kedua-duanya! maruk itu namanya :D Kalau sudah ada scriptnya, tinggal gambar panah kecilnya :)

"http://lh3.ggpht.com/_dfnTVAxeWMI/Sjrhr0wNDaI/AAAAAAAABDw/dIhY1QDCNK4/linkex.gif"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPsLb3yybYPlu5nrhKgijrM3uftoeZeHYSFxdVNpTBXwavrOa5R8-_ImTlDnk_XkiqB6QbfJtul5muRKuZhUqOQDq5gKyuTo6AmWqNq9HXzUKUJhjiPRzR_Y7kS0zvIIq64DCchMvktYiY/s320/external.png"
Kalau mau berkreasi sendiri lebih mantap :-bd Yang penting resolusinya sama ;) Masukan kode CSS dibawah berikut diatas/sebelum tag ]]></b:skin>
a.external {
padding-right: 13px;
background: transparent url("LINK-GAMBAR-PANAHNYA") no-repeat scroll right center;
}

Masukan script berikut, bersama/dibawah script yang disuruh pilih salah satu tadi.
<script type="text/javascript">
$(document).ready(function() {
$('a[target="_blank"]').addClass("external");
});
</script>
Save deh :) Setiap kawan menuliskan syntax link, dan menggunakan variasi "_blank" akan tampak deh panah asmaranya :"> Pusing mostingnya nih ~x( Good luck deh :-h
Original post : Ishan versi

Tidak ada komentar:

Posting Komentar