Breadcrumb Blogger a Nasıl Eklenir

Blogunuzu yazarken eminim bir hiyerarşi yapısı  kullanıyorsunuzdur.Örneğin bu blogda olduğu gibi Home>>>Bloggeriucları>>>Blogger a Breadcrumb Nasıl Eklenir.Tabii bu yapıyı blogunuzu ziyaret edenlerle paylaşarak onlara şu an blogun hangi kısmında yer aldıklarını gösterebilirsiniz.Bu sayede blogunuzu ziyaret edenler bir ksımdan başka kısıma rahatlıkla hareket edebilecekler.Ayrıca blogunuzu bu şekilde yapıya dönüştürmek arama motoru optimizasyonu için de blogunuza fayda sağlayacaktır.

Aşağıdaki resimden blogunuzda nasıl bir değişiklik yapacağımızı görebilirsiniz:

Şimdi gelelim nasıl ekleyeceğimize:

1)Blogger hesabımıza giriş yapıyoruz.

2)Design>>>Edit Html kısmına gelerek aşağıdaki kodu aratıyoruz:

]]></b:skin>

Yukarıdaki kodun hemen üzerine aşağıdaki kodu yapıştırıyoruz:

.breadcrumbs
{
float: left;
width: 590px;
font-size: 11px;
margin: 5px 10px 20px 10px;
padding: 0px 0px 3px 0px;
border-bottom: double #EAEAEA;
}

3)Daha sonra aşağıdaki kodların olduğu kısmı arıyoruz:

<b:includable id='main' var='top'>
< !-- posts -->
< div class='blog-posts hfeed'>
< b:include data='top' name='status-message'/>
< data:adStart/>

3. adımdaki  kodun tamamını aşağıdaki kodla değiştiriyoruz:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on front page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</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>
» <span><data:post.title/></span> </b:if> </b:loop> </div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> </div> <b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
Posts filed under <data:blog.pageName/>
</b:if> </div> </b:if> </b:if> </b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- disable default status message
<b:include data='top' name='status-message'/>default status message disabled -->
<b:include data='posts' name='breadcrumb'/><data:adStart/>

Şimdi şablonunuzu kaydedin.Hepsi bu kadar !!!

Herhangi bir yazı sayfanızı ziyaret edin.Değişikliği göreceksiniz.

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

6 yorum:

  1. Tam bunu arıyordum.Teşekkürler

    YanıtlaSil
  2. Ben yaptım ama hiçbir şey gözükmüyor yazı sayfasının üstünde.

    YanıtlaSil
    Yanıtlar
    1. yazı sayfasını ziyaret ettiniz değil mi?
      Ayrıca kodları doğru bir şekilde eklediğinize emin olun.Blogger herhangi bir hata veriyor mu?

      Sil
  3. Yok, Blogger herhangi bir hata vermedi. Kodları ekledim ardından yazı sayfalarımdan birine baktım ama olmadığını gördüm ve kodları sildim. Acaba sorun temada mı yoksa kodlarda mı?

    YanıtlaSil
  4. merhaba . 3. adımda ki satırları bulamıyorum

    YanıtlaSil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.