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

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.

 

 

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:

 

 

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

 

İyi bloglar!

BH Okuyucularına Özel Sosyal Paylaşım Butonları Kutusu

Yazılarınızın sosyal ağlarda paylaşılmsı hem ziyaretçi sayınızın artması, hem de SEO açısından çok önemli. Bunun için blog yazılarınızın altına mutlaka sosyal paylaşım butonları eklemelisiniz.

Blogger’ın kendi paylaşım butonları olmasına rağmen efektifliği ve dikkat çekiciliği tartışılır. Sosyal paylaşım butonlarınız okuyucunun ilgisini ne kadar çok çekerse yazınızın paylaşılma ihtimali o kadar artar. Bu yüzden Blog Hocam okuyucularına özel sosyal paylaşım eklentisi kodladım. Eklentiye en popüler sosyal ağlar olan Facebook, Twitter, Google+, Pinterest ve LinkedIn butonlarını ekledim.

 

 

Bu sosyal paylaşım butonlarını blogunuza eklemenin 2 aşaması var. İlk olarak Şablon > HTML’yi düzenle yolunu izleyin ve Ctrl + F tuş kombinasyonunun yardmıyla ]]></b:skin> kodunu bulun. Bu kodun üzerinde bir yere aşağıdaki stil kodlarını ekleyin.

 

/* Blog Hocam Sosyal Paylaşım Butonları Eklentisi */
#bh-paylas {
border:1px dotted #000;
padding-left:65px;
background: #ffc039;
padding-top:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

ul.bh-sosyal {
list-style:none;
display:inline-block;
margin:auto;
}
ul.bh-sosyal li {
display:inline;
float:left;
background-repeat:no-repeat;
margin:auto;
}
ul.bh-sosyal li a {
display:block;
width:50px;
height:50px;
padding-right:40px;
position:relative;
text-decoration:none;
}
ul.bh-sosyal li.bh-facebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgx2a0puK2NXkFt7GzucVzcyXFixEVKtSQNlqVZSKm_mEBv97mJxAk0SwlzHTozkNcvgws4jc-DuUctYNFu4-KQmktnuYpwFXmlGmvlQLBfz-6NBvm79zgsqIoVVc8QdurgZYUIOvLALwd/s48/Facebook.png);
}
ul.bh-sosyal li.bh-twitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU4kRlj_TGeRrLTOpmt8A74FAv-ZNc1_IgCqOHBsvgY08Rhg_p4sLUgnVo4P722bThHxtm127bezxMo9EPw8MN3rbXsVtj6h8d3Df7iHBjCEsTmO6GJPN7j0QyADF4BENHat1Jr5sO3A32/s48/Twitter2.png);
}
ul.bh-sosyal li.bh-googleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXpvG28Ah2YKSOJ2_xvbIRvqkkPSMiHJTdkq56E7sgsIRH4r13-Mhj8ScmSQDjLOI90sI9uwUUMVD9a6MX1LFLKVv2yjnU8LjZ9y_Ko-BeZ2SSdBY3s_FmEFYbVLjcYvUqf6ea3lEE5KYO/s48/Google%252B.png);
}
ul.bh-sosyal li.bh-pinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijouePlyWCj-9xPY9Vkrylmtgfe0rDvwNvNHcyS6tkhkrLYRlSrUggv5Lg4ixFReDKCuddd8tRyQvi4qljCqPD54NJj4w4IKYwGkntkROJPQQErO104dUljdIxR4_HFrir6xb2y5fA4GDG/s48/Pinterest.png);
}
ul.bh-sosyal li.bh-linkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaf14oFX99SasUhWsCxKazuuOzqe8eMiD7Ra3g9TQ4OM-lshapR8krFDWL4xWneGNSFb8XAWcGrpvRJoNxeLnk0SnvNuGHgOPdvYzFLovAi9t5KBSMqS508GzG2bpBrX7zARpAIGiFaAxO/s48/Linkedin.png);
}

 

