5/31/2014

Google Getirme Aracındaki Yenilikler

Web yönetici araçları google getir aracı kullanımı
Google Web yönetici araçları, Google gibi getir kullanımını kısa süre önce değiştirmişti. Google birkaç gün önce Google gibi getir aracına yeni eklentiler ekleyerek Seo özelliğini daha fazla geliştirdi. Web site sayfalarındaki hata oranını minimize eden bu özel kullanım ile Google’un sayfalarınızı gördüğü şekli ile görüp, link bağlantınızı kontol edip Google dizinine gönderebileceksiniz. Web yönetici araçları, web site sahipleri ve yetkilendirilmiş yöneticilerin sayfa bağlantı linklerini Google’un gördüğü şekilde görmenizi sağlayan Google gibi getir aracı, sayfalarınızın gönderilmesi sırasında arama sonuçlarında kötü performans sorununu gidermeye yarayan bir araçdır.

5/30/2014

Blogger Önceki ve Sonraki Ok Link Eklentisi

Blogger önceki sonraki sayfa ok bağlantı linkinin nasıl eklenir ?
Blogger, Ana sayfa alt kısmında ve okumak için açılan yazınızın en alt kısmında görülen Önceki Kayıt →, ← Sonraki Kayıt, sayfa bağlantı linkinin yan kısımlarına ok iconu → ekleyerek blog’unuzu özelleştirin. Blogger’un kendi şablon tasarımında olmayan bu eklentiyi kullanarak tema tasarımınızı değiştirebilirsiniz. Blogger şablon kodlarına ekleyeceğimiz kod aslında küçük bir alanı kapsamaktadır. Ancak yeni blog oluşturan ve kod konusunda henüz tam gelişmemiş yazar arkadaşlarıda düşünerek eklecekleri kodu bir bütün olarak aşağıda vereceğim. Ekleyeceğiniz bu kod hem Blogger hemde Blogger özel tasarım şablonlarında kullanılabilir. Uygulama sonucunda blog sayfalarınızdaki görünüm aşağıdaki şekilde olacaktır.

← Sonraki Kayıt   Ana Sayfa   Önceki Kayıt →

Blogger’a ekleyeceğiniz kod eklentisi hakkında bilgi :

1. Aşağıda vereceğim kod, blogunuzda iki yerde bulunmaktadır. Bunlardan biri sayfa mobil görünüm için, diğeri ise sayfa yazılarınıza götüren kısım içindir. ( blog-pager )

2. Kodu ekleyeceğimiz kısım blog sayfaları kısmıdır. yani ikinci bulacağınız kod kısmını ekleyeceksiniz.

3. Blogger şablon kodlarına kod’u eklemeden önce blog’unuzun yedeğini alın.

Blogger yedek nasıl alınır ?

4. Blogger şablon kodlarınız açın ve Ctrl+F ile aşağıdaki kodu bulun.
<div class='blog-pager' id='blog-pager'>

5. Arama penceresinde enterleyerek 2. kod’a ulaşın. Aşağıdaki verdiğim şekilde kodları göreceksiniz. Bu kodları seçin. Aşağıdaki kodlar şu anda blogunuzdaki kodların görüntüsüdür. Herhangi bir hata yaparsanız bu kodları yerine ekleyebilirsiniz. Bu nedenle aşağıda verilmiştir. Siz bir alttaki kodları alacaksınız. Blogunuz da görülen örnek kodlar.

<b:if cond='data:newerPageUrl'>
     <span id='blog-pager-newer-link'>
     <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
     </span>
   </b:if>
   <b:if cond='data:olderPageUrl'>
     <span id='blog-pager-older-link'>
     <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
     </span>
   </b:if>
   <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>


   <b:if cond='data:mobileLinkUrl'>
     <div class='blog-mobile-link'>
       <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
     </div>
   </b:if>


 </div>
 <div class='clear'/>
</b:includable>

6. Bulduğunuz ve seçtiğiniz bu kod’un yerine aşağıdaki kodları yapıştırın ve blog’u kaydedin, tarayıcı yeni sekmede yaptığınız işlemi kontrol edin. Sarı ile başlayan ve sarı ile biten sizin ekleyeceğiniz kod alanıdır.

