Css ile Linklere Simge Eklemek #2

Daha önce css ile linklere simge eklemek konusunda bir makale yazmıştım. Bugün ise bununla tek tek uğraşmadan ve daha geniş bir şekilde yapmamızı sağlayacak bir yazı gördüm. Kısacası bizim her şeyi tek tek yazmamıza gerek kalmıyor çünkü zaten geniş bir şekilde yazılmışı var. Bu adreste farklı formatlarda metin dosyaları, grafik dosyaları, ses dosyaları, video dosyaları hatta youtube gibi video ve flickr gibi grafik yükleme siteleri için bile link simgeleri mevcut.
Gerekli dosyayı buradan indirebilirsiniz. İndirdikten sonra yapmanız gerekenler ise gayet basit. Html siteler her sayfanın başına, herhangi bir içerik yönetim sistemi (iys) kullananlar ise genellikle header dosyalarının etiketleri arasına (wordpress kullanıcıları header.php içindeki etiketleri arasına)

HTML:
  1. <link rel="stylesheet" type="text/css" media="screen" href="iconize.css" />

kodunu eklemelidirler. Tabi burda önemli olan "iconize.css" dosyanızı nereye koyduğunuz. Koyduğunuz dizine göre koddaki adresi değiştirmeniz gerekir. Ayrıca simgeler de css dosyanız ile aynı klasör içinde bulunmalıdır.
Ufak grafik(thumbnail)lerle ilgili ufak bir sorun var ama bunun da pek tabi ki çözümü var. Örneğin;

HTML:
  1. <a href="http://www.site.com/grafik.png" title="Grafik"><img src="http://www.site.com/grafik_th.png" width="100" height="100" alt="Grafik" />

yaparsak küçük resmimizin yanında bir de grafiklerin yanında çıkan simgeden çıkacaktır. Ama "imageLink" sınıfını eklersek böyle bir sorun olmayacak ve simge görünmeyecektir. Şöyle ki;

HTML:
  1. <a class="imageLink" href="http://www.site.com/grafik.png" title="Grafik"><img src="http://www.site.com/grafik_th.png" width="100" height="100" alt="Grafik" />

Iconize sayfasına buradan ulaşabilirsiniz.

EkleBunu Sosyal Paylaşım Butonu
1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (4 oy, ortalama:4.25)
Loading ... Loading ...

Yorum Yapın