22 Nisan 2012 Pazar

Özel 404 Hata Sayfası Oluşturun

Geçtiğimiz günlerde yazdığım Yeni Arama Tercihleri İle Blogger’da SEO Daha Kolay başlıklı yazıda Blogger’ın sunduğu yeni ayarlardan bahsetmiştim.Bunlardan biri 404 hata sayfalarını özelleştirebilmemizdi.Bir kullanıcı blogunuzda sdaha önce slinmiş bir yazıya ulaşmak istediğinde veya hatalı bir URL yazarak sayfalarınızdan birine ulaşmak istediğinde sayfanın bulunamadığını belirten bir hata sayfası ile karşılaşır.İsterseniz Blogger’ın klasik hata sayfasını aşağıda resimde gördüğünüz şekilde özelleştirebilirsiniz.

 

Özel 404 Hata Sayfası Oluşturun

 

1.Adım: Öncelikle şablonunuzun ]]></b:skin> kodundan önce aşağıdaki stil kodlarını ekleyin.

 

#error {
background-color: #F2F2F2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLhKQgZA8-_ULSefkW9vYyXBkDyH8wRkqRk9bdRzJpDOeVnU5HQY2QTfbMUJ_NxkflCWnlq7-B5mM7eLmOJX54_O15_tDl4IYaqsplHMOFST_aFCa4-hB_dbk-t9isjzJicZerzl-4h2AJ/s200/bg_ku.png');
background-repeat: repeat;
color: #555555;
height: 100%;
left: 0;
margin: 0;
padding: 0;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 999;
line-height: 170%;
}
#error #halaman {
position: relative;
height: auto !important;
height: 100%;
min-height: 99%;
}
#error #halaman h2 {
margin: 1em 0;
}


#error #wadah {
margin-top: 120px;
}
#error .tengah {
margin: 0 auto;
width: 920px;
}
#error .box-atas, #error .box-bawah {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEHqxAceOB4CSdE7kGDxzZfexj6McZLvUj4syIni688uXGysq0gxQtIkXxkAqKYAvPDx4v1LESF4w1LB5TK9YVGJXAWfUn_dXk0Dw_vr2x3zWuMJWwszXj6ch7TQk2SjlJo6dTDrEcykHC/s944/box-sprite.png');
background-repeat: repeat;
background-position: 0 0;
height: 43px;
margin: 0 -12px;
width: 944px;
}
#error .box-atas {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEHqxAceOB4CSdE7kGDxzZfexj6McZLvUj4syIni688uXGysq0gxQtIkXxkAqKYAvPDx4v1LESF4w1LB5TK9YVGJXAWfUn_dXk0Dw_vr2x3zWuMJWwszXj6ch7TQk2SjlJo6dTDrEcykHC/s944/box-sprite.png');
background-repeat: no-repeat;
background-position: 0 -43px;
}
#error .box {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgES_kBTxRvLQlDHHq-bIUhPUZ2kyD2J37eQDrjVbBYMmOgPt4leVc4nYaCAcZJ9mOil4utsyoLBQLG3eRSvW2nsqD2T2DBfQn0ZCS7i3MBqzgCDbd49Q0rvt4l3oIvgM-0JpneQD0-nejk/s920/box-horizontal.png');
background-repeat: repeat-y;
background-position: 0 0;
min-height: 200px;
padding: 10px 50px;
}

 

2.Adım: Şimdi Ayarlar > Arama tercihleri > Sayfa Bulunamadı Sayfası İçin Özel İçerik > Düzenle diyerek kutuya aşağıdaki kodları kendinize göre düzenleyerek ekleyin ve değişiklikleri kaydedin.

 

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>

<h1>SAYFA BULUNAMADI !</h1>
<div id="error">
<div id="wadah">
  <div class="tengah">
   <div class="box-atas"></div>
   <div class="box">
    <div id="halaman">
    <p><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX32TznDMRoAsskpxZwoZ7J9d3KreocrQXmJtiET6e3VRE_N715lWQevrfCS5kztm3iSHjyNeZ9TEaYEVWfuQUVnzs3gtQMxZkqeTV0M2G-SjCC6V3MignaXFCVUqeohEexY4wfjbwwWGO/s350/4041.jpg" /></p>
     <p>Ulaşmaya çalıştığınız sayfa bulunamadı.Lütfen ulaşmak istediğiniz sayfanın adresini doğru yazdığınızı kontrol edin.Eğer adresi doğru yazdığınızdan eminseniz ulaşmak istediğiniz sayfa silinmiş olabilir.  </p>
     <p> <h2><a href="http://bloghocam.blogspot.com/" title="Blog Hocam" >Ana Sayfa</a></h2></p>
    </div>
   </div>
   <div class="box-bawah"></div>
  </div>
