Wordpress blog sahipleri için gönderiler içindeki bağlantılar çok önemlidir. Bunun gerekliliğini ben de oldukça fazla yaşadığım için sadece temamın bana sunduğu bağlantı karakterini kullanmakla yetinmiyorum. Bunun yerine temamın stil dosyasında farklı bir bağlantı sınıfı oluşturarak gönderilerim içinde bunu kullanıyorum. Bazen yazılarımızın içinde gördüğünüz bağlantılar (özellikle renkli ve ikon destekli olanlar) buna bir örnektir. Öncelikle size kullanmış olduğum Css kodlarını yazayım, sonrasında bunu bir Wordpress gönderisinde nasıl kullanacağımızı anlatalım.

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

Sitemin sürekli takipçileri bilirler ki bu günce üzerinde sadece tasarım ve web konulu yazılara ağırlık veriyorum. Böyle bir konudan burada bahsetmek ne kadar doğrudur bilemem ama ilk ve son olacağı kesindir.

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.

Başlığın çok karışık olduğunun farkındayım. Bu yazımda sizlere anlatmak istediğim şey birçok blog sitemizin kullandığı küçük soluk resimlerin fare ile üzerine gelince asıl rengini alması ve bağlantı alanı olarak kullanılması. (Örnek olarak, Sesebian ve Fikirbozan‘ın sidebar bölgesine bakabilirsiniz) Fikirbozan.net’in gönderisinden esinlenerek yazdığm bu makalede hem geçerli (valid) bir kod yazımı ve kolaylıkla sitemize uygulayacağımız bir örnek yapacağız. Aslına bakarsanız bu işi filter parametresi ile de yapabiliyoruz ancak bu yöntem W3C’nin Xhtml Validation alanından geçemiyor. Bu yüzden hali hazırda DynamicDrive.com üzerinde kullanılan şuradaki scripti geçerli bir hale getirdim. Localde yaptığım denemelerde scriptin hem çalıştığını hem de Geçerlilik Testinden geçtiğini gördüm. Bu küçük ön bilgiden sonra hemen uygulamamıza geçelim.

Ö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)