İnternet üzerinde görmüş olduğumuz birçok web sitesi ve kaynak üzerinde onlarca bağlantı görürüz ve bunları kullanırız. Bu bağlantıların gelişen web akımlarına ve özellikle de Web 2.0 tasarım özelliklerine göre şekillendirildiğini biliyoruz. Zira özelleştirilmiş bağlantılar sayesinde tıklayacağımız bağlantı sonucunda bir harici sayfaya mı gideceğimizi yoksa bir dosyayı mı indireceğimizi bilir hale geliyoruz. Bunu bizlere bildiren elbette bağlantımız başında kullandığımız küçük ikon ve resimler oluyor.

Şüphesiz uygulamanın yapılmasında en büyük pay Css’nin. Xhtml ile de bu özelleştirilen bağlantıları kullanarak site ziyaretçilerimize değişik bağlantı profilleri sunmuş oluyoruz. Bu makalemizde en basit yöntemiyle gönderilerimizde ve hazırlamış olduğumuz websitelerinde kullanılan bağlantılara nasıl resim ekleyeceğimizi anlatacağız.

Öncelikle Css ile basit bir bağlantı profili oluşturacağız ve bu bağlantının Xhtml yardımıyla sitemizde nasıl kullanıldığını izah edeceğiz. Şimdi dilerseniz ilk aşamada kullanacağımız Css sınıfını yazalım;

.indir, .indir a {
font:12px arial, verdana, helvetica, sans-serif;
color:#2e83ff;
background:#fff url(zip.gif) no-repeat;
padding-left:20px;
text-decoration:none;}

.indir:hover {
color:#333;
background:#fff url(zip2.gif) no-repeat;
padding-left:20px;
text-decoration:none;}

Şimdi yukarıda yapmış olduğumuz işlemi kısaca izah edelim. Öncelikle .indir isminde bir bağlantı sınıfı oluşturduk. Css nimetinden faydalanarak .indir ve .indir a parametreleri için ayrı ayrı kod yazmadan araya virgül koyarak iki sınıfında aynı işlevi görmesini sağladık. Yazmış olduğumuz bağlantı profilinde sırasıyla 12px boyutunda, Arial yazıtipine sahip bir yazı karakteri kullandık. Yazı rengimizi bir mavi tonu olan #2e83ff olarak belirledik. İşin en can alıcı kısımlarından birisi olan background parametresinde ise arkaplan rengimizi #fff yani beyaz değere atadık ve url parametresi ile zip.gif isimli resmimizin görünmesini sağladık. Resim atamasının sonunda ise kullandığımız resmin bir daha tekrarlanmaması içinse no-repeat değerini yazdık. Resmi kullanacağımız sınıfa atadıktan sonra padding-left parametresi ile bağlantıyı oluşturacak yazımızın resmimizden ne kadar uzaklıkta olacağını belirledik. Dilersek buraya farklı değerlerde atayabiliriz. Ancak kullanmış olduğumuz resmin büyüklüğü ile orantılı olarak uzaklığın 20px olmasını istedik. Son olarak bağlantımızın altçizgisinin de olmamasını text-decoration parametresiyle belirleyerek ilk aşamamızı sonlandırdık.

Bu adımdan sonra sıra bağlantımız üzerine fare ile gelince alınacak değerlerin girilmesine geliyor. Kullanmış olduğumuz .indir sınıfı üzerinde hover parametresinden yararlanarak oluşturduğumuz sınıfta ise bağlantı rengimizin ve arkaplan resmimizin farklı değerler verilerek değişmesini sağladık. Yapmış olduğumuz tüm işlem bundan ibaret.

Dikkat edilmesi gereken ana husus background parametresinin kullanımı ve resmimiz ile bağlantımız arasındaki uzaklık değerinin iyi hesaplanması. Bu alanda verilen değerleri kendimize göre değiştirerek farklı resim ve bağlantı görünümleri elde edebiliriz.

Şimdi sıra bu bağlantı sınıfının bir Xhtml kodu ile sitemizde kullanılmasına geliyor. Hemen yukarıda oluşturduğumuz sınıfı bir Xhtml kodu ile sitemizde görünür hale getirelim.

<a href=”dosya.rar” class=”indir”> Dosya İndir </a>

Xhtml kodunda gördüğünüz üzere A etiketiyle açılan kodumuzda Class parametresi ile yazmış olduğumuz .indir sınıfına atıfta bulunduk. Bu bağlantımız bizim yazmış olduğumuz .indir Css sınıfını kullanarak görünecek. Yani bu sayede sitemizde yer alan tüm bağlantıların etkilenmesini engellemiş olduk. Kendi tanımladığımız özel bağlantılara class=”indir” değeri vererek arkaplan resmi atadığımız bağlantı profilinin görünmesini sağlayacağız.

Bu yöntemi Wordpress tabanlı sitelerimizde de rahatlıkla yukarıda bahsedilen şekilde kullanabiliriz. Ancak burada dikkat etmemiz gereken husus gönderimizi yazdıktan sonra Yazı Editöründe Görsel bölüm yanında bulunan Kod bölümüne gelerek bağlantıların içine class=”sınıfismi” parametresini eklemek olacaktır.

Hazırlamış olduğum örnek sayfada bu yolla oluşturulmuş bağlantıları görebilir ve dilerseniz sayfa kaynak kodlarını örnek sayfasından alabilirsiniz. Umarım sizler için faydalı olmuştur. Bir başka makalede görüşmek üzere…

ÖRNEK SAYFAYA ULAŞMAK İÇİN TIKLAYINIZ…

Rastgele Yazılar