Breadcrumb eklentisi SEO açısından büyük önem arz etmekte. Peki Blogger altyapısını kullanan bir bloga nasıl breadcrumb eklentisi kurulur? Bu yazıdan sonra nasıl yapıldığını öğreneceksiniz.
Peki breadcrumb nasıl bir şey?
Breadcrumb eklentisi sitenizin her konu başlığında bulunan kategorili bir link bağlantıları kümesidir.
Örneğin sayfanızın içerik kısmının başında şöyle bir görünüm oluşturur.
Site Adı » Kategori » Konu Başlığı
Breadcrumb eklentisinin yararları nedir ?
» Ziyaretçiler için kullanım kolaylığı olur.
» Sitenizin SEO'su açısından yararlıdır.
» Site üzerinde gezinme kolaylaşır.
» Sayfa üzerinde organize bir görünüm verir.
Breadcrumb eklentisini Blogger'a kurma işlemi
Not: Herhangi bir sorun olma ihtimaline karşı, kurma işlemini yapmadan önce temanızın yedeğini almayı unutmayın.
Not: Herhangi bir sorun olma ihtimaline karşı, kurma işlemini yapmadan önce temanızın yedeğini almayı unutmayın.
İlk önce CSS kodumuzu blogger temamızın kodları arasına yapıştıralım. Şablonu düzenle kısmından tema kodlarını açın ve kodlar içinde arama yapmak için ctrl+f yaparak </b:skin> kodunu bulun. Bulduğunuz kodun öncesine aşağıdaki CSS kodunu yapıştırın.
.breadcrumbs{background-color:#fff;padding:6px;text-align:left;font-size:12px}
Bu işlemi yaptıktan sonra <b:includable id='main' var='top'> kodunu ctrl+f ile aratıp bulun. Daha sonra aşağıdaki kodları aradığımız kodun öncesine gelecek şekilde yapıştırın.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'><data:blog.title/></a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> » <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Kategorisiz
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> » <data:blog.pageName/> Arşivi
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> » Tüm Yazılar
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> » <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Bu işlemi de yaptıktan sonra <div class='blog-posts hfeed'> kodunu üsttekilerle aynı şekilde aratın ve koddan sonra gelen kısma aşağıdaki kodu yapıştırın.
<b:include data='posts' name='breadcrumb'/>
Bu işlemi de halletiysek şablonu kaydedin ve artık breadcrumb eklentisi blogunuza kuruldu. Ancak tam anlamıyla Google arama motorlarında görünüm değişmesi zaman alacaktır. Herhangi bir sorun olursa aşağıya yorum atarak bildirebilirsiniz.
