Blogger Breadcrumbs Navigasyonu Ekleme

Blogger Breadcrumbs Navigasyonu Ekleme - Bu yazımızda blog sitelerine breadcrumbs navigasyonu nasıl ekleneceği konusunda küçük ipuçları hakkında bilgi vereceğim. Peki bu breadcrumbs nedir, blog sitelerinde ne işe yarar? Öncelikle bu soruları kısaca cevaplayalım;

Blogger breadcrumbs, blog sitelerinin alt kategorilerinden oluşan yapının daha hızlı gezinme sağlaması için bir veri işaretleyicisidir. Breadcrumbs işlevlerinde blog SEO yapısı için önemli bir işlevi bulunuyor. Bu blogcular ve kullanıcılar tarafından görülmeyen ve blogun yapısını hakkında Google botlarına yol tarif eden bir görevi olduğunu söyleyebiliriz. Böylece blogunuzun daha düzenli indeks alması ile ziyaretçilerin gezinme alışkanlığı da o kadar basitleşmektedir. Tabi bu da Google botları tarafından artı olarak işaretlenir ve Google blogunuza bir ödül daha vermiş olur.

E-ticaret sitesi olanlar breadcrumbs özelliğinden çok faydalanırlar. Çünkü çok sayıda kategori ve alt kategori içeren e-ticaret sitelerinde gezinme yerlerini göstermesi ile kullanıcılara çok yardımcı olur. Bu sadece e-ticaret yada Web siteleri için değil blog siteleri için de çok faydalı olduğunu söylemek için bu açıklamayı yaptım.

Blogger Breadcrumbs Nasıl Kullanılır?

Ana Sayfa » Kategori Adı (Yani Etiket) » Sayfa Adı

Blog sayfa ve yayınlarını bu şekilde kategorize edildiğinde, Google arama sonuçlarında da bu şekilde görünecektir. Kullanıcılar blog yayınlarınızın bulunduğu kategoriye de ulaşmak istemesi durumunda, breadcrumbs veri işaretleyicisini blogunuzda kullandığınızda yayınların bulunduğu kategoriye ulaşmak için de bu navigasyonu kullanabilir. Bu nedenle blogger breadcrumbs blogunuzda çok kullanışlı olacaktır.

Blogger Breadcrumbs Faydaları

Blogunuza breadcrumbs eklemenin avantajları, blogunuzun sayfa görüntülenme sayısını artırır ve blogunuzdaki dahili bağlantıları geliştirir. Breadcrumbs blogunuzun iç stratejisini oluşturur; kategorileri, yayınları, arşiv bağlantılarını ve ilgili yayınları yayınlara bağlayan yapısal veri aracıdır. Bu nedenle breadcrumbs özelliğini blogunuza eklemeniz gerekiyor.

Blogger Breadcrumbs Nasıl Eklenir?

Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Şablon > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör (şablon kodları) sayfasını açın.

1- Aşağıdaki CSS kodları eklemek için, şablon kodları sayfasında CTRL+F yardımı ile ]]></b:skin> yada </style> kodunu bulun ve CSS kodlarını ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin.

/* Blogger Breadcrumbs */
.breadcrumbs {
    background: #fff;
    color: #444;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-weight: 700;
}
.breadcrumbs a {
    color: #000;
    margin: 0 2px;
    line-height: normal;
}
.breadcrumbs .breadhome a {
    margin: 0 5px 0 0
}
.breadcrumbs .breadlabel:last-child {
    margin: 0 0 0 4px
}
.breadcrumbs a:hover {
    color: #2e9fff;
}

2- Blogger breadcrumbs navigasyonunu eklemek için aşağıdaki HTML kodu bulun ve bu koddan sonraki bölüme blogger breadcrumbs HTML kodunu ekleyin.

<b:includable id='main' var='top'>...</b:includable>

Aşağıdaki HTML kod örneğinde olduğu gibi blogunuzda bu HTML kod aralığını bulun.

<b:includable id='backlinks' var='post'>...</b:includable>
<b:includable id='breadcrumb' var='posts'>...</b:includable>
<b:includable id='comment-form' var='post'>...</b:includable>

Eklemeniz gereken breadcrumbs HTML kodları aşağıdadır. Bu kodları yukarıdaki örnekte olduğu gibi blogunuza ekleyin.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span class='breadhome'><a expr:href='data:blog.homepageUrl' rel='tag'>Ana Sayfa</a>&amp;#187;</span><span class='breadlabel'><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span class='breadhome' typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Ana Sayfa</a>&amp;#187;</span>
<b:loop values='data:post.labels' var='label'>
<span class='breadlabel' typeof='v:Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;amp;max-results=7&quot;' property='v:title' rel='v:url'><data:label.name/></a> &amp;#187;</span>
</b:loop>
<span class='breadlabel'><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span class='breadhome'><a expr:href='data:blog.homepageUrl' rel='tag'>Ana Sayfa</a>&amp;#187;</span><span class='breadlabel'/><span class='breadlabel'><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
<span class='breadhome'><a expr:href='data:blog.homepageUrl'>Ana Sayfa</a>&amp;#187;</span><span>Arşiv<data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span class='breadhome'><a expr:href='data:blog.homepageUrl'>Ana Sayfa</a>&amp;#187;</span><span class='breadlabel'>Tüm yayınlar</span>
<b:else/>
<span class='breadhome'><a expr:href='data:blog.homepageUrl'>Ana Sayfa</a>&amp;#187;</span><span class='breadlabel'>Yayınlar yayınlandı.<data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

3- Şablonu kaydedin ve breadcrumbs blogunuza düzgün eklendiğinden emin olmak için Google Yapısal Veri Test Aracı'nı kullanabilirsiniz.

Blog sitesine breadcrumbs navigasyonu ekleme ile ilgili bilgileri sizinle paylaşmaya çalıştım, bu anlattığım bilgilerin blog sitenize çok faydalı olduğunu blogunuzda görebilirsiniz. Bu yayın ile ilgili görüş ve önerileriniz için yorum bırakabilirsiniz.