How To Add Google Friendly Breadcrumb On Blogspot

How to add Google friendly breadcrumb to Blogspot Blog, there are many tutorials concerning this issue yet not all of them bringing the Google friendly breadcrumbs that's indexed by Google. Of course one of the reasons a blogger set out this navigation tool is because they want their post appears professionally on Google search result page. Like in the following picture.

The problem is not all the tutorials to display breadcrumbs trail that are shared by bloggers will display a form like in the screenshot above. Yes the breadcrumbs appears on every post, yet they are not indexed by Google. So the results will be similar like any other blogs that appear on the Google result page.

If you want your breadcrumbs indexed by Google, just follow the instructions on this post. And you will reap the result once your post is published. And then Google will update the rest posts in your blog. But firstly let's discuss about Breadcrumbs, what is it and the benefit of using it.

What is Breadcrumb?

Breadcrumbs is simply a navigation tool in website or blog to assists user (visitor) to know their current location in the website's hierarchical structure. For example if you are reading this post then point your view to the upper screen right above the post title, you will find a navigation path like the following.

That's the example of breadcrumb. By that navigation then you know where you are at this post under category, How To Blogspot pointed with Home.

This navigation tool is useful especially for a blog or website that has many pages that needed to provide a navigation help used in visitors interfaces. A user can utilize the feature to keeps track their locations.

As for SEO, will breadcrumb trail benefits to our SEO effors?

Well, hmmm...I think indirectly yes! My opinion is purely based on the user experience, if users feeling helped with the navigation then they will like our blog. If they do, they will stay longer than expected. And the user's staying period counts by Google in bounce rates. So by that factor, let me safely say yes but indirectly. If you own other opinion than mine, please share to me.

Anyway I think it's time to get ourselves into the core topic which is to display Google friendly breadcrumb on Blogspot blog. So let's get started.

Tutorial to add Google friendly breadcrumb on Blogspot Blog

1. Login to your Blogger.com account. And pick the blog you wish to display the breadcrumb trail. (Consider you have more than one blog in your dashboard.)
2. Now go to Template > Edit HTML.
3. Find this code ]]></b:skin> and paste the following CSS code right above it.
   

   .breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

4. Now find this tag <b:includable id='main' var='top'> and then replace it with the following lengthy codes.
   
   

   <b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <!-- 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' property='v:title' rel='v:url'>Home</a></span>
   <b:loop values='data:post.labels' var='label'>
   &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
   </b:loop>
   &#187; <span><data:post.title/></span>
   </div>
   <b:else/>
   <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
   </b:if>
   </b:loop>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;archive&quot;'>
   <!-- breadcrumb for the label archive page and search pages.. -->
   <div class='breadcrumbs'>
   <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
   </div>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;index&quot;'>
   <div class='breadcrumbs'>
   <b:if cond='data:blog.pageName == &quot;&quot;'>
   <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
   <b:else/>
   <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
   </b:if>
   </div>
   </b:if>
   </b:if>
   </b:if>
   </b:if>
   </b:if>
   </b:includable>
   <b:includable id='main' var='top'>
   <b:include data='posts' name='breadcrumb'/>

5. Now save your template.

Well you just finished installing the needed codes to display breadcrumb trail on your Blogspot blog. Wonder will it work or not, just check it by visiting your post randomly.

If you have found there is a navigation tool called breadcrumb appears above each of your post title. Good for you. Now it's time to check whether Google index your breadcrumb. How? Just visit this Google richsnippet page and paste your any post (URL) in the provided form and hit Preview red button.

Here is my post result.

Since you have fully understood on how to implement the tutorial, it's time to add Google friendly breadcrumb on your own blog.

Display Blogspot Recent Posts Widget With Thumbnails

Displaying a recent posts widget with thumbnail on Blogger Blogspot can be done very easily, if you search the tutorials regarding that in Google you will find a plethora blogs offering their own styles and approaches to install recent posts with thumbnails.

And when I set out this blog, and tweaking number of areas in the template to make it more user friendly and of course search engine robots friendly too. And it didn't slip my mind to also install recent posts widget with thumbnails to make my blog really users friendly.

With that handy widget my visitors will easily discover about number of latest posts published on this blog and the posts are shown in a list called widget that appears on the sidebar.

And of course the existence of the recent posts with thumbnail will increase your blog's page views and reduce the bounce rate at the same time. The longer your visitors stay in your blog the better, and Google is said to also use this factor to decide ranking of the blog.

