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
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.
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ı (⇦ ⇨) kullanabilirsiniz.</div>
Uyarı mesajı blogunuzda şu şekilde gözükecektir:
Bu uygulamayı beğendiyseniz aşağıdaki paylaşım butonlarını kullanarak arkadaşlarınızla paylaşın lütfen.
İyi bloglar!
){kind=link}