14 Haziran 2013 Cuma

Blogger’da Yön Tuşlarıyla Sayfalar Arasında Geçiş Yapmak

14 yorum

Google, hem içerik hem de tasarım konusunda web yöneticilerinden kullanılabilirliği yüksek siteler oluşturmasını istiyor. Blog tasarımında kullanılabilirlik dendiğinde aklıma gelen şey kullanıcı dostu site oluşturmak. Bunun için neler yapılabilir? Kullanıcıların farklı cihaz ve sistemlerden kolay erişebildikleri, aradıklarını kolayca bulabildikleri ve site içerisinde rahat bir şekilde dolaşabildikleri bloglar yaratılabilir.

 

Bu yazıda ziyaretçilerin blog içerisinde gezmelerini çok kolaylaştıracak bir navigasyon sisteminden bahsetmek istiyorum.

 

Blogger şablonlarının çoğunda navigasyon önceki kayıtlar– daha yeni kayıtlar linkleri şeklindedir. Daha önce standart navigasyonu özelleştirebileceğiniz bazı alternatifler paylaşmışıtım. Bunlar:

 

1. Navigasyon Linklerini Resimle Değiştirmek

2. Numaralı Sayfa Navigasyonu

3. Blogger’da Yazıları Sonsuz Kaydırma İle Yükleme

 

Bu kez çok daha farklı bir navigasyon yöntemini paylaşmak istiyorum. Sayfalar arasındaki geçişi sadece klavyedeki yön tuşlarını (⇦ ⇨) kullanarak yapabileceksiniz.

 

Yön Tuşları

 

Bunun için Blogger kumanda paneline girdikten sonra Şablon > HTML’yi Düzenle yolunu takip ettikten sonra Ctrl + F tuş kombinasyonunun yardımıyla </head> kodunu bulun ve hemen üzerine aşağıdaki kodları ekleyin.

 

<script type='text/javascript'>
window.onload = function()
{
document.onkeyup = function(event)
{
if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;
event = event || window.event;
switch(event.keyCode)
{
case 37:
var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
if(newerLink !=null) window.location.href = newerLink.href;
break;
case 39:
var olderLink = document.getElementById('Blog1_blog-pager-older-link');
if(olderLink!=null) window.location.href = olderLink.href;
}
};
};
</script>

 

Bu kodu ekledikten sonra eklenti çalışmaya başlayacaktır fakat ziyaretçilerinizin bu özelliği kullanması için özellikten haberdar olmaları gerekir. Şimdi ziyaretçilerinize bu uyarıyı yapmak için küçük bir kod ekleyelim.

 

Blogger şablonlarında Önceki kayıtlar – Daha yeni kayıtlar linklerini temsil eden şu kodu bulun:

 

<b:include name='nextprev'/>

 

Bunun hemen altına uyarı mesajınıa ait şu kodları ekleyin

 

<div style='border:solid 1px #DEDEDE; background:#FFFFCC url(http://icons.iconarchive.com/icons/famfamfam/mini/16/icon-alert-icon.png) 8px 6px no-repeat; color:#222222; font-weight:bold; padding:4px;          text-align:center; '>Sayfalar arasında geçiş yapmak için klavyeden yön tuşlarını (&#8678;  &#8680;) kullanabilirsiniz.</div>

 

Uyarı mesajı blogunuzda şu şekilde gözükecektir:

 

Navigasyon Uyarı Mesajı

 

Bu uygulamayı beğendiyseniz aşağıdaki  paylaşım butonlarını kullanarak arkadaşlarınızla paylaşın lütfen.

 

İyi bloglar!

14 yorum:

  1. Kullanışlı olabilir. Denemek Lazım.

    http://anadoluyerlisi.blogspot.com/

    bu blogumda deneyeceğim. Paylaşım için teşekürler.

    YanıtlaSil
  2. turk blogculari buna alisana kadar cok zaman gecer :)

    YanıtlaSil
  3. iyi ve güzel olmuş ellerine sağlık

    YanıtlaSil
  4. hocam dediğinizi yaptım oldu ancak uyarı kodunu ekleymedim nerden bulabilirim göremedim..

    YanıtlaSil
  5. Ben yaptım ama çalıştıramadım. Yön tuşlarıyla sayfa değişmiyor. Daha önce paylaştığınız "numaralı sayfa navigasyonu" paylaşımını uygulamıştım onunla çakışıyor olabilir mi? Teşekkürler...

    YanıtlaSil
  6. İzmir de bana bu konularda yardım edecek bir blogger varsa iletişime geçmeye hazırım.
    bahceperim.blogspot.com

    YanıtlaSil
  7. Süper bir paylaşım bence çok teşekkürler Serdar hocam :)

    YanıtlaSil
  8. @Serkan Cokaydin
    Dediğiniz gibi numaralı sayfa navigasyonundan dolayı çalışmıyor olabilir.

    YanıtlaSil
  9. Yeni düzenliyeceğim temada kullanıcam sağolun hocam ;)

    YanıtlaSil
  10. Hocam bende de çalışmadı Wmadamv3 temasını kullanıyorum bi yardımcı olurmusunuz ?

    YanıtlaSil
  11. Calisti tesekkur ederim fitnessdestek.net

    YanıtlaSil
  12. Çok kullanışlı, teşekkürler. ;) Yalnız bir sorum olacak: Benim ana sayfamdaki sayfa geçişlerinde sorun var. 2. sayfaya geçiş yaptığımda yeni eklediğim birçok başlığı göstermiyor. Doğrudan birkaç kayıt atlıyor. Sonradan 2. sayfadan 1. sayfaya dönmek istediğimde aynı sayfa (2. sayfa) açılıyor. Bunu nasıl düzeltebilirim?

    YanıtlaSil

Picardes

LİNKLER