<b:if cond='data:newerPageUrl'>
     <span id='blog-pager-newer-link'>
     <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&amp;larr;&amp;nbsp;<data:newerPageTitle/></a>
     </span>
   </b:if>
    <b:if cond='data:olderPageUrl'>
     <span id='blog-pager-older-link'>
     <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/>&amp;nbsp;&amp;rarr;</a>
     </span>
   </b:if>
   <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
   <b:if cond='data:mobileLinkUrl'>
     <div class='blog-mobile-link'>
       <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
     </div>
   </b:if>
 </div>
 <div class='clear'/>
</b:includable>

7. Artık Blogger, blog’unuzun Ana sayfa ve içeriğiniz açıldığında okuyucunuza ok işareti ile yön gösteren bir görünüme sahip. Blogger şablonunuzu özelleştirmek için, kendi tema tasarımınızı düzenleme zevkini yaşamak ister misiniz ?

Okuyun ⇒ Blogger tema tasarımı hakkında bilgiler.

5/29/2014

Blogger Yapısal Veri Aracı Kullanımı

Web yönetici araçlarında site grup makale yapısal veri aracı nasıl kullanılır
Blogger, web sitenizde yazdığınız yazı linklerinin, Google Web Yönetici Araçları Yapısal veri aracını kullanarak, site verilerinin arama sonuçları ve web araçlarında hatasız görülmesini sağlayacak bazı uygulamalar mevcuttur. Sitenizde yazdığınız tek bir yazı linkini yapısal veri işaretleme ile kontrol edebililir veya tüm siteniz için makele şeklinde bir grup veri incelemesi oluşturabilirsiniz. Tek bir site yazınızın link bağlantısını kontrol eden tek sayfalık Yapısal veri işaretleme ile ilgili yazımı okuduysanız şu anda anlatacağım konu çok sayfalı grub veri işaretlemenin nasıl yapılacağını kolayca anlayabilirsiniz.

Siteniz için veri işaretlemeyi ilk defa yapacaksanız vermiş olduğum bağlantıyı uygulayarak yapısal veri işaretlemenin mantığını anlayabilirsiniz. Google web yönetici araçları sitesindeki veri işaretleyicisi, sitenizdeki yapısal verilerle ilgili kalıbı belirten bir web yöneticisi hizmetidir. Veri işaretleyici sitenizdeki veri kaynaklarını işaretlemenize yardımcı olan kullanışlı ve kolay bir araçtır.

Aşağıda anlatılan açıklamaları takip ederek bugüne kadar yazdığınız tüm yazıları veya bir kısmını birkaç saat içinde tamamlayabilmeniz için YouTube video'su hazırladım.

Web siteleri için yapısal çoklu veri grup makalelerin uygulanması :

1. Uygulama yapacağınız sitenizin arşin dosyalarını açın. Klasik blog'um da 2011 senesinden 2013 yılına kadar olan kısmı bu yöntem ile 2 saatte hazırladım. 2014 yılı için yapılması gerekenlerin kalan bölümü de adım adım sizlere aktarıyorum. Konuyu gözünüzde büyütmeyin. Birkaç adımdan sonra tüm işaretlemeler kendiliğinden oluşuyor.
2. Tarayıcı yeni sekmede Web yönetici araçları sitesine giriş yaparak ilgili sitenizi açın.
3. Sol kategori menüde Diğer kaynaklar → Yapısal veri test aracına tıklayın.
Sitenizde açmış olduğunuz arşiv dosyanızda seçiminize bağlı tarihin yanındaki ok işaretine tıklayarak aylara dağılmış yazılarınızın görülmesini sağlayın. Yıl bazında aylara bölünmüş Arşiv örnek resmi inceleyerek sizde aynı konuma getirin.
Blogger arşiv sayfasının görünümü
4. Resimde görülen Ocak 2014 yılından başlayacağım. Maus’unuzu seçtiğiniz yazı linki üstüne sağ tıklayın ve bağlantı adresini kopyalayın. 3. maddede anlatılan Yapısal veri test aracına yeni açtığınız tarayıcı sekmesindeki URL penceresine yapıştırın ve önizlemeye tıklayın. Sayfayı aşağıya kaydırdığınızda Google Profilinizin doğrulanmadığını göreceksiniz.
5. Bu durumu düzeltmek için pencere içindeki ( .tr) yazısını silin. Yazı bağlantı linkiniz aşağıdaki gibi görülmesi gerekir. Şimdi tekrar önizlemeye tıklayın hataların giderildiğini göreceksiniz.
 
