How to add a simple Breadcrumbs navigation in your blogger blog?

Breadcrumbs are one way that you can use to navigate your blogger blog easily. 

Breadcrumbs help readers to navigate your blog post and let them to easily surf through your blogger post pages. Breadcrumbs show navigation of your blogger from your homepage to the current blogger post page. Breadcrumbs navigation displays your blogger Homepage, post labels or categories as well as your blog post title. 

Not only navigate also Breadcrumbs with Markup will help to improve your blog site snippet in Google. So Breadcrumbs is a very useful widget for our blog like breaking news bar, related post widget, recent post widget and back to top button widgets those we discuss in previous posts.

What is Breadcrumbs?

Breadcrumbs are a navigation element used to show the location of the current page with respect to the blogger home page. Breadcrumbs allow your readers to keep track of the location of your current blog post on your blog site. It displays links from homepage, labels or categories to your blog post title. If your blogger has a lot of categories with subcategories Breadcrumbs will be very helpful. Its appear horizontally across the top of a blog post page above the post title.

Let take an example,

If you are publishing a post, your Breadcrumbs look like this;

Home page > Label/category of page > Sub Label/sub category of page > Sub Label/sub category of page > your post title

Benefits of adding Breadcrumbs in your blogger blog

·         Help to navigate your site

·         Help to easily identify your post page locations, its categories

·         Increase your blog page views

·         Improve your site’s internal links

·         Improve your site SEO

·         Improve your site snippet in google

·         Reduce your bounce rate

·         Easy to track back to related category or homepage

Most of the time Breadcrumbs not available in blogger template so we need to add it into our blog site. also if you interest to edit your current Breadcrumbs this article may be useful for you. Let see,

How to add simple looking Breadcrumbs navigation in your blogger?

Step 01: Sign in to Blogger blog

Step 02: Go to Dashboard >> Template>> click HTML button

Step 03: Now find <data:post.body/>  (if not find <div class='blog-posts hfeed'> )

Step 04: Copy below code and paste above the <data:post.body/> code (Or below <div class='blog-posts hfeed'> [if there are two code place below first code]).

*If you like to edit your current Breadcrumbs, then find <div class='breadcrumbs'> or <div class=' breadcrumb '> and replace your current breadcrumb code with below code. 

<div class='breadcrumbs'>

<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a class='homex' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>

»

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>

<a expr:href='data:label.url' itemprop='url' rel='tag'><span itemprop='title'><data:label.name/></span></a></span>

<b:if cond='data:label.isLast != "true"'> » </b:if>

</b:loop>

<b:else/>

»Unlabelled

</b:if>

</b:loop>

 </div>

*If above code not working or you want to add page title to Breadcrumbs, then replace above code with below code. 

<nav id='breadcrumb'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>

<div class='breadcrumbs'>

<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>

<span itemprop='title'>Home</span></a>&#187;

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<span typeof='v:breadcrumb'>

<a expr:href='data:label.url' itemprop='url' property='v:title' rel='v:url' title='Categories'>

<span itemprop='title'><data:label.name/></span></a></span>

<b:if cond='data:label.isLast != &quot;true&quot;'>&gt;

</b:if></b:loop></b:if>

&#187;

<a expr:href='data:post.url' itemprop='url' title='Post Title'>

<span itemprop='title'>

<data:post.title/>

</span></a></div></div></b:if></nav>

Step 05: Now find  ]]></b:skin>  and copy and paste below code before or above ]]></b:skin>  code.

. breadcrumbs {

padding:5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:90%;

line-height: 1.4em;

border-bottom:3px double #e6e4e3;

font-weight:bold;

}

Step 06: Save your template

 OK. Now Breadcrumbs has enabled in your blogger blog. Check it and see the results.

That will help your readers to navigate your blog posts and its locations. Not that it will also help you to increase blogger SEO. 

I Hope the above 17 tips help you to add a simple Breadcrumbs navigation in your blogger blog. And if you have any problem or know more fixes on this simple Breadcrumbs navigation for blogger blog, Please share with us in the comments section below. Happy blogging!

How to add recent post widget with Thumbnails or without Thumbnails or stylish widget into your blogger blog?

Adding recent post widget with Thumbnails or without Thumbnails or with style into your blogger blog can be helpful for you in different ways.

