English French German Spain Italian Dutch Russian Brazil Japanese Korean Arabic Chinese Simplified
Translate Widget by Google

How to make a spinning label cloud

How to Make a Label Tag Cloud Spins - You must be very familiar with the label right? Labels are grouping blog posts in one category, and then usually in pairs or perhaps in the sidebar at the bottom of the template.

How to prevent others from copy-paste the site content

Nowadays blogger/programmers, not all of them are very kind/polite on doing their script/programme. Some of them just copy and paste and then edit theresome, and then, they say that the programme are theirs.

How to make Handy Translator

Is this what you guys wanted to?? This is such an handy translator compatible for blogger, that might want to appreciate their reader/customer/client that come from other country .

How to make a Sitemaps Categorized by Date

As time passed, many script writers / programmers make a good script. Today, I'm going to share my knowledge about sitemap.

Energy Saver

The script will automaticly deem out your screen when you "Do Nothing" at the webpage. Just like mine, I did it to this blog (http://scripterzone.blogspot.com).

Tuesday, 16 July 2013

How To Add Breadcrumbs in Blogger?

Breadcrumb - is the navigation trail which tells about visitor's location on your site or blog. Means it helps to understand the visitor or reader that at which location of your blog they are. It is used to create a user friendly website where they can easily visit your blog pages without any problem. 

There are numberless benefits of using breadcrumb trail in blogs. It also helps to increase your site exposure in search engines by adding keywords into your blog posts. For example if you a write post on how to submit blogger sitemap in Google and tag it with the label name SEO then it will create a navigation trail at the top of your post title as below.


Note: Please backup your blog template before adding breadcrumb navigation in your blog.

Now follow below steps:
  1. Go to Dashboard ->> Template ->> "Edit HTML"
  2. Click "Proceed" and make sure you check the box to "Expand Widget Templates"
  3. Now press Ctrl+F and search for below code
  4. <b:include data='top' name='status-message'/>
  5. Replace that code with the below one.
  6. <b:include data='top' name='status-message'/>
    <b:include data='posts' name='breadcrumb'/>
  7. Now, find this code in your blog template
  8. <b:includable id='main' var='top'>
  9. Replace it with the below code.
  10. <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'>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>
    <b:else/>
    »Unlabelled
    </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'>Home</a> » Archives for <data:blog.pageName/>
    </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'>Home</a> » All posts
    <b:else/>
    <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
    </b:if>
    </span>
    </p>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:includable>
    <b:includable id='main' var='top'>
    <!--Breadcrumbs by http://softwaresurf.blogspot.com/-->
  11. Now, Find ]]></b:skin> and paste the below code just above/before it.
  12. /* Breadcrumbs by http://softwaresurf.blogspot.com/ */
    .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:95%;
    line-height: 1.4em;
    border-bottom:3px double #e6e4e3;
    }
  13. Save template
  14. YOU ARE DONE!!