Learn More

Monday, September 24, 2012

Breadcrumb Menu For Blogger Version 2

breadcrumb menu for blogger
As we have explained earlier to you via breadcrumb menu for blogger version 1. That one of the requirements of the google webmasters (and SEO in general), the breadcrumb is a menu of the most favored by search engines. Because more systematic and hierarchy. If you have used the breadcrumb navigation of us (and we thank you), breadcrumb menu will be successful in the post with a label. If you apply more than one label on each of your posts, then the breadcrumb menu will only display the last label.

Of course it is very unpleasant and do not reflect the complete your post. To that end, we make improvements in this breadcrumb navigation widget, so it can display the entire label on your post. This is the second version, this version can make your posts very SEO friendly. All you have to do is simply to find the following code

<b:include data='top' name='status-message'/>

Then, put the following code before the code above. 

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

The next step, look for the following code 

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

Then put the code below before the code above

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'> 
<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'>Home</a> &#187;
<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;'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:else/>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>,
</b:if>
</b:loop> 
<b:else/>
&#187;No Label
</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'>Home</a> &#187; Archives for <data:blog.pageName/> 
</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'>Home</a> &#187; All Older Posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; List Of Posts On <data:blog.pageName/> 
</b:if>
</span>
</p> 
</b:if> 
</b:if>
</b:if>
</b:if>
</b:includable>

The next step, place the following CSS code before]]></ b: skin>

.breadcrumbs {
padding:6px 6px 6px 2px;
margin: 0px 0px 13px 0px;
font-size:98%;
line-height: normal;
border-bottom:3px solid #e6e4e3;
}

If you want to design your own style breadcrumb menu, you can change the CSS code above.

  1. ada... silahkan cari http://www.threelas.com/search/label/Blogger%20Template sedangkan template berbasis responsive... artinya bisa menyesuaikan dengan ukuran device belum bisa di download secara gratis... anda bisa memesan kepada kami desainnya... harganya cuma 100ribu atau $10

    ReplyDelete
  2. Drop down menu not crawling by spider(Search engine robot)

    ReplyDelete
  3. hi sir i want you to show us how to make read more script work with bootstrap im very interested about that
    or if you can give me your template to understand how can i make bootstrap work with blogger

    ReplyDelete
  4. mbak knapa blog saya masih belum bisa utk equation???

    ReplyDelete
  5. bisa diberitahu apa saja yang sudah anda terapkan? misalnya peletakkan script mathjax dan penulisan equation latex? coba kirimkan cuplikan kodenya

    ReplyDelete