By adding recent post widget into your blogger blog you can get a lot of benefits. If you are thinking it is not necessary to add related posts to your blogger blog, then you are wrong. By displaying related posts in your blogger blog You can easily keep your readers engaged with your blogger blog, also it helps them to easily navigate with your blogger related posts links those you have recently written. 

If your blogger blog homepage has a lot of labeled grids or its posts published as the label or category wise then readers cannot identify what are your recent posts, so if you add that recent post widget into your blogger blog it will help your readers to identify your recent post among the other posts in your homepage. So your readers can find what’s new on your blog.

Recent post widget is the very useful widget for our blog like breaking news bar, related post widget, Breadcrumbs navigation and back to top button widgets those we discuss in previous posts.

What are the recent posts?

Recent posts are latest or recent published posts those related to your current reading posts. It displays base on the latest date of the post published in your blogger blog. latest posts are in the top and old post going to down or below the latest posts. So readers can easily find your recent posts quickly among the previous articles in your blogger blog.  

That recent post widget helps you to display your latest posts on your blogger slide bar or footer. There is a different type of recent post widgets. Some will display only post titles, some will display recent post title with image thumbnails or some will display recent post title with image thumbnails with post summary, publish date and amount of post comments.

Below are some benefits of adding recent post widget to your blogger. 

·         Improve blog site performances

·         Improve blog traffic

·         Improve internal links

·         Decrease your blog bounce rate

·         Improve your page views

·         Improve user interaction

·         Improve user experience and improve blogger SEO

·         Readers can quickly identify your latest posts

How to add recent post widget with Thumbnails or without Thumbnails or with stylish into your blogger blog?

How to add recent post widget with Thumbnails into your blogger blog?

Step 01: Sign into your blogger blog

Step 02: Go to Dashboard >> Layout>> Add a widget >> HTML/JavaScript widget

Step 03: Copy and Paste below code into the widget

<style type='text/css'>

img.recent_thumb {padding:1px;width:55px;height:55px;border:0;

float:left;margin:10px;}

.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}

ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}

.recent_posts_with_thumbs a {text-decoration:none;}

.recent_posts_with_thumbs strong {font-size:10px;}</style>

<script style='text/javascript' src='http://recent-post-techkgp.googlecode.com/files/recent%20post_www.techkgp.com.js'></script>

<script style='text/javascript'>

var numposts = 5;

var showpostthumbnails = true;

var displaymore = false;

var displayseparator = true;

var showcommentnum = false;

var showpostdate = false;

var showpostsummary = true;

var numchars = 100;</script>

<script src='http://www.yourdomain.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Customize – Replace http://www.yourdomain.com with your blogger URL.

                      Replace value var numposts = 2 with the number of maximum posts that you want to display.

                      Replace value var numchars = 100 with any number of characters that you want to show in summary of recent posts.

                      By changing true or false you can customize activate or deactivate of any feature of your recent post widget.

Step 04: Save your widget and replace where you want to display your recent post widget.

Step 05: Save the layout.

Now process to view your recent post widget.

How to add recent post widget without Thumbnails into your blogger blog?

Step 01: Sign into your blogger blog

Step 02: Go to Dashboard >> Layout>> Add a widget >> HTML/JavaScript widget

Step 03: Copy and Paste below code into the widget

<script type=”text/javascript”>

function recentpostslist(json) {

 document.write(‘<ol>’);

 for (var i = 0; i < json.feed.entry.length; i++)

 {

    for (var j = 0; j < json.feed.entry[i].link.length; j++) {

      if (json.feed.entry[i].link[j].rel == ‘alternate’) {

        break;

      }

    }

var entryUrl = “‘” + json.feed.entry[i].link[j].href + “‘”;//bs

var entryTitle = json.feed.entry[i].title.$t;

var item = “<li>” + “<a href=”+ entryUrl + ‘” target=”_blank”>’ + entryTitle + “</a> </li>”;

 document.write(item);

 }

 document.write(‘</ol>’);

 }

</script>

<script src=”http://www.yourdomain.com/feeds/posts/default?max-results=2&alt=json-in-script&callback=recentpostslist”></script>

Customize – Replace http://www.yourdomain.com with your blogger URL.

                           Replace 2 with the number of maximum posts that you want to display.

Step 04: Save your widget and replace where you want to display your recent post widget.

Step 05: Save layout.

Now process to view your recent post widget.

How to add Gallery style recent post widget into your blogger blog?

Step 01: Sign into your blogger blog

