JQuery ile Kullanıcı Dostu Linkler

Sitenizde bağlantı türlerine göre linklerinizi şekillendirebilirsiniz. Demo örneğine bakarak nasıl olduğunu görebilirsiniz.

Css dosyanızın en altına ekleyin

/* Genel link tanımlamamız */
a{
	color:#06F;
	text-decoration:underline;
}

/* Genel link :hover durumu tanımlamamız */
a:hover{
	color:#0CF;
	text-decoration:noner;
}

/* Genel Harici Link Sınıfı */
a.hariciLink {
	background:url(harici.gif) no-repeat right top;
	padding:0 13px 0 0;
}

/* PDF Link Sınıfı */
a.pdfLink {
	background:url(pdf.gif) no-repeat right top;
	padding:0 15px 0 0;
}

/* Word Link Sınıfı */
a.wordLink {
	background:url(word.gif) no-repeat right top;
	padding:0 15px 0 0;
}

/* Harici PDF Link Sınıfı */
a.pdfHariciLink {
	background:url(pdfexternal.gif) no-repeat right top;
	padding:0 25px 0 0;
}

header.tpl dosyanızda uygun bir yere ekleyin.

<script type="text/javascript" src="jquery-131min.js"></script>
<script type="text/javascript">

//DOM Kullanılmak İçin Hazır
$(function() {
	//İlgili Linkleri Seçip
	//Uygun Sınıfları Atadık.
	$('a[href^="http"]').addClass('hariciLink');
	$('a[href$=".pdf"]').addClass('pdfLink');
	$('a[href$=".doc"]').addClass('wordLink');
	$('a[href$=".pdf"][href^="http"]').addClass('pdfHariciLink');

});
</script>

Demo: http://www.oztecnic.com/wp-content/uploads/2009/03/userfriendlylinks_jquery.html