Adding page navigation to your posts is a good way to engage visitors as well as search engine crawlers. Navigation helps readers to easily access any page with ease. Breadcrumb navigation is used to enhance readability and usability. This type of navigation is like breadcrumbs which ultimately reach at the home URL.

In this type the navigation has a back-end or a connection with home page like home/label/post.Bread crumb navigation can be added to the blogger template easily and successfully.

Step : 1

Go to blogger Dashboard and edit HTML. Then you need to do what i have explained in the following steps. Do not remove the HTML tags or CSS tags instead of replacing them with suitable ones. You may need to adjust the margin and padding of the gadget according to your template. If you are having any difficulty in editing HTML tags, do not hesitate to give me message. You can contact me anytime.

Step 2. Find the following piece of code (ctrl+f).


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


Step 3. Now Replace it with this code


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

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

Step 4. Find the following piece of code in your blogs Html    

<b:includable id='main' var='top'>
Step 5. Now Replace It With This Code


      
<!-- Breadcrumb Navigation By http://www.shipmethis.com/ -->

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'>
 <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pagename/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
 <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
 <b:loop values='data:post.labels' var='label'>
 <b:if cond='data:label.isLast == "true"'>
 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
 </b:if>
 </b:loop>
 » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'>
 <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span>
</div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pagename/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
 <b:if cond='data:blog.pageName == ""'>
 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
 <b:else/>
 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pagename/></span>
 </b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<!-- Breadcrumb Navigation By http://www.shipmethis.com/ -->

Step 6. Find the following piece of code

    ]]></b:skin>


Step 7. Now ADD BELOW Code above  ]]&gt;&lt;/b:skin&gt; tag.

    /* Breadcrumbs Css info @ http://www.shipmethis.com/ */
    .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:95%;
    line-height: 1.4em;
    border-bottom:3px double #e6e4e3;
    }
  
or you can use the following css
/* Breadcrumbs Css info @ http://www.shipmethis.com/ */ 
.breadcrumbs {background: #F7F7F7;float: left;border: 
1px solid #E6E6E6;width: 575px;font-size: 11px;margin: 10px 10px 10px 10px; 
padding: 5px 10px 5px 10px;}

Step 8. Save your template.

The CSS code is needed to show the bread-crumb navigation on all blogger posts. You can customize the gadget according to your template.  To change the color replace the "#e6e4e3" code to any color code.

...Kindly tweet this post if you like it...

My new post is How-to-create-free-backlink-booster-for blogger template

SUBSCRIBE US FOR MORE GOOD GADGETS

 11


Comments || >