◄ Min  Size Fonts: + | - | ± Color: Max ►

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"

"http://4.bp.blogspot.com/_M0X9MzkzNXE/Srdo-XydVRI/AAAAAAAADpA/3n29SY7GrfI/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
Loading...
XEXTERNAL LINK WITH IMAGE - JQUERY

Subscribe my posts Register For Free!

11 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE