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ı:
İç bağlantı:
