Kişisel Web Sitesine Özel İmleç Kullanma

cursorre Kişisel Web Sitesine Özel İmleç Kullanma

Bir önceki yazımda bu yazıya hazırlık olarak .cur ve .ani uzantılı dosya oluşturmayı anlatmıştım, ayrıca yine o yazıda .cur ve .ani uzantısının önemine değinmiştim. Bu yazıda bir kez daha belirtelim sitenize özel imleç kullanacaksanız imlecin tüm tarayıcılarda çalışması için uzantısının .cur veya .ani olması gerekiyor.

Yani sitenizde .gif uzantılı veya .jpg uzantılı bir imleç kullanırsanız bu imleç firefox tarayıcısında düzgün olarak görüntülenecektir ancak internet explorer tarafından desteklenmediği için özelleştirilmiş imleç internet explorer tarayıcısı kullananlarda görünmeyecektir, bu nedenle sitenize özel kullanacağınız imleç .cur veya .ani uzantılı olmalıdır.

Bu yazıyı fazla kalabalık kelimelere boğmamak için bir önceki yazıyı okuduğunuzu yada sitenizde kullanacağınız özel imleç grafiğini önceden seçtiğinizi varsayıyorum, ve yazının detaylarına geçiyorum..

Sitemize gelen ziyaretçilerin sitemizde gezdikleri süreçte imleçlerinin beyaz ok yerine farklı bir şekilde görünmesini istiyoruz, bunun için gereken .cur yada .ani uzantılı dosyayı da hazırladık peki bu aşamadan sonra ne yapıyoruz ?

Öncelikle imleç dosyamızın url’si olması için dosyayı bir yere upload ediyoruz, kendi host alanımız varsa dosyayı ftpmize atıyoruz. (kendi hostumuz yoksa dosyayı blogspot gibi ücretsiz blog alanlarınada upload edebiliriz.) Buradan alacağımız url bağlantısını bir kenara koyuyoruz.

Dosyamızı upload ettik şimdi ne yapıyoruz ?

Şimdi sitemize bir css dosyası yükleyeceğiz ve bu dosyayı temamızdan çağıracağız, bu çağırma işleminide doğru olarak yaptığımızda tüm tarayıcılarda özelleştirilmiş imleçimiz aktif olacak…

Yeni bir css dosyası kullanmamızın amacı mevcut css dosyasına girerek kafanızın karışmaması, eğer kodlama konusunda biraz bilginiz varsa css dosyası içindeki kodu mevcut css dosyanıza ekleyerek de aynı işi yerine getirebilirsiniz..

Aşağıdaki kodu oluşturacağınız dublex.css isimli dosyaya kayıt edip ftp’nize gönderin veya kodları temanızdaki style kodları arasına ekleyin..

BODY {cursor: url("cur.cur"), url("https://www.fileden.com/files/2007/10/10/1499260/Excalibur_Resize_1.cur"), default; }

Detaya girmek gerekirse, yukarıda verilen kod tüm site içeriğinde linki verilen imleç dosyasının çalışmasını sağlıyor, eğer tüm aşamalarda bu imleç grafiğinin çıkmasını istemiyorsanız ekstra düzenlemeler yapmanız gerekiyor. Sadece ok işaretinin yerine görünmesini istiyorsanız url’yi doğru olarak girmeniz ve kodları siteye eklemeniz yeterli..

Eğer blogspot tarzı blog sahibiyseniz imleç dosyasının linkinin yer aldığı css kodunu şablonda diğer style kodlarının arasına eklemelisiniz, eğer css kodunu dublex.css isimli bir dosyaya kaydedip ftp’nize attıysanız dosyayı çağırmak için aşağıdaki kodu url’nize göre düzenleyerek header.php sayfanıza yada sisteminizde header bölümüne </head> öncesine eklemelisiniz..

<link id="cursorStyle" href="http://www.xxxxx.com/cssdosyasininyeri/dublex.css" rel="stylesheet" type="text/css" media="screen" />

Bu işlemleri doğru olarak uyguladığınızda sitenize firefox, chrome veya internet explorer ile girenler sizin tanımladığınız imleç dosyasını görecekler..

Ücretsiz hareketli veya hareketsiz imleç grafiklerini bu sitede bulabilir ve beğendiğinizi indirip yukarıdaki anlatıma bakarak sitenize uyarlayabilirsiniz..