!!! Resimde gördüğünüz gibi sosyal paylaşım butonlarının olduğu kutunun arka plan rengi turuncu. Bu renk her blog tasarımına uyguhn olmayabilir. Eğer değiştiirmek isterseniz #ffc039  yerine başka bir renk kodu yazabilirsiniz.

 

İkinci aşama için yine Ctrl + F tuş kombinasyonuyla açılan arama kutusunu kullanarak <div class='post-footer'> kodunu bulun ve hemen üzerine aşağıdaki HTML kodlarını ekleyin.

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bh-paylas'>
<ul class='bh-sosyal'>
<li class='bh-facebook'>
<a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'/>
</li>
<li class='bh-twitter'>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'/>
</li>
<li class='bh-googleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'/>
</li>
<li class='bh-pinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'/>
</li>
<li class='bh-linkedin'>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'/>
</li>
  </ul></div>
</b:if>

 

!!! <div class='post-footer'> kodunu aradığınızda birden fazla sonuç çıkar ve sadece biri doğru koddur. Eğer HTML kodlarını ekledikten sonra sosyal paylaşım butonları gözükmüyorsa yanlış yere eklemişsiniz demektir. Diğer yeri deneyin.

Blogger Resimli Son Yazılar Eklentisi (Animasyonlu)

Blogunuza ekleyebileceğiniz bu eklenti animasyonlu, Resimli, son yazdığınız yazılarınızın kayarak aşşağı doğru akarak, listeleyen, bir jquery eklentisi. Bu klasik son yazılar eklentisilerinden farklı, dönerek zoom resim animasyonuyla sitenize renk katacak çok şık bir eklenti. Örnek için blogumun alttaki footer bölümüne bakabilirsiniz.
● Blogger animasyonlu, Resimli Son Yazılar Eklentisi.
● Aşağıya doğru kayan Jquery stil.
● Animated Scrolling Recent Post Widget.

Aşşağıdaki eklenti oluşturucuyla eklentinizi oluşturabilir,blogunuza ekleyebilirsiniz.

1. Kumanda paneline giriş yapın.
2. Yerleşim › Gadget ekle › HTML/Javascript bulun.
3. Aşağıda Oluşturduğunuz kodu kopyalayıp yapıştırın.