</div>
</div>

</b:if>

 

Şimdi blogunuzda var olmayan her hangi bir sayfaya gitmye çalışın.Örneğin:

 

http://blogunuz.blogspot.com/laylaylom.html

 

Eski hata mesajının yerine tam ekran bir hata mesajı sayfası karşınıa çıkacaktır.Bu yöntemle çok daha yaratıcı hata sayfaları oluşturabilirsiniz.

20 Nisan 2012 Cuma

Hello Bar: Bilgilendirme Çubuğu

Hello Bar isimli popüler servis bizlere bloglarımızda kullanmak üzere bilgilendirme çubuğu oluşturma imkanı sunuyor.Ücretli ve ücretsiz seçenekleri bulunan bu servis çoğu blogcu tarafından tercih ediliyor.Neden mi?

  • Gradient ekleme özelliği sayesinde aynı renkte fakat farklı desenlerde çubuklar oluşturabiliyorsunuz.
  • Diğer çubuklardan farklı olarak kapattıktan sonra tekrar açabiliyorsunuz.
  • Kaç kez tıklandığına dair istatistikleri görebiliyorsunuz.

İşte bu özellikleri Hello Bar’ı diğerlerinden farklı ve üstün kılıyor.Şimdi size Hello Bar’ı ücretsiz olarak blogunuza nasıl ekleyeceğinizi anlatmak istiyorum.

 

Hello Bar

 

 

1.Adım: Öncelikle ücretsiz üye olmak için Hello Bar ana sayfasına bulunan Free Sign Up butonuna bastığınızda açılan pencerede ki kutuya e-posta adresinizi yazdıktan sonra SIGN UP butonuna basın.

 

Hello Bar

 

2.Adım: ilk adımı tamamladıktan bir kaç saniye sonra e-posta adresinize Welcome to Hello Bar balıklı bir posta gelecek.Bu postada kullanıcı adınız ve şifreniz yazıyor.Hello Bar Login sayfasına giderek bu bilgilerle hesabınıza giriş yapın.

 

Hello Bar

 

3.Adım: Hesabınıza giriş yaptıktan sonra Hello Bar’ınızı oluşturmak için CREATE NEW butnuna basın.Settings bölümünden çubuğun ayarlarını yaptıktan sonra SAVE butonuna basın.

 

Hello Bar

 

4.Adım: Çubuğunuzun ayarlarını yapıp SAVE butonuna bastıktan sonra açılan penceredeki kodu kopyalayın ve şablonunuzun </head> kodundan önce yapıştırın.

 

Hello Bar

 

Bu paylaştığım üçüncü bilgilendirme çubuğu.Alternatifleri görmek isterseniz daha önce paylaştığım şeffaf kapatılabilir bilgilendirme çubuğuna ve Nedim Arabacı tarafından yapılan Noty bilgilendirme çubuğuna göz atabilirsiniz.

18 Nisan 2012 Çarşamba

SEO Dostu Url Oluşturalım

SEO Dostu Url Oluşturalım

Bizler özellikle Blogger sistemi üzerinde yoğunlaşmış ve bu sistemin blogculara önemli artılar kattığını düşünen blogcularız. Bu yazımızda Blogger SEO ile ilgili oldukça faydalı ve bilinmeyen ip uçlarını kavrayacak ve bunları kullanmamız sonucunda neler kazanacağız bunları öğreneceğiz.

URL nedir ? URL ile SEO etkileşimi ?


 Aslında her birimiz birer blogcu olduğumuz için URL'nin ne olduğunu zaten biliyoruzdur. Ama belkide aramızda terimsel olarak bilmeyenler vardır. Yinede açıklamak ile konumuza başlamanın faydalı olacağını düşünüyorum.


"URL insanların internet üzerindeki ulaştıkları" adreslerdir şeklinde açıklamamız mümkündür.
URL'nin SEO ile etkileşimi buradan sonra yazımızın ip ucunu vereceğimiz kısıma yaklaştığımızın habercisidir.


Blog Hocam üzerinde dahi bir çok URL'ye göz atabilirsiniz bu hatayı görmeniz muhakkak mümkün olacaktır.Örnek olarak bir yazımız var bu yazımızın başlığını Blogger sistemize girelim ;

Dünya üzerindeki en ünlü 5 Sosyal Ağ  (inceleme)

- Bunu bu şekilde Blogger'dan başlık olarak açarsak yazımızın Url'sinin yarısı görüntülenmeyecek çünkü Url'miz oldukça uzun

