Dış (harici) linkleri css ile şekillendirmek

Bugün (karşımıza en sık Techcrunch‘da çıkan) sitenin dışına verilen linkleri CSS ile  nasıl şekillendireceğimizi göreceğiz. Bunu yaparken de CSS’de ki attribute özelliğinden yararlanacağız. Öncelikle dış(harici) linklerin yanına ekleyeceğimiz görseli buluyoruz. Ben bu örnekte aşağıda gördüğünüz görseli kullanacağım. Görseli sunucumuzda “images” klasörü altına atıyoruz.

Bu görseli  http: ile başlayan bütün linklerin yanına eklemek için aşağıdaki kodu css dosyamıza ekliyoruz.


a[href^="http:"] {
background: url(images/externalLink.gif) no-repeat right top;
padding-right: 15px;
}

Bundan sonra http ile başlayan ama kendi sitemize giden linklerin normal gözükmesi için aşağıdaki kodu ekliyoruz.

a[href^="http://www.siteadiniz.com"], a[href^="http://www.siteadiniz.com"] {
background-image: none;
padding-right: 0;
}

Artık dış (harici) linklerimiz yanında yukarıdaki görsel ile gözükecek.

Dış bağlantı:

Google

İç bağlantı:

Google Earth artık tarayıcıda

İlgili yazılar