Step 02: Go to Dashboard >> Layout >> Add a widget >> HTML/JavaScript widget

Step 03: Copy and Paste below code into the widget

<style>

.recent-grid {padding:0;clear:both;}

.recent-grid:after {content:"";clear:both;display:table;}

.recent-grid .galleryview{position:relative;display:inline-block;margin:6px 0;overflow:hidden;}

.recent-grid .galleryview a{text-decoration:none;float:left;position:relative;margin:0 6px}

.recent-grid .galleryview .ptitle{display:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:10px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}

.recent-grid .galleryview:hover .ptitle{visibility:visible;opacity:1}

.recent-grid a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}

.recent-grid a:hover img {border-color:#bbb;}

</style>

<script type='text/javascript'>

//<![CDATA[

// Recent Post Gallery

function gallerygrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-grid">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+recentpost_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+recentpost_thumbs+'" height="'+recentpost_thumbs+'"/>',p=recentpost_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="galleryview">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}

//]]>

</script>

<script>

var recentpost_thumbs = 8;

var recentpost_title = true;

</script>

<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=gallerygrid"></script>

Customize - Replace value var recentpost_thumbs = 8; with the number of maximum posts that you want to display.

Step 04: Save your widget and replace where you want to display your recent post widget.

Step 05: Save the layout.

Now process to view your recent post widget.

How to add simple stylish recent post widget into your blogger blog?

Step 01: Sign into your blogger blog

Step 02: Go to Dashboard >> Layout>> Add a widget >> HTML/JavaScript widget

Step 03: Copy and Paste below code into the widget

<div class="recentpostarea">

<style type="text/css">

.recentpostarea {list-style-type: none;counter-reset: countposts;}

.recentpostarea a {text-decoration: none; color: #49A8D1;}

.recentpostarea a:hover {color: #000;}

.recentpostarea li:before {background: #69B7E2;float: left;counter-increment: countposts;content: counter(countposts,decimal);z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff; padding: 0px 10px; margin: 15px 5px 0px -6px; border-radius: 100%;}

li.r-p-title { padding: 5px 0px;}

.r-p-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}

.r-p-title a {text-decoration: none;color: #444;font-weight: bold;font-size: 13px; padding: 2px;}

.recent-post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}

.r-p-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}

</style>

<script type = "text/JavaScript">

function showrecentposts(json) {for (var i = 0; i < posts_number; i++) { var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}} posttitle = posttitle.link(posturl);var readmorelink = "... read more";readmorelink = readmorelink.link(posturl); var postdate = entry.published.$t;var showyear = postdate.substring(0,4);var showmonth = postdate.substring(5,7);var showday = postdate.substring(8,10);var monthnames = new Array(); monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec"; if ("content" in entry) {var postcontent = entry.content.$t;}else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); document.write('<li class="r-p-title">');document.write(posttitle);document.write('</li><div class="r-p-summ">');if (post_summary == true) {if (postcontent.length < summary_chars) {document.write(postcontent);} else { postcontent = postcontent.substring(0, summary_chars);var quoteEnd = postcontent.lastIndexOf(" ");postcontent = postcontent.substring(0,quoteEnd);document.write(postcontent + ' ' + readmorelink);}} document.write('</div>'); if (posts_date == true) document.write('<div class="recent-post-date">' + monthnames[parseInt(showmonth,10)] + ' ' + showday + ' ' + showyear + '</div>'); }}

 </script>

 <script>

 var posts_number = 5;

 var posts_date = true;

 var post_summary = true;

 var summary_chars = 80;

 </script>

 <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>

 <noscript>Your browser does not support JavaScript!</noscript>

</div>

*Customize - Replace value var posts_number = 5; with the number of maximum posts that you want to display.

Step 04: Save your widget and replace where you want to display your recent post widget.

Step 05: Save the layout.

Now process to view your recent post widget.

OK, now your blogger blog has a recent post widget with Thumbnails or without Thumbnails or with Gallery style or with Simple Stylish. As I mentioned above you can get a lot of advantages for your blogger blog. With the above codes, you can customize your recent post widget as you prefer. 

I Hope the above methods help you to add recent post widget with Thumbnails or without Thumbnails or stylish widget into your blogger blog. And if you have any problem or know more fixes on this recent post widget with Thumbnails or without Thumbnails or stylish widget for to your blogger blog, Please share with us in the comments section below. Happy Blogging!