- Arayıcı kitlesi Arama motorları üzerinden arama ile gelme ihtimali çok düşecek çünkü; hem URL karekter olarak çok geniş

- Arama motorları uzun bir URL' ile sahip konumuz olduğu için yazmız her ne kadar bilgilendirici özelliğe sahip olursa olsun yinede bizi arka sırala atıcaktır.

Arama Dostu URL oluşturalım


 Şimdi bizler göstermiş olduğum ve çoğu kişinin bilmediği yada bilenlerin de paylaşmadığı benim kendi düşüncem ile bulmuş olduğum bir ip ucunu göstereceğiz.

Blogger sistemi bize Wordpress'de çok fazla kullanılan bir özelliği kullanım izni sağlıyor aslında tabi ki eğer biz bunu fark edebilirsek. Şimdi Blogger panelimizden yeni yayın oluşturmak için giriyoruz. Blogger panelimizin başlık kısmına URL'mizi kısaltacağız ve sonra kolay kullanım ekleyeceğiz bunu nasıl yapacağız ?

Başlık kısmına Url'mizi ;En unlu 5 Sosyal ag şeklinde yazıyoruz.Böylece Url'miz ;


1- Url'miz kısaldı +1
2- Url'miz Türkçe karekterlerden arındırıldı.
3-Url'miz SEO dostu oldu.
4- Url'miz artık daha üstlerde yer alabilir (kısa olduğundan dolayı)
5- İnsanlar bunu bu şekilde arama motoru üzerinden ararlarsa eğer ulaşma ihtimalleri daha yüksek olduğu için daha çabuk hit kazanabiliriz.

Bunu eğer ; Dünya üzerindeki en ünlü 5 Sosyal ağ (inceleme) olarak başlık bölgemize yazarsak ; www.siteadi.blogspot.com/tarih/tarih/Dnya-zerindeki-en-nl-5-sosyal-ag-inceleme olacaktı ki ; şimdi bu URL ; www.siteadi.blogspot.com/tarih/tarih/en-unlu-5-sosyal-ag.html oldu.


Eminim şimdi aklınıza gelen ilk soru peki ama bu kadar yazıyı bunun içinmi okuduk yani ? o zaman başlıklarımızda sitemizde öyle görünecek diyebildiğinizi duyabilyorum sanki :) tabiki hayır.


Yazımızı yayınladıktan hemen sonra tekrar yazıyı düzünlemek için giriyoruz ve Başlığımızı Dünya üzerindeki en ünlü 5 Sosyal Ağ  (inceleme) olarak değiştiriyoruz. ve tekrar siteye gidip Url'ye bir bakıyorsunuz ki ;URL farklı ve yazınızın Title'ı farklı :) böylece hem kısa bir url elde ettik hem SEO etkileşimini sağladık hemde yazımız için örneğin kendi blogumda çok sık kullandığım (inceleme), (infografik) gibi okuyucuyu bilgilendiren bir başlık zenginliği de katmış olduk.

Uzunca yazımızı okuyan herkeze çok teşekkür ediyorum :) aklınıza takılan sorularınızı sormanız ve yorumlarınızı esirgememeniz dileğimle :)

 

Yazar Hakkında:  Burak Göç Sosyal Medya,SEO ve Blogging konularında yazılar veren bir blogcu ve Bilgeyazar gelişimi ile ilgileniyor.Bu yazısı Blog Hocam’da Misafir blogcu olarak yayınlanmıştır.

16 Nisan 2012 Pazartesi

Türk Yapımı “Noty” Bilgilendirme Çubuğu

Daha önce kapatılabilir şeffaf bir bilgilendirme çubuğu paylaşmıştım.Bir arkadaşımın isteği üzerine yine buna benzer bir bilgilendirme çubuğu ararken Nedim Arabacı tarafından geliştirilmiş Noty ile karşılaştım ve sizlerle de paylaşmak istedim.

 

Türk Yapımı “Noty” Bilgilendirme Çubuğu

 

Bu kapatılabilir bilgilendirme çubuğu pat diye değil bir efekt ile açılıyor ve köşesindeki X ikonuna basılmadığı takdirde belli bir süre sonra kendiliğinden kapanıyor.Blogunuza nasıl ekleyeceğinize gelirsek…

 

1.Adım: Şablonunuzdan </head> kodunu bulun ve hemen üstüne aşağıdaki kodları ekleyin.

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/61925244214/jquery-noty.js"></script>

<link rel="stylesheet" type="text/css" href="https://drive.google.com/file/d/0BxxMpDce-fNUQjl0cjd5ZXZfbWc"/>
<link rel="stylesheet" type="text/css" href="https://drive.google.com/file/d/0BxxMpDce-fNUd1Y1NlVqd1QtV0U"/>

 

2.Adım: Şablonunuzdan bu kez </body> kodunu bulun ve hemen üstüne aşağıdaki kodları ekleyin.

 

<script type="text/javascript">
noty({"text":"Blog Hocam'ı Twitter'da takip edin! <a href='http://twitter.com/bloghocam' target='_blank'>@BlogHocam</a>","layout":"bottom","type":"success","textAlign":"center","easing":"swing","animateOpen":{"height":"toggle"},"animateClose":{"height":"toggle"},"speed":750,"timeout":10000,"closable":true,"closeOnSelfClick":false});
</script>

 

Bu çubuğu sayfanın 3 farklı yernde gösterebilirsiniz.Çubuğun sayfanın üst kısmında gözükmesini istiyorsanız bottom yazan yeri top ,  ortada bir pencere şeklinde açılmasını istiyorsanız center olarak değiştirebilirsiniz.

 

Nedim Arabacı’ya böyle bir uygulama geliştirip bizlerle paylaştığı için bir kez daha teşekkür ediyorum.http://needim.github.com/noty/#creator sayfasına gidip bu uygulamadan yararlanarak farklı tarzda çubuklar da oluşturabilirsiniz.

İlk Sony Xperia Sahnede

Sony, Xperia NXT (Gelecek Kuşak) serisinden Xperia S ile Android telefon dünyasına hızlı bir giriş yaptı. Sony’nin 4 ekran stratejisinde önemli bir yeri olan çift çekirdekli tasarım harikası Xperia S, Sony Bravia HD parlak ekranıyla akıllı ve eğlenceli Android telefon dünyasının yeni ikonu olacak.

Sony’nin 4 ekran vizyonunda içerik paylaşımını en üst seviyeye taşıyan çift çekirdekli tasarım harikası Xperia S, televizyondan tablete tüm elektronik cihazlara bağlanarak kullanıcıya eşsiz bir deneyim yaşatıyor. Ofis ve ev ortamında kullanıcıyı küçük telefon ekranına bağlı kalmaktan kurtararak Android telefonları birer mobil teknoloji üssü ve pratik uzaktan kumandaya dönüştüren Xperia S, Sony Bravia HD parlak ekranı ile eşsiz bir görsel deneyim sunuyor.

Xperia S, 12 megapiksel Exmor R kamerası ile bekleme modundan 1,5 saniye gibi kısa bir sürede çıkarak fotoğraf çekimi yapabiliyor veya Full HD video çekebiliyor. Sony kalitesini yansıtan telefon ekranının altını vurgulayan ışıklı şeffaf bandıyla hemen dikkat çeken Xperia S şık tasarımı ile akıllı telefon dünyasının ikonu olacak.



Xperia S Sony dünyasının bir parçası

Kullanıcının TV, akıllı telefon, dizüstü bilgisayar ve tablet arasında kolayca geçiş yapmasını sağlayan Xperia S mobil teknoloji ile ev ve ofis ortamını birleştiren tam bir cep kontrol merkezi. Birbirine bağlı bu dünyada sadece akıllı bir uzaktan kumandadan ibaret olmayan Xperia S, HDMI bağlantısı ile televizyon üzerinden Sony Entertainment Network’e bağlanarak filmlerden müziğe, video oyunlarından kliplere kadar her alanda kullanıcılara dijital eğlencenin kapılarını açıyor.

Xperia S kablosuz ağ bağlantısı ile fotoğrafların ve videoların tek tuşla paylaşılmasını sağladığı gibi NFC (yakın alan iletişim) teknolojisi ile kullanıcıların telefonları arasında resim, belge ve şarkı paylaşmasına da izin veriyor.

Eşsiz Sony eğlence dünyasına cepten erişim

Xperia S kullanıcıları Sony Entertainment Network’e bağlanabilecek. Music Unlimited 15 milyondan daha fazla şarkı içeren global bir katalog sunarken Video Unlimited da dünyanın büyük yapımcılarının gişe hasılatı rekorları kıran en yeni filmleriyle TV dizilerini akıllı telefona taşıyacak. Aynı zamanda PlayStation™ onaylı Xperia S, PlayStation® Store üzerinden kullanıcılara Sony PlayStation kalitesini yaşatacak.

Android 2.3 Gingerbread işletim sistemiyle satışa sunulan Xperia S, 2012’nin ikinci yarısında Android 4.0 Ice Cream Sandwich sürümüne güncellenebilecek. Xperia S Turkcell mağazalarında satışa sunuldu.



Bir bumads advertorial içeriğidir.