Yada aşağıdaki kodu manuel olarak blogunuza ekleyebilirsiniz.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css" media="screen">
#MEF-widget{overflow:hidden;margin-top:5px;height:385px;padding:0;}
#MEF-widget ul{width:295px;overflow:hidden;list-style-type:none;margin:0;padding:0;}
#MEF-widget li{width:282px;list-style-type:none;float:none;height:80px;overflow:hidden;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiamPG3F6IhSVvb5_-ux7lr85wHxT1P1hSxbGCV55pn5YPlcI1QMVdN2y95OHUTq5Kj6cnsxI_ePJeV_DaR1EN5TTOXrvfscKdS0d4dKlfzVwCVlxJc_RDjB20rUmlxKS55CgIkPddE4-s0/s1600/Son_Konularmef.jpg) repeat-x;border:1px solid #ddd;margin:0 0 5px;padding:5px;}
#MEF-widget li a{text-decoration:none;color:#4B545B;font-size:13px;height:18px;overflow:hidden;margin:0;padding:0 0 2px;}
#MEF-widget img{float:left;margin-top:10px;margin-right:15px;background:#EFEFEF;border:0;}
#MEF-widget img{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;background:-webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 0 3px rgba(0,0,0,.7);-moz-box-shadow:0 0 3px rgba(0,0,0,.7);box-shadow:0 0 3px rgba(0,0,0,.7);padding:4px;}
#MEF-widget img:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow:0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow:0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
.spydate{overflow:hidden;font-size:10px;color:#0284C2;height:15px;font-family:Tahoma,Arial,verdana, sans-serif;margin:1px 0 0;padding:2px 0;}
.spycomment{overflow:hidden;font-family:Tahoma,Arial,verdana, sans-serif;font-size:10px;color:#262B2F;margin:0;padding:0;}
</style>
<script type='text/javascript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 13;
acolor = "#666";
aBold = true;
icon = " ";
text = "Yorum";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://MeftunMede.Blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>
<div id="MEF-widget">
<script src='http://meftun-mede.googlecode.com/svn/trunk/Resimli_kayan_son_konular_eklentisi.js' type='text/javascript'></script>
</div>

Kod içinde;
boxwidth : Eklentinin genişliğini ayarlayabilirsiniz.
numposts : Konu sayısını ayarlayabilirsiniz.
limitspy : Eklentide görünen kolon sayısı.
intervalspy : kaydırma hızı.
home_page: blogunuzun adresini yazın.(Sonundaki "/" slash sembolu kalacak.)

Kodu denemek için Online html editor'ü kullanabilirsiniz.Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

Türkiye’nin En İyi Gezi Blogları

Kendi kategorilerindeki en iyi blogları sizlere tanıtmaya devam ediyorum ve bu olay oldukça keyifli olmaya başladı. Araştırma yaparken onlarca yeni blogla tanışmış oluyorum. Başarı hikayelerinden bir şeyler öğrenmeye çalışıyorum.

 

Yemek bloglarıyla başladığım, moda blogları, kişisel bloglar ve teknoloji bloglarıyla devam ettiğim blog turunda sırada gezi bloglarında.

 

İtiraf etmeliyim ki gezi bloggerları benim en kıskandığım blogger türleri. Düşünsenize yeni yerler görüyorlar, yeni insanlarla tanışıyorlar, farklı maceralar yaşıyorlar ve bunları blog yazarak okuyucuyla paylaşıyor. Kıskanmamak elde değil : )

 

En iyi gezi bloglarını listelerken çok zorlandım. Zira bu kadar çok ve kaliteli gezi bloglarının varlığından haberdar değildim. Bu yüzden önceliği bir kaç istisna dışında yazılarına duygu ve heyecan katan, amatör ruhla yazılmış bloglara verdim. İşte benim gözümden Türkiye’nin en iyi gezi blogları…

 

 

Az Gezmiş

 

 

Zehra Arslan ve Hakkı Ceylan’ın Türkiye’ de ve Dünya’ da gezip gördüklerini, fotoğrafladıklarını paylaştıkları, bu arada gezecek olanlar için ipuçları niteliğinde bilgiler verdikleri bir paylaşım ortamı olmuş durumda.

 

 

I Can Travel

 

 

Kerimcan Akduman’ın gezdiği şehirlerden, seyahat etmeye dair pratik ip uçlarına kadar bir çok konuyu yazdığı kişisel gezi blogu I Can Travel 2008 yılından beri yayında ve çok sayıda takipçisi var.

 

 

Gezentigiller

 

 

Gezmeyi çok seven Hasan ve Şahika çiftinin 2009 yılından beri gezdikleri gördükleri yerleri yazdıklları sıcak bir blog. Giitikleri yerlerde yaşadıklarını bloglarında yazarak hem anılarını canlı tutmak, hem de o yerlere gitmek isteyenlere fikir  vermeyi amaçlıyorlar.

 

 

Gezmek Güzel

 

 

Gezmeyi seven bir ailenin, gezilerini paylaşarak buralara seyahat edeceklere fayda sağlamayı amaçladıkları bir blog. Özellikle yurt dışı seyahtine çıkacaklar için güzel bir klavuz.

 

 

Gezgin Martı

 

 

Listeye son olarak eski bir okuyucumu (hala takip ediyor mu emin değilim) ekleyeceğim. Gezi bloglarına olan merakım ve hayanlığım kendisinin bir sorusu üzerine blogunu ziyaret etmemle başlamıştır. Gezdiği gittiği yerleri eğlenceli fotoğraflarla ve enerjik yazılarla anlatması çok hoşuma gitmişti. 2007 yılından beri aynı enerjiyle blog yazmaya devam ediyor.

 

 

Aslında tanıtılacak, çok kaliteli onlarca gezi blogu daha var ama listeyi çok uzatmak istemiyorum. Ve yazının başında da dediğim gibi daha çok amatör ruhla ve samimi bir dille yazılan blogları tanıtmayı tercih ettim. Keyifli okumalar…

Blogger Sosyalleşmesi

Her sosyal medya mecrası, her sosyal medya aracı bir takım masumiyet parolasıyla yoluna başlar. Tek amacı insanları sosyalleştirmektir, onlara asosyal kalıplar çerçevesinden çıkarıp, bir sosyal kimlik kazandırmaktır. Bu yüzden bilgisayar ve internet teknolojilerinin paralelinde bir takım sosyal medya mecraları ortaya çıkmıştır.

 

Örnek olarak verecek olursak geçen aylarda, bir sosyal medya devi facebook’a mağlup olarak bir nevi pazarı ona emanet eden msn görebiliriz. İnsanları bir zamanlar bağımlısı yapan, sosyal yapayım derken daha da asosyalleştiren mecraydı kendileri.

 

Bakıldığı zaman içinde bulunduğumuz sosyal mecra yani blogger da esasen bir sosyalleşme aracıdır. Hatta belki de aralarında en iyisidir. Bir blogger bu ortama geldiğinde tekken ilerleyen zamanda ortama kaynaşması yani ortamdaki insanları tanımasıyla kendi sosyal çevresini genişletmektedir. Bunun için bloggera gereken iki tane önemli madde vardır. Bunlar:

 

1. Zaman

2. Sabır

 

 

Bir blogger’ın sosyalleşmesi için en önemli unsur zamandır. Girdiğin içeriğin zamanla artması ve buna bağlı olarak ona tepki veren yani o yazıları okuyan okuyucuların artması bir zamanın ürünüdür. Bunun içinde belli bir süre gerekir, yani “zaman” . Sabır ise blogger’ın zamanın ona oynayacağı “bu işte de tutmadı kapat bu blogu” gibi şeytan dürtmelerini engellemesidir. Bir bakıma blogger felsefesi de “ Sabrın sonu selamettir.” olmalıdır.

 

Zamanla girilen içerikler ve buna bağlı olarak alınan yorumlar, ayrıca farklı bloglara yapılan yorumlar, insanlar arasında(bloggerlar) bir etkileşime sebep olur. Hatta yakın zamanda işte “… blogları buluşuyor, …’lu bloglar bir araya” geldi şeklinde bazı bloglar da ilanlar görmüşsünüzdür. Bunun tek açıklaması blog dünyasının yarattığı bir sosyalleşme olayıdır.

 

Blogger dışarıdan bakıldığı zaman yazıların girildiği, resimlerin paylaşıldığı, kimisinin para kazandığı vb. bir ortam olarak görülebilir ama içerik olarak incelendiği zaman önemli bir sosyalleşme ortamı olduğu yadsınamaz bir gerçektir.

 

Yazar Hakkında: Ruhsuz Atmaca'nın, tek ve temel amacı insanlığa bir şey katabilir miyim?, katabilirsem nasıl olmadır?, bu soruları kendine sorarken bir anda kendisini blog dünyasında bulur.Ruhsuz Atmaca blogunun kapağında yer alan ve ismini verdiği "Atmaca", insanlara benzer duygulara sahip bir canlıdır. Yırtıcılığı nedeniyle isminin önüne "Ruhsuz" takısı gelmiştir. Blogun sloganı ise: "Yazdıklarım ve Yazacaklarım Atmacanın Bakışlarında Gizli..." oluşturur.