.sl, .sl a {
text-decoration:none; color:#F91364; background:#fff; padding:2px 2px 2px 2px; font-weight:normal;
}
.sl:hover {
text-decoration:none; color:#fff; background:#F91364; padding:2px 2px 2px 2px; font-weight:normal;
}

Yukarıdaki kodu temanızın stil dosyasına ekleyin. Daha sonra oluşturduğunuz Wordpress gönderisinde herhangi bir bağlantı ekledikten sonra Görsel alanından gönderinin kodlarını gördüğünüz HTML bölümüne gelin. Burada link içine class=”sl” kodunu ekledikten sonra yazınızı yayınlayın. Bağlantı karakterinin değiştiğini göreceksiniz. Kodları yazarak gösterirsek bağlantınız şu şekilde olmalı:

<a href="http://www.google.com" class="sl">Google</a>

Değerleri kendinize göre değiştirerek siz de farklı bağlantı görünümleri kullanabilirsiniz. (Sanıyorum bu konu bana iletişim formu aracılığıyla sorulmuştu, o yüzden yazma ihtiyacı hissettim, umarım faydalı olmuştur)

İ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…

Konunun özü şudur ki; son günlerde birçok e-posta almaya başladım. Bu e-postalar sitelerin karşılıklı link değişimleriyle ilgili. İlgili kişiler sitem ile link değişiminde bulunmak istediklerini belirtiyorlar. Hepsine ayrı ayrı teşekkür ediyorum. Bu durum t-infection.com’un kendini aşmadan belli bir noktada olduğunu gösterir. Tüm gelen e-postalara cevaben bu gönderiyi yazmayı uygun buldum. Lütfen ilgili arkadaşlarım bu yazıyı okusunlar.

İnternet’te gözüme çarpan, yararlı işler yaptığını düşündüğüm, sevdiğim sitelere bağlantı veriyorum. Bununla birlikte Türk İnternet’ine yararlı olacak siteleri de yeri geldiğinde tanıtıyorum. Karşılıklı bağlantı değişimi hususunda şu anda inanın hiçbirinize yardımcı olamayacağım. Çünkü Bağlantılar alanım ziyadesiyle uzun. Sitemin yeni versiyonunda bu alanı elimden geldiğince optimize ediyorum. (Bağlantı alanı rastgele 10 veya 20 siteyle sınırlı kalacak sanırım) Bağlantı isteklerinizi t-infection.com’un v4 versiyonuna kadar askıya alabilirseniz hepinize minnettar kalırım. Yeni versiyonda bana gelen e-postalardaki onca güzel siteyi tavsiye bir Dizin altında zaten yayınlayacağım. Genişçe bir kaynak olması için uğraşıyorum. Bu yüzden sizlerden tekrar tekrar özür diliyorum. Hali hazırda t-infection.com’un v4 geçişine çok az bir zaman kaldı. Bağlantı değişimi isteyen arkadaşlarıma teşekkür eder, ilgilerinden ötürü şükranlarımı sunarım.

Öncelikle bu uygulamayı bir blog sitesinde kullanacaksanız header.php dosyanızı açın ve aşağıdaki kodları girin. Şayet bunu html/css bazlı bir sitede kullanacaksanız head etiketinin bitiminden önce aşağıdaki kodu yazın.

<script type=”text/javascript”>
//Highlight image script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

function makevisible(cur,which){
strength=(which==0)? 1 : 0.2

if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
}
</script>

Bu kodu yazdıktan sonra resim bağlantılarımızı göstermek istediğimiz alana ise aşağıdaki kodu yazıyoruz. (Blog sitelerinde sidebar.php dosyası içine bu kodu yerleştirebilirsiniz)

• <div class=”baglantikutusu”>
  <a href=”whatever.html”><img src=”resminiz.gif” style=”filter:alpha(opacity=20);-moz-opacity:0.2″ onmouseover=”makevisible(this,0)” onmouseout=”makevisible(this,1)” alt=”" /></a>
  </div>

Böylelikle ilgili alandaki resimleriniz soluk bir şekilde görünecek ve verdiğiniz link özelliği nedeniyle fare ile üzerine gelince asıl rengini alacak. Bu işlemi yaparken ben bağlantıyı bir div sınıfı içine aldım. Bu sınıfı siz kendinize göre de değiştirebilirsiniz. (div sınıfı içine almadığınız linkler geçerlilik testinden geçemeyebilir) Resimlerinizin (bağlantı vereceğiniz resimlerin) aynı ebatta olması bu uygulamanın daha kolay ve daha güzel olmasını sağlar. (Tıpkı verdiğim örneklerdeki gibi)

Böylece istediğiniz kadar bağlantıyı belli bir alanda gösterebilir ve ziyaretçilerinize farklı bir görünüm sunabilirsiniz. Umarım faydalı olmuştur… (Şayet bu uygulamayı bir blog üzerinde uygulayan arkadaşlar olursa lütfen sitelerini geçerlilik testine tabi tutsunlar)