But surely this kind of widget will effect to our blog's loading time too, the scripts brought by it will slow the loading time. This is not good if you want to keep your visitors interest. Don't worry I will share the tips to speed up blog loading time later.

Untill then let's stick with the main topic which is installing a recent posts widget with thumbnails. The things you need to do is simple and don't need to edit your template, the process can be done via Layout area only.

And by the way here is a demo shown in a picture of recent posts would like once you have it on your sidebar.

The widget looks beautiful, doesn't it? Well if you want to have the same recent posts with thumbnails on your Blogspot then I invite you to follow the instructions below.

How to install recent posts widget with thumbnails.

1. Login to your Blogger.com account.
2. Choose the blog you want the widget to appear.
3. To Layout.
4. Add a gadget.
   
5. Now scroll down to find a gadget namely HTML/Javascript, and click it once you find it.
   
6. When empty box of gadget shows up then paste the recent posts widget with thumbnails code within and save the gadget.
   
7. Here is the lines of codes to display recent posts with thumbnails.
    <div class="eggTray">
   <script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
   "pipe_params":{"URL":"http://yourblogname.blogspot.com/feeds/posts/default"},
   "hideHeader":"false","height":"500","count": 8 }</script>
   <noscript>Your browser does not support JavaScript!</noscript></div>
   <style type=text/css>
   .eggTray {margin:10px 0px;padding:0px;}
   .ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
   .pipesTitle {padding-top:0px;}
   .pipesDescription {display:true;}
   .ycdr, .ycdr a {color:#999999;}
   .widget .popular-posts ul {padding-left:0;}
   </style>

Notes.

• Change the http://yourblogname.blogspot.com with the name of your Blogspot or custom domain if you have.
• 500 is the scrolling feature provided by default, if you don't want to have scroll just remove the 500 only and keep "" intact.
• 8 is the number of recent posts, change it into number you need.
• True is to show description of each recent post, so if you want each recent post to have a description then keep it true, if you don't want it just change true to none.
• Done!

You can now see your home page blog and refresh it to see the new and shiny recent posts widget with thumbnails on your sidebar or anywhere you placed.

Complete Solutions To Deal With 404 Not Found Error On Blogger

404 Page not found is indeed a general issue / problem found on any CMS, Blogger is included. After being so long maintaining our blog, like it or not, there will be page not found that is reported by our website traffic report services like Google Analytics or StatCounter. In Google Webmaster Tools too reporting this issue.

How To Install Anti-Adblocker Script On Blogger

This is how to add or install anti-Adblock or anti-AdBlocker script on blog. So when you installed this anti-adblock script then your blog will appear in full entity on users who have Adblock installed on their browsers.

How To Make Blogspot Template To Be Valid HTML5

The meaning of making your blogspot template to be valid HTML5 is not to create a new template, instead we are going to edit or modify your existing template to be valid or it's compliance with HTML5 rules.

If your template is valid HTML5, according the web design experts will ease browsers reading and scanning your blog's code and as for the wide assumption saying a valid HTML5 blog's code will help search engine's bots crawling the blog, I personally don't have a solid source to rely on for approving that assumption.

For some people having a valid HTML5 codes is important showing their professionalism and some even go further assuming valid HTML5 websites are proofs to trust the websites in question.

Whatever your assumption is regarding this matter, let it be yours, my part is only sharing information to help you validating your Blogspot's template codes to be valid HTML 5. That's all.

Valid HTML5 codes are great for your blog's future, and currently all the modern browsers like Chrome, FireFox, IE, Opera and Safari support HTML 5.

How to check your blogspot template code validation?

To verify whether your blog's template is valid HTML5 or not, you can utilize a free service offered by ValidatorW3. And to be honest getting a 100% error-free from the site is nearly impossible without sacrificing things installed on our blog.

My blog has 38 errors and 15 warnings. It's not too many, the errors occurred on this blog are mostly because of image HTML, meta tags codes and widgets. By performing number of tweakings will solve the errors. But I am not planning to do so right now. May be later.

Anyway, if you want to check the possible errors existing in your template code, you can head to http://validator.w3.org/.

How to make your Blogspot template to be Valid HTML5

To make your blog code HTML5 validated -- or at least reducing the errors number, then follow the guides I am about to share now. Firstly, please to backup your existing template, the errors getting worse, you can restore your broken template back to its original form.

Step 1. Login to your blogger.com account > click "Template" > click "Edit HTML"

Step 2.  Find --use CTRL +F -- the following code. It's easy, usually the codes located on the top part of your template.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><head>

Or like this

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

Replace all the codes there with the following codes.

<!DOCTYPE html><HTML><head><meta charset='utf-8'/>

Not to forget to also change <html> in the end of your template codes to this tag <HTML>.

Step 3. Now find this tag <b:include data='blog' name='all-head-content'/> and replace the tag with the following codes.

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>

Step 4. Now find this tag <b:skin><![CDATA[ then change it with the following.

<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' /> &lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]] <style>

Step 5.  Change all the /*------ ----*/ with this /* and this */. For example.

/* ----------------------Name: Your Template NameDate : 15 April 2014Url : http://the blogname.blogspot.com-------------------------*/

Change to be like the following.

/* Name: Your Template NameDate : 15 Apple 2014Url : http://theblogname.blogspot.com */

Step 6. Delete blogger new navigation. Find the code <body> and place the following code right above it.

<!-- <body><div></div> -->

Step 7. Delete all the quickedit or screwdriver icons. Find this tag <b:include name='quickedit'/>  and delete it.

Remember; each time you create a new widget or gadget in Layout section, you must repeat the process, because a new widget comes with this <b:include name='quickedit'/> code.

Step 8. Find the following code.

<span class='post-icons'>        <!-- email post links -->        <b:if cond='data:post.emailPostUrl'>          <span class='item-action'>          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>          </a>          </span>        </b:if>        <!-- quickedit pencil -->        <b:include data='post' name='postQuickEdit'/>      </span> <div class='post-share-buttons'>        <b:include data='post' name='shareButtons'/>      </div> </div>

Replace the above code with the following code.

<span class='post-icons'><!-- email post links --><b:if cond='data:post.emailPostUrl'></b:if></span></div>

Step 9. Add the  type = "text/javascript" code to the existing JavaScript and add type = "text/css" in all CSS code. For example.

<script src="https://thecode.googlecode.com/files/code.js"></script>
<script src="https://thecode.googlecode.com/files/style.css"></script>

Change them like this.

<script type="text/javascript" src=""https://thecode.googlecode.com/files/code.js"></script>
<script type="text/css" src="https://thecode.googlecode.com/files/style.css"></script>

Step 10. Hide your page navigation on homepage. Find the following code <b:include name='nextprev'/> then replace with the following code.:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>

Step 11. Add Alt Attributes on all the existing images or pictures. For example.

<img height='75' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioRQB1TZv9fmQR38grO6zUeM9bMnyUetbMFF1Zb9JtZ9nc15xpjwW1Epotenn1rB_0a5fWwnldNryqTUuaxWdt_F3Hu12ad7pmUFMHGs_kvnO5ZiHTbAmwpbOh0pnvVEVcOoXldLsOlUg/s1600/logo.png' width='75'/>
Change to be like this
<img alt='image name' height='75' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioRQB1TZv9fmQR38grO6zUeM9bMnyUetbMFF1Zb9JtZ9nc15xpjwW1Epotenn1rB_0a5fWwnldNryqTUuaxWdt_F3Hu12ad7pmUFMHGs_kvnO5ZiHTbAmwpbOh0pnvVEVcOoXldLsOlUg/s1600/logo.png' width='75'/>

SAVE your template!

If all the 11 steps didn't make your template 100% error-free, at least they will reduce the errors in many areas.

One more thing do not too upset if you fail to make your blogspot template to be valid html5. You can search the kind of templates on the internet, and focus on contents of your blog.

Tips To Generate Blog Traffic Using Google Webmaster Tools

The main purpose to practice SEO is because we want to get as many blog visitors as we can. If not because of that purpose, there is no need to actively optimize our blog. In this post I would like to share to my readers some tips to generate traffic to our blog using the Google Webmaster Tools.

If you have known on how to make a blog, then you have understood that your blog needs visitors. To get the visitors, we need to do on-page and off-page optimizations. On-page is relating to optimizations we do inside our blog, like writing an article is one of them. In writing an article we have to find and play with right keywords.

That's the purpose of this article which is to invite you doing keyword researches to get the right keywords for your articles. This post is a sequence of my previous post titled Rightest Way To Find Most Searched Keywords In Google. But in this post we are using Google Webmaster Tools service.

The topic will be divided into two sections.

• First one is finding the high impressions keywords.
• And the second one is a short tips to optimize the keywords.

Finding keywords with high impressions.

The very first thing you need to do is of course logging into your Google Webmaster Tools account.

If you are on the Google Webmaster Tools dashboard, then select the blog you wish to optimize. You will be directed to the selected blog's dashboard.

To generate traffic to your blog, keyword is one of the keys, you need to target the keywords that are potentially good for increasing your blog's traffic. To do so you can open the Search Traffics -> Search Queries.

You will now see a report containing keywords graphic and most keywords used by Google's users to get to your blog.

As you can see from there are three keywords with different impressions. From that picture you can see that keyword B has the highest impressions (1.600). By the keyword B you have a big chance to generate extra and big blog traffic.

Why do I say a big chance? Please to point your attention to the Average (Avg)-position that only 5.5, meaning from the three keywords only keyword B has the lowest average position. Lowest position relates to lower click rate. As you can see the keyword B has only get 4% for its CTR.

So imagine if you optimize the keyword B and manage to increase its avg-position to 1.5? Of course it will also raise the CTR to the level of 50% that will automatically boost up your click numbers from 60 to 800 clicks.

Time to optimize the keywords

Since you have known the potential keywords, it's time to optimize the keywords. Of course SEO is needed. In now days, SEO is not just throwing links to dofollow websites / blogs like 3 or 4 years ago. Google has set a new strict rule regarding link-building campaigns. Penguin is the watcher, if your blog is fallen in Penguin-hunting season, then it will be extremely hard to recover. Therefore don't spam just to get ranking, because the effect is a total destruction.

Get quality backlink, but don't spam, pour comments on the blogs that being highly trusted by Google. Google ranks website / blog based on trust, if your blog is trusted by Google, the rest of the jobs will be easier. Trust me on that!

And practice internal link-building, meaning link to your other posts (the post you are optimizing) and use the variety of keywords as texts. Don't just use the same keywords time to time, Google dislikes that. Make sure each linked post has the same topic, this will increase the point of the link.

Last but not least, write a quality content. Quality content is content that's really helping your readers with complete information, communicative, and don't forget to include reference to other blogs. Let Google know that you have made research before writing the post.

So what are you waiting for? Use Google Webmaster Tools as your SEO tool to help your generate more traffics to your blog.

Quickly And Easily Install Facebook Comment System On Blogspot

In order for our blog to get more exposure from Facebook then we are provided with number of facilities by Facebook, one of them is Facebook comment system that we can install on our blog. And today, I will share the easiest and quirkiest way to install Facebook comment on your blog. As the result your blog's post will be commented by Facebook users, and your commented post will appear on the users profile and be seen by all their Facebook friends.

It is because each time a Facebook user comment on a post blog, then the post will be automatically shared on their profile. And of course, by that his or her friends can see the post he/she previously commented. If the posts raise the interests of others, they will be motivated to visit the blog post.

That's the exposure I am talking about. And of course, you will get new audience and traffic landing to your posts. And will benefit your campaign to get more traffics.

So the benefits we will get for installing Facebook comments on our blog are;

• Our posts will get comments from Facebook users.
• Our posts will potentially be visited by other Facebook users for the comments posted by their Facebook friends who visited the posts.

Since you have understood the benefits of installing Facebook comment system now it's time to go to the instructions.

How to quickly and easily install Facebook comment system on Blogspot

• Login to Blogger.com.
• Now find this code; <data:post.body/>.
• Once you found it, then place the codes below it.
  

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='fb-root'/>
  <script>
  window.fbAsyncInit = function() {
  FB.init({appId: &#39;136575963025211&#39;, status: true, cookie: true,
  xfbml: true});
  };
  (function() {
  var e = document.createElement(&#39;script&#39;); e.async = true;
  e.src = document.location.protocol +
  &#39;//connect.facebook.net/en_US/all.js&#39;;
  e.async = true;
  document.getElementById(&#39;fb-root&#39;).appendChild(e);
  }());
  </script>
  <fb:comments/>
  </b:if>

Save your template, now see the comment system of Facebook appears on each of your Blog's post. Just wait for the Facebook users to comment to your post. Hope you will find this post useful. And see you again in the next posts.