"External links" dengan menggunakan icon - jQuery

Tutorial 'external link' ini di peroleh dari:
"Quick Tip: Dynamically add an icon for external links". Fungsi dari script external link ini adalah menampilkan icon pada setiap link yang menuju keluar atau 'external link'.

Ini contoh penerapan 'external link' yang saya gunakan di blogger:

- internal link
- external link

Cara penerapan fungsi 'external link' di blogger:

1. Masukan script jQuery berikut sebelum </body> (jika anda belum memiliki):

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

2. Masukan javascript berikut sesudah code jQuery tadi:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('.extlinks a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).after(' <img src="http://lh3.ggpht.com/_dfnTVAxeWMI/Sjrhr0wNDaI/AAAAAAAABDw/dIhY1QDCNK4/linkex.gif" alt="external link" />');
});
//]]>
</script>

3. Masukan code CSS berikut, bebas penempatannya selama masih dalam bagian CSS:

.extlinks img {
border:0;
padding:0;
margin:0;
}

4. Ada dua cara memanggil atau mengaktifkan 'external link', yaitu:

a. ketika anda ingin melakukan posting,

code html yang dimasukkan tersebut adalah:

<div class="extlinks">

isi postingan....

</div>

atau,

b. langsung anda memasukkan code yang berwarna merah berikut di dalam edit html.

<div id='main-wrapper'> <div class="extlinks">
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div> </div>

Posted in: jQuery,Penerapan jQuery