http://adnanguney.blogspot.com/2014_01_01_archive.html
6. Tarayıcınızda yeni sekme açın. Web yönetici araçlarına giriş yaparak sitenizi açın ve sol tarafta bulunan → Arama görünümüVeri işaretleyiciye tıklayarak sağ üst kısımda bulunan, İŞARETLEMEYE BAŞLA ismine tıklayın.
7. Üst pencereye biraz önce hazırladığımız arşiv bağlantısını yapıştırın. Alt açılır pencerede Makale seçeneğini seçin ve Tamam komutu ile işleme başlayın.
8. Yeni açılan pencerede “ilk sayfayı işaretleyin” uyarı balonunu göreceksiniz. Tüm yapacağımız işlemleri lütfen şimdi iyi takip edin. Google, Blogger için genelde etiketleri indexlemez. Bu nedenle aşağıda verdiğim yerleri işaretleyin. Ücetli site kullanıcıları tüm alanları doldurabilirler.
a : Blog yazı başlık ismi : Maus ile sürükliyerek yazı başlığını seçin, açılan pencerede Başlık ismine tıklayın. Seçiminiz sağ tarafta konumlanır.
b : Resim : Resime tıklayın açılan pencerede Resim ismine seçin. Seçiminiz sağ tarafta konumlanır.
c: Gönderen : İsmi seçin açılan pencerede Yazar ismine tıklayın. Seçiminiz sağ tarafta konumlanır.
9. Şu ana kadar yaptıklarını sadece bir yazı için veri işaretlemeden ibarettir. Veri işaretleyicisinde yazılarınızın algılanması için hemen alt kısımdaki diğer yazınıza aynı işlemi uygulayın. Aynı işlemi yaptığınızda alt kısımda bulunan birçok yazınızın otomatik işaretlenmiş olduğunu göreceksiniz. Veri işaretleyici hatalı bir yer işaretlerse sağ tarafta ünlem işareti veya sarı bir renk göreceksiniz. Sağ taraftaki sorunlu alana tıklayın sol tarafta ilgili yayına gidecektir. Veri işaretlerinin doğruluğunu kontrol edin. Yanlış varsa düzeltin.
10. İşaretlemeniz dışında farklı bir yeri sarı renkli görürseniz, renkli kısma tıklayarak temizle seçeneğini seçin. Veriniz düzelecektir.
11. Sol ve sağ dikey çubukları kaydırarak hatalı yerlerin olup olmadığını kontrol edin. Zaten hatalı bir sayfa olursa üst ksımda renkli ünlem işaretini göreceksiniz.
12. Hatalı sayfayı düzenlemek için üstteki ünlem işaretine tıklayın geri döneceksiniz.Gerekli düzenlemeleri yapın ve ileri seçeneği ile devam edin.
13. Tüm veri işaretleriniz doğru ise BİTTİ ismine tıklayarak makale, grubunun oluşmasını sağlayın. 4+ sayfa gibi pencere göreceksiniz. Bu 4 sayfa değildir yanılmayın. 4 sayfaya bağlı diğer linkleride kapsamaktadır.
14. Sayfa Grubunu Oluştur seçeneğine tıklayın. Açılan pencerede sol ve sağ dikey çubukları ile hata var mı kontrol edin.
15. Maus’u veri üzerine götürdüğünüzde renk değişimi yaparak, neyin işaretli neyin işaretsiz olduğunu görebilirsiniz. Ayrıca üst sekmeye bakarakta hatalı sayfa numarasını tespit etmeniz mümkün. Tüm işlemler ve sorunlar bitene kadar ileri düğmesine basın.
16. Sayfa ilerleme sonucunda Bitti ismine tıklayın.
17. İnceleyin ve yayınlayın uyarısını göreceksiniz. Sayfaları kontrol edin. Hata yoksa Yayınla ismine tıklayarak Google’un bir sonraki site indexlemesinde verileri okumasını sağlayın.
18. Blog/Site, yazı yayınlarınızı yukarıda anlatılan şekilde her ay için tatbik ederek tüm site verilerinizi veri işaretleyici ile işaretleyin.

