Blogger Breadcrumb Navigasyon Eklentisi

Bu yazımda blogunuza breadcrumb eklentisini nasıl kurabileceğinizi anlatacağım.Öncelikle breadcrumb eklentisi nedir bundan biraz bahsedelim.Blogger Breadcrumb Eklentisi blogunuzda konuları inceleyen kişiye o an nerede olduğunu (Ana Sayfa > Kategori > Konu Başlığı) şeklinde gösteren bir blogger eklentisidir.



Eklentiyi blogunuza kurmak için aşağıdaki kod ekleme işlemlerini uygulamanız yeterli olacaktır.


Öncelikle Eklentiyi kurmak için blogunuzun yenilenen blogger html editörünü açın.


İlk olarak aşağıdaki kodu bulalım.

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

Bulduğumuz bu kodun hemen üzerine aşağıdaki kodu ekleyelim.

<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 == &quot;item&quot;'>
<!-- 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 == &quot;true&quot;'> &#187; <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
&#187;Kategorisiz
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- 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> &#187; <data:blog.pageName/> Arşivi
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#187; Tüm Yazılar
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#187; <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Kodları ekledikten sonra aşağıdaki kodu bulalım.

<div class='blog-posts hfeed'>

Bulduğumuz bu kodun hemen altına aşağıdaki kodu ekleyin.

Bulduğumuz bu koddan blogunuzda birden fazla bulunabilir.İlk bulduğunuz kod üzerinden işlem yapın.

<b:include data='posts' name='breadcrumb'/>

Ve son olarak aşağıdaki kodu bulun.

]]></b:skin>

Bulduğunuz bu kodun hemen üzerine aşağıdaki kodu ekleyin.

.breadcrumbs{background-color:#fff; 
border-radius:5px;  
-webkit-border-radius:5px;  
-moz-border-radius:5px;  
border:1px solid #ddd; margin-top:5px; padding:10px; border-bottom:2px solid #ddd;
text-align:left;
font-size:11px}

Kod ekleme işlemlerini tamamladığınızda şablonu kaydet diyerek işlemi bitirin.Yapamadığınız birşey olursa yorum formunu kullanarak bize sorabilirsiniz.İyi bloglamalar.


Alıntı