Blogger Sayfa İçi Navigasyon Eklentisi(Navbar)

Arkadaşlar Merhaba; Blogger sayfa içi navigasyon eklentisi ( navbar ) ' sini sizin için anlattım.

Bu Eklentinin Amacı Nedir ?

Kısaca anlatacak olursak; Bloğumuzu gezen ziyaretçilerin, blog içinde hangi kategoride, hangi yazıda olduğunu kolayca görebilmelerini sağlayan basit bir eklenti.
Özellikle fazla kategoriye ve alt menüye sahip bloglarda oldukça faydalı.

Nasıl Kurabilirim ?

• Blogger kontrol paneline giriş yapıyoruz.
• Sol tarafta bulunan Şablon sekmesine tıklıyoruz ve açılan sayfadaki " Html Düzenle " butonuna tıklıyoruz.
• Açılan kod penceresinin boş bir kısmına tıklıyoruz ve " ctrl+f " yardımıyla aşağıdaki kodu buluyoruz.

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

Hemen üstüne aşağıdaki kodu ekliyoruz.

<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>

Daha sonra tekrar aşağıdaki kodu (ctrl+f) kombinasyonuyla buluyoruz. 

<div class='blog-posts hfeed'>

Ve hemen altına aşağıdaki kodu ekliyoruz.

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

Son olarak tekrar aşağıdaki kodu buluyoruz.

]]></b:skin>

Ve hemen üstüne aşağıdaki kodu ekliyoruz.

.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}

Bütün işlem bu kadar. Hayırlı Olsun .)

Çalışmaması durumunda ; Yukarıda anlattığım bütün adımları eksiksiz bir biçimde yaptığınızda eklentide sorun oluyorsa; " <div class='blog-posts hfeed'> " kodunun bloğunuzda birden fazla olmasından dolayı. 
Çözümü : " <div class='blog-posts hfeed'> " kodunu html düzenle bölümünden aratın ve yerine " <b:include data='posts' name='breadcrumb'/> " kodunu ekleyin.Sorun çözülecektir.

Dipnot

Bu yazı 14 Eylül 2017 Perşembe günü Unknown tarafından yazılmıştır. Güncel yazılarımızı RSS 2.0 sistemini kullanarak takip edebilir, dilerseniz bu konu hakkındaki düşüncelerinizi yorum bölümünü kullanarak bana ve değerli ziyaretçilerime iletebilirsiniz.