Yukarıda anlatılan konu hakkında sorun yaşarsanız yorumlar kısmından yardım alabilirsiniz. Blogger sitemizin 2014 yılı Ocak ayı veri işaretlemesini yaptık. Şu anda 2014 yılı Şubat ayı veri işaretlemesini sizlere kolaylık sağlaması için video’a alarak YouTube da yayınlayacağım. YouTube'a giriş yapamıyorum, video’u nasıl izleyeceğim diye düşünüyor iseniz!

YouTube nasıl giriş yapabileceğinizi buradan okuyabilirsiniz.

Blogger yazar, Webmaster arkadaşlar bu konuları bugün olmasada yarın mutlaka bilmeniz ve uygulamanız gerekmektedir.İş işten geçmeden bu konuları zamanında öğrenmeniz dileklerimle.

5/28/2014

Blogger Turuncu Renkli Sekmeli Widget

Blogger tema kullanıyor iseniz aşağıdaki kodu bularak açın. (Ctrl+F) Blogger, blog’unuz da sekmeli widget kullanıyor, sekme arka plan renginin siyah, sekmeye tıklandığında turuncu renge dönüşmesini düşünebilirsiniz.
Blogger tema kullanıyor iseniz aşağıdaki kodu bularak açın. (Ctrl+F) Blogger, blog’unuz da sekmeli widget kullanıyor, sekme arka plan renginin siyah, sekmeye tıklandığında turuncu renge dönüşmesini düşünebilirsiniz. Turuncu ve siyah renklerden oluşan sekme renkleri için şablonunuza küçük bir Css kodu ekleyerek bu değişimi yapabilirsiniz. Css kodlarını çok kısa sürede blogger şablon'unuza nasıl ekleyeceksiniz, bu kodları nasıl bulacaksınız soruları için ilgili konuyu aşağıdan adım adım takip ederek uygulamaya başlayın. 
Blogger temanızın önce bir yedeğini alın. Blogger tema yedeği nasıl alınır inceleyin.

Ayrıca okuyun ⇒ Blogger sekmeli witget eklentisi nasıl yapılır. Demo
Adım 1 :

]]></b:skin>
Blogger özel tasarım tema kullanıyor iseniz aşağıda verdiğim her iki kodu arayabilirsiniz. Bulacağınız kod Blogger Temalarında farklılık gösterdiğinden dolayı önce bu ismi aratın “ number page navigation “ Bu ismin hemen alt kısımlarında şu isimde kodlar göreceksiniz. (“ .tabs-widget “) Bu etiketi aşağıda şu şekilde yazarak da bulabilirsiniz. 
( tabs-widget )
Adım 2 :
1. Bulduğunuz kodlar sarı renk ile görülecektir.
2. İlk tabs, kodun baş kısmını maus işaretlecisi ile şeçerek aşağıya kaydırın ki diğer kodlar ile ekleyeceğiniz kodlar karışmasın. Sonra üst kısma çekerek hizalayabilirsiniz.
3. Şimdi en alt kısımda kodun bittiği tabs, kodun altında kalan kodlarıda aşağıya kaydırın.
4. İlk tabs ve son tabs kodlarını kopyalayın ve metin dosyasına yapıştırın. Her ihtimale karşı bu bir yedekleme yöntemidir. Bu yöntem ile Temanızı geri yüklemeden de kodları eski yerine alabilirsiniz. ( tabs-widget )
Adım 3 :
1. Blogger şablon kodlarınızda kodların yerini buldunuz, şimdidede aşağıdaki kodları bulduğunuz bu kodların olduğu yere yapıştırarak blog'unuzu kaydedin.

.tabs-widget{list-style:none;list-style-type:none;height:26px;margin:0 0 10px;padding:0;}
.tabs-widget li{list-style:none;list-style-type:none;float:left;margin:0 0 0 4px;padding:0;}
.tabs-widget li:first-child{margin:0;}
.tabs-widget li a{color:#E4C2B1;background:#343434;font-family:Arial, Helvetica, Sans-serif;font-weight:bold;display:block;text-decoration:none;font-size:12px;line-height:12px;padding:6px 16px;}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#ED7F46;color:#FFF;text-decoration:none;}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}
2. Blog’unuzu yeni sekmede açıp baktığınızda, sekmeli widget arka plan renginin Siyah diğer rengin Turuncu olduğunu göreceksiniz.  İsterseniz arka plan renklerini Hex color renk bulucuyu kullanarak onaltılık renkleri değiştirebilirsiniz.

Bu makaleleride okuyabilirsiniz → Blogger Sidebar Siyah Sekme Başlık Eklentisi

5/27/2014

Blogger Sekmeli Widget Eklentisi

Blogger, Klasik blogunuzda kullanabileceğiniz, blogger’un üç gadget eklentisini bir gadget sekmesinde birleştirip sidebar alanından yer kazandırarak kullanım kolaylığı sağlayan sekmeli widget eklentisi.
Blogger, Klasik blogunuzda kullanabileceğiniz, blogger’un üç gadget eklentisini bir gadget sekmesinde birleştirip sidebar alanından yer kazandırarak kullanım kolaylığı sağlayan sekmeli widget eklentisi. Blogger özel temalarda sıkca rasladığınız Popüler yayınlar, Etiketler, Arşiv, gadget modül seçeneklerini bir gadget içinde birleştirerek okuyucularınıza daha fazla seçenek sunacağınız yer sağlayabilirsiniz.
Blogger özel temalarda sıkca rasladığınız Popüler yayınlar, Etiketler, Arşiv, gadget modül seçeneklerini bir gadget içinde birleştirerek okuyucularınıza daha fazla seçenek sunacağınız yer sağlayabilirsiniz.
Eklenti kodlarını şablonunuza uyguladığınızda tek yapmanız gereken işlem ingilizce yazılı olan başlık isimlerini değiştirmektir.
Sekmeli Wigget Eklentisini blogunuza kurmak için yapılması gereken adımlar ;
Adım 1 :
Blog’unuzun önce yedeğini alın. Blogger şablon kodları içinde (Ctrl+F) aşağıdaki kod’u bulun.


]]></b:skin>
Yukarıda verilen etiketi bulduğunuzda aşağıdaki CSSkodlarını eksiksiz üst kısmına yapıştırın ve blog'u kaydedin. Tasarımı yapılan Sekmeli Wigget Eklentisini mevcut blog ile inceleyin.
Canlı DEMO (Farklı bir blog ile inceleyin)
Adım 2 : CSS Kodlarımız : CSS kodlarını üst kısma yapıştırın ve blog’unuzu kaydedin.
/* Tabview Section G59P Start-------- */
.tabs-widget{list-style:none;list-style-type:none;height:26px;margin:0 0 10px;padding:0;}
.tabs-widget li{list-style:none;list-style-type:none;float:left;margin:0 0 0 4px;padding:0;}
.tabs-widget li:first-child{margin:0;}
.tabs-widget li a{color:#FFF;background:url(http://4.bp.blogspot.com/-BUO29v0Vs90/Uw9eGbdS-BI/AAAAAAAALiA/I71etsx_nq4/s1600/tabs-widget-bg.png) left top repeat-x;font-family:Arial, Helvetica, Sans-serif;font-weight:bold;display:block;text-decoration:none;font-size:12px;line-height:12px;padding:6px 16px;}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(http://4.bp.blogspot.com/-BUO29v0Vs90/Uw9eGbdS-BI/AAAAAAAALiA/I71etsx_nq4/s1600/tabs-widget-bg.png) left -126px repeat-x;color:#FFF;text-decoration:none;}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}
.tabs-widget {height: 40px;}
}
/* Tabview Section G59P End-------*/
Adım 3 :
Özel tasarım şablon kullanıyor iseniz bulacağınız kod aşağıda verilmiştir.
<div id='sidebar-wrapper'>
Blogger’un Klasik blog şablonunu kullanıyor iseniz bulacağınız kod aşağıda verilmiştir.
<div class='column-right-inner'>
Blogger’un hangi tür şablonunu kullanıyor iseniz yukarıdaki kodu bulun. Bulduğunuz kod’un hemen altına aşağıdaki kodları ekleyin.
<div class='tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
       
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
                    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;); 
                    $(this).addClass(&quot;tabs-widget-current&quot;); 
                    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide(); 
                    var activeTab = $(this).attr(&quot;href&quot;); 
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Popüler</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Kategoriler</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Blog Arşiv</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'> 
<b:section class='sidebar' id='sidebartab1' preferred='yes'> 
</b:section>                                       
</div>                                                      
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'> 
<b:section class='sidebar' id='sidebartab2' preferred='yes'> 
</b:section>                                         
</div>                                                        
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'> 
<b:section class='sidebar' id='sidebartab3' preferred='yes'> 
</b:section>                                        
</div>
</div>
<div style='height:5px;clear:both;'/>
Adım 4 :
Özelleştirme :
1. Adım 2, içinde iki adet resim linki vardır. Resim linkinin yanındaki bağlantıyı kaldırarak aşağıdaki kodları ekleyip arka plan renklerini değiştirebilirsiniz.(Görünüm bozulduğundan tavsiye edilmez.)
Resim Linkleri yerine renk kullanmak isterseniz aşağıda verdiğim kodtan sonrasını silin ve hemen aşağıda verdiğim renk kodunu sildiğiniz yere ekleyin.Kodlar #C80000 ile başlayan pencere içindekilerdir.
Silinecek kodların olduğu bölüm bilgisi 1. Resim linki :
.tabs-widget li a{color:#FFF;background:url(http://4.bp.blogspot.com/-BUO29v0Vs90/Uw9eGbdS-BI/AAAAAAAALiA/I71etsx_nq4/s1600/tabs-widget-bg.png) left top repeat-x;font-family:Arial, Helvetica, Sans-serif;font-weight:bold;display:block;text-decoration:none;font-size:12px;line-height:12px;padding:6px 16px;} 
2. Resim linki : 
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(http://4.bp.blogspot.com/-BUO29v0Vs90/Uw9eGbdS-BI/AAAAAAAALiA/I71etsx_nq4/s1600/tabs-widget-bg.png) left -126px repeat-x;color:#FFF;text-decoration:none;}
2. Sildiğiniz her iki resim kodları yerine aşağıdaki kodları ekleyin. #C80000 resim rengini istediğiniz renk kodu ile değiştirebilirsiniz. Renk kodları için ayrıca burdan bakabilirsiniz.
#C80000;color:#fff;text-decoration:none} 
.tabs-content{background:#212121} 
3. Blogunuzu kaydedin ve Ana sayfanıza bakın.
4. Ayrıca siyah başlık sekme, mavi başlık sekme resim linklerini ilgili yazılardan alarak kullanabilirsiniz. Blog’unuzda tema tasarımı ile ilgili sorun mu yaşıyorsunuz. Menü başlık çubuğunda bulunan Tema Tasarım kanularından yardım alabilirsiniz.
Blogger klasik blog’unuzu kendiniz tasarlayın nasıl mı yapacaksınız ? Buradan giriş yaparak tüm ana sayfanızı kendi emeğiniz ile tasarlayarak zevkle kullanabilirsiniz.

5/26/2014

Blogger Eksik Update Veri Sorun ve Çözümü

Google web yönetici araçları kullanırken, yapılandırılmış veri “Eksik Update” hatasını mutlaka görmüşsünüzdür. Google, web site veri ve biçim sonuçlarını döndürebilmesi için yapısal veri Hentry, Hatom, BlogPosting schema.org araçlarını kullanmaktadır. Son zamanlarda bu konuya çok fazla önem verilmesinin nedeni arama sonuçlarında zengin snippet olarak bilinen blog başlık linki altında okuduğunuz yazınızın açıklamasıdır.

Update kelimesi, güncel veriler veya güncelleştirmeler anlamını ifade etmektedir. Yapılandırılmış veri ismine tıklayıp örneğin ; Hatom veri hatası yazı linkinizin hemen sağ tarafında hatalı öğe sayısı başlığı altında Eksik : Update (Missing : Update) hatasını görebilirsiniz.

Bu hatalar, Blogger Url’nizin sonuna eklenen .tr ek’inden sonra sıkca ortaya çıkmaya başladı. Blogger şablon yapılandırmasındaki yenilikler ile eklenen kodları da düşünürsek bizlerin hatası olmayan, blogger’un şablonlara ekledikleri kodların değişim göstermemesi hata oranlarının yükseltmesi için yeterli neden oldu. Google web yönetici araçları, yapılandırılmış veri hatasında gördüğünüz Eksik : Update ifadesininden hareket ederek şablonumuzda blog post biçimini  kontrol edebileceğimiz bir kod uygulamasını gerçekleştireceğiz. Şablonunuza ekleyeceğiniz kod Blogger sunucuları ile blog şablonlarımız arasında bir köprü oluşturacak. Bir haftadır denediğim bu uygulama ile test ve diğer bloglarımdaki Eksik : Update kelimesini ortadan kaldırarak normale döndürdüm.Sizde blog’unuza uygulayarak eksik güncelleme yazısını düzenleyebilirsiniz.
Ayrıca inceleyin ⇒




Blogger Web Sayfanızı Hızlandırın
 
Eksik Update hata ismini yok etmek için yapılacak işlemler :
1. Blog'unuzun bir yedeği alın. Blogger kumanda panelinize giriş yapın.
2. Şablon → Html’yi düzenle ismine tıklayarak şablon kodlarınızı açın.
3. Ctrl+F araması ile aşağıdaki kod'u bulun.
<data:post.timestamp/>
4. Bulduğunuz bu kotdan iki adet olması gerekiyor. Her iki kodu da aşağıdaki kodlar ile değiştirin.
Uygulamamızı yapmadan önceki, Web araçlarındaki Hata: Missing required field "updated", Hata: Eksik gerekli alan "güncellenmesi".
<span class='updated'><data:post.timestamp/></span> 
5. Aşağıdaki resimde gördüğünüz gibi, her iki alana kodları eklediğimizde Hata: Missing required field "updated", mesajının kaybolduğunu görüyorsunuz. Bu konudaki önerileriniz varsa yorum yazmaktan çekinmeyin. Yeni hata ve çözümlerde görüşmek üzere.
Resimde gördüğünüz ( Hata: Missing required field "updated"), mesajımız yok oldu.

⇒ Ayrıca Eksik: Yazar Author Hcart veri bilgilerinizde düzeltebilirsiniz.

Blogger hCart yapısal veri hata sorunu

Blogger hCart yapısal veri  hatası nasıl çözülür ?
Google webmasters, yapılandırılmış veri araçlarını kullanırken “Eksik Update”, “Eksik Author”, hatom, Hentry, BlogPosting bağlantılarına tıkladığınızda hCart yazar (Author) hatasını görmüşsünüzdür. Blogger’un blog şablonlarında uyguladıkları değişimlerden sonra sıkca bu hata mesajlarını görüyoruz. Belki kısa bir süre sonra düzelecek veya düzelmeyecek bu konuya kesin cevap vermek çok zor. Türkiye de Google’un, Blogger’u kısa süre önce .TR uzantısına geçirmesi, blogger şablonlarına eklenen yapısal veri işleme kodları ve blogger ile mobil araçların uyumluluk durumunun getirdiği kadar götürdüğünü görüyoruz.

Google arama sonuçlarında daha iyi sonuç alabilmesi için veri aracı olan schema.org’i kullanmaktadır. Bu durumun kısaca anlamı, arama sonuçlarında zengin snippet olarak bilinen blog başlık linki altında okuduğunuz yazınızın açıklamasıdır. Yapılandırılmış veri bağlantısını incelediğinizde, Hatom veya diğer veri türleri bağlantı linkinizin hemen sağ tarafında hatalı öğe sayısı başlığı altında Eksik : Update (Missing : Update) veya Eksik : author (Missing : author) hatasını görebilirsiniz.
Ayrıca Okuyun ⇒
Site İçin Yapısal Veri İşaretleme
Blogger Eksik Update Veri Sorun ve Çözümü
Blogger Eksik Update Veri Sorun ve Çözümü konusunu 24 Mayıs 2014 tarihinde yazılarıma ekleyerek yapılmasını gerekenleri anlatmıştım. Test blog’umda yaptığım kontroller sonucunda, hCart olarak bilinen aslında blog şablon kodlarınızda bulunan vCart yazar (Author) sorununu nasıl çözebilir aşağıda inceleyeceğiz.

Blogger hCart yazar sorununu çözmek için ;
1. Blog yedeğinizi alın.
2. Şablon kodlarınızı açın Ctrl+F ile aşağıdaki kodu bulun.

<span class='post-author vcard'> 
3. Bu koddan iki tane olabilir, alt kısmında label ismi olmayan aşağıdaki gibi kodlar olması gerekir. Kesinlikle kodları takip edin aşağıdaki kodlara benzer. Başlangıç ve bitiş.
<span class='post-author vcard'>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn'>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <data:post.author/>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn'><data:post.author/></span>
                  </b:if>
                </b:if>
              </span> 
4. Kodları değişmeden önce alınan hataların aşağıda resmini inceleyin.
update ve author hataları
5. Aşağıda verilen kodları yukarıda işaretlenen kodların yerlerinden seçerek yapıştırın ve blog’u kaydedin. Kod değişiminden sonraki hataların düzelmiş resim görüntüsü aşağıda.
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
 <b:if cond='data:post.authorProfileUrl'>
   <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
  <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
  <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
    <span itemprop='name'>
   <data:post.author/>
    </span>
  </a>
   </span>
   <b:else/>
   <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
  <span itemprop='name'>
    <data:post.author/>
  </span>
   </span>
 </b:if>
  </b:if>
</span>
6. Yukarıda ayrıca okuyun yazısı ve aşağıdaki uygulamayı yaptığınızda hataların kalmadığını göreceksiniz. Web araçlarındaki hataların kalkması birkaç günü bulabilir hatırlatmak da fayda görüyorum. 
Yapısal veri test aracında görülen diğer hataların kaldırılması :
1. blog Id
2. post Id
3. image_url
1 ve 2. maddedeki hataları yok etmek için önce aşağıda verilen kodu bularak sileceğimiz kodun yerini saptayalım. (Ctrl+F)

<meta expr:content='data:blog.blogId' itemprop='blogId'/>
Blog ve Post Id hatalarını sıfırlamak için aşağıdaki (blog Id) yazan kodu bulun bulduğunuz bu kodu ve hemen altında (postId) kodunu da göreceksiniz. Her iki kodu silin. Şablonunuzdaki kodların görünümü.

<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
Şablonunuz kod arama penceresinde arattığımız kodu enterleyin aynı kodları göreceksiniz bu kodlarıda yukarıda anlatıldığı şekilde silin ve blog'u kaydedin.
3. madde image_url hatasının giderilmesi için aşağıdaki kodu bulun.Bu kodu silerek hemen alt kısımdaki kodları bu kodun olduğu yere yapıştırın.
Bu kodu bulun ;
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/> 
Bulduğunuz bu kodu silerek aşağıdaki kodu ekleyin.
<meta expr:content='data:post.firstImageUrl' itemprop='image'/>
Yukarıda gördüğünüz kod içindeki (_url) kodunu silerek gerekli düzenlemeleri yaptınız. 
Blog’unuzu kaydedin. Şimdi veri araçlarında inceleme yaptığınızda hataların yok olduğunu göreceksiniz.
Sonuç :
Eksik Update, Eksik Author, blog Id, post Id, image hataları giderilmiş oldu. Daha fazla bilgi için menü çubuğunda Web Araçları, Seo konularını inceleyebilirsiniz.