Showing posts with label How To Blogspot. Show all posts
Showing posts with label How To Blogspot. Show all posts

Tuesday, January 12, 2016

How To Remove Edit Link On Blogger Widget

How to remove edit link on Blogger widget, If previously I shared about how to add edit link on post or widget, now I post a contrary topic which is on how to remove edit link on widget or post. Usually edit link on Blogspot is presented pencil, pliers and screwdriver.

And the benefits of that feature is to give us a quick access on editing our widget or post. Albeit the feature is useful. But not all the Blogger's users want it. Therefore, I decide to share the how to guides on removing edit link on Blogspot's widget.

Actually the edit link is only seen or can be used by the blog's owner, people that are not the owner will not be able to use it. And Blogger team provides this feature to help us modifying our blog's look easily and quickly.

Here is the example of edit link wrapped in the pliers or screwdriver icon.
So let's do it guys.

How to remove edit link on Blogger Blogspot.

  1. Login to Blogger.com.
  2. Now go to Template -> Edit HTML.
  3. Now find this code.
    <b:include name='quickedit'/>
  4. Erase it. And remember that code is not only one. But many. So erase all of them
  5. Done and save your template.
You can now see your blog and find out, now the screwdriver or pliers is no longer there, congratulation.

Sunday, February 22, 2015

Install Sexy Bookmarks Widget On Blogspot

Sharing is caring, do you agree with that phrase? Sure, you do. Therefore in this opportunity I would like to share to you a tutorial, a good one tutorial that is related to that phrase.

What I mean sharing is caring is you can now place SexyBookmarks widget based on the DamnSexyBookmarks Wordpress plugin on your Blogspot based blog.

This widget deserves to be shared so Blogspot's community will notice about its existence and they are invited to add it to their blog, if they want to.

We know the point of having this feature on blog, with it our visitors can easily share our post to the social bookmarking sites simply by clicking on the buttons. As the result our post will be widely shared and spread.

Some guy, named Naeem Noor Belushi has elaborated the steps to install the widget, thus I don't see any reason to re-post it here. Instead, I direct you to the original post containing the tutorial.

SexyBookmarksWidget

If you want the SexyBookmarks widget like the above image appears on each of your post. Then visit Naeem's post written on its blog CSSReflex here. And then enjoy your stay there.

The purpose of this widget is of obvious for sharing your blog and its posts to the social networking or medias sites provided in this widget. So whenever your posts found by those social media sites users and they regard your posts are interesting then they will share the posts using this Sexy Bookmarks widget. And as the result your posts will be exposed to their friends and get visitors later from people in those sites. That's the main idea guys.

Hope you will find this post useful and see you again in the next posts.

Optimize Blogspot URL Permalink To Be More SE Friendly

One of the shortcomings Blogger or Blogspot suffers when it comes to SEO is the permalink. This area is decided automatically by Blogger each time we publish an article.

Albeit permalink doesn't play a very significant role in SEO, but having this element optimized will be helping our blog's ranking too. Yes there are number of other factors Google uses to ranking a blog, and SEO permalink could be one of them. I am not sure the size portion. Of course you'd agree with me having all area optimized is better for SEO like writing more SEO friendly description for our Blogspot.

Beside, isn't that better having all the words included in URL to clearer our point? Rather than exclude some words that supposed to be helping Google identify our posts better.

Sometimes we post a lengthy title containing about 5 or 7 words or more, but not all the words are included in the permalink. For example.

I Love To Wake Up In The Morning And Then Take A Cup Of Coffee.
The permalink would be.

http://blogname.blogspot.com/i-love-to-wake-up-in-the-morning.html.
And the rest of the words in our title are excluded, the permalink doesn't include the and take a cup of coffee line. That seems like hiding something. Right?

But that is the old days, now Blogger has added a new feature to deal with the situation with the feature named Custom Permalink.

Custom permalink is very handy feature, albeit it's not an automatic feature that will show all the words in our post title. However with that feature you can write your own permalink without words limitations. Isn't that wonderful?

Anyway you can find this feature while writing a post, point your eyes to the right-side of the screen, this is its place. Write all the words that you need Google to discover in your permalink so your post will explain itself clearer than before.
Blogger Custom Permalink
You are free to write your own permalink there and include all the words you regard important!

Hope this post useful you. Now each time you write a blog post, take sometime to write your own version of permalink to be more search engine friendly and help Google recognize your post better than before. Hopefully your posts will rank better and better in Google search result page.

Monday, January 26, 2015

Show Blogger Quick Edit Button For Each Post

I wonder why many of blogger templates these days don't include the Quick Edit button, every time I installed a new template then I won't find the nice editing wrapped with pencil image below title or post.

Actually the Quick Edit button is very useful, actually for a blogger like me that sometimes need to edit my published articles for several purposes, one of which is to recover from Panda hit. So with the absence of the feature forces me to search the post I want to edit inside the Blogger's dashboard.

It would be easier if there is a quick button in post, so every time we need to edit the article we published, we simply hit it then our browser will direct us to the writing page, in there we can make a needed modifications.

Well because of that then I conclude that I am not the only one, I believe there are many bloggers out there have similar habits as me. And they need to display the missing quick button for each of their posts.

So now I am here to elaborate to all of you the steps to show quick button for each of your posts.

How to show quick edit button for each post in Blogger


Firstly be sure that you have checked the show quick editing option in your Blog Posts gadet. Don't know where is it? Just go to Layout and then edit the Blog Posts gadget.

Blog Posts Gadget.png

And then check the quick editing option.

Show Quick Editing

When you have done checking the option. Now it's time to more advance steps that requires you to open your template HTML code. Here are the steps.

Remember to firstly backup your existing template before starting to apply the guides below.

  1. First login to your Blogger.com, then select a blog in the list that you want to add the quick button.
  2. Now go to Template -> Edit HTML and then find this tag.
    <b:includable id='comments' var='post'>
  3. Once you found the tag, then place it the following lines of codes right below the above tag.
    <b:includable id='postQuickEdit' var='post'>
      <b:if cond='data:post.editUrl'>
        <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
          <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
            <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
          </a>
        </span>
      </b:if>
    </b:includable>
    Quick Editing Button
  4. Now find this tag:  <data:post.body/>, usually in each template has more than one tag like that. Then find the one that has this tag above it <b:if cond='data:blog.pageType == &quot;item&quot;'>. So it will look like this.
    <b:if cond='data:blog.pageType == &quot;item&quot;'><div id='PostBody'>
     <data:post.body/>
  5. Now place this tag below the data:post.body tag.
    <b:include data='post' name='postQuickEdit'/>
  6. Save your template. And then open of your article, see at the bottom of your post, you will find a pencil image.
  7. Done.
Modifications.

You can also modify the image of the quick edit from the pencil to something you like. Just change the image URL http://img2.blogblog.com/img/icon18_edit_allbkg.gif with your own image URL. Make sure its format is gif.

Well you now have a quick edit button for each of your post in Blogger, you can easily edit any posts you think need to be edited.

Sunday, January 25, 2015

Recover From Panda Algorithm Hit By Removing Duplicate Contents (Blogger Complete Guides)

Duplicate Conten Panda Algoritm Hit Recover
Avoid duplicate content by noindex search label and mobile page on your Blogger is very important if you don't want to suffer the so-called Google Panda algorithm hit.

Duplicate content is probably the worst enemy for every blogger that practicing SEO.

Yes I have read many times, including the one from Matt Cutts saying that duplicate content won't hurt. But bitter realities we suffer from duplicate content is opposite from his saying. Duplicate content does hurt our site.

The easiest way to know whether your blog / website has duplicate content or not, is by searching your site using this key site:www.yourblog.com then Google will display number of indexed pages.

And then compare the number of results from Google search result with the number of your own published articles.

For example if you own about 500 articles, but Google displays 1000 results. The rest of 500 is duplicate content.

My Google Panda penalty experience.

At the early 2014, my technology blog got hit by Panda for the first time, it was a bad hit that dropped my traffic almost %100. Below is the screenshot of Panda penalty suffered by my blog.

Traffic Dropped By Panda Penalty
Usually I got 8 or 9 thousands visitors everyday, but since the January, 11, 2014 my traffic started to drop and keep dropping to 157 visitors/day.

Can you imagine how unpleasant the situation was for me? I had to make some accurate fix to bring back the traffics to its original level.

And now the traffic of the blog is gradually increasing, not yet to the point I am targeting, but it's increasing time to time.

What have I done to recover from Google Panda hit? The answer will be shared here just keep reading.

What is duplicate content?

In the realm of blogging, that simply means a page that has more than one URLs. For example is your A Article has 2 URLs like this;

  • http://yourname.com/a-article.html.
  • http://yourname.com/a-article.html?m=1.
Those two URLs will point to the same content page, that causes trouble for search engines like Google to determine which URL is the original and should be shown on their result page.

Panda algorithm

Google uses the so-called Panda algorithm to evaluates blogs indexed to its server, Panda's job to internally and routinely scan those blogs and then decide whether the blogs are important (deserve to get good rankings) or just bunch of paltry blogs.

And duplicate content is one of the unknown factors used by Panda algorithm to evaluate and measure whether the blog should be ranked good or be dropped as lowest possible.

And of course Panda receives all the data from Google Robots (bots) that regularly crawl and index our blog. Those bots could make many mistakes during crawling and indexing our blogs.

Do you know that Google bots can make a mistake? Yes the can make a destructive mistake which is still indexing the no-index pages, albeit we have set no index sign on robots.txt (disallow) file or meta robot tag on head area.

And then those Google bots hand the indexed data to Panda to examine and decide to rise or topple the ranking of blogs in questions.

Google panda algorithm penalty is one domain level penalty that means if one, two, three or fours of your articles penalized or got hit by Panda than your entire domain will also bear the consequence, being punished entirely, your rank will drop to the level of your worst nightmare.

Panda targets on...

Several main areas that this algorithm is targeting are all internal side of your blog, they are...

  • Duplicate contents among your posts, URLs, or from other blogs.
  • Low quality blog and articles.
  • Content farm blog.
  • Article that is too short, less than 50 words, can trigger Panda hit (they say).
  • Place many advertisements could raise Panda eyebrows too.
But in this post I just want to focus on the duplicate contents that happen to my blog, not this blog, the other one.

Therefore if you feel like owning low quality articles, or too short articles or your blog has too many advertisements, then you know what to do.

Following are my quick tips to deal with thin contents and advertisements.

Deal with too short articles or thin articles.

Edit those too short articles or remove them from your blog, yes remove them if you think that's  a better solution.

Place only three ads at maximum.

As for the advertisements be sure to only place 3 ads at maximum for a single page.

And again this post only focuses on duplicate contents by URLs.

So before the mistakes kill your blog entirely, it's time to direct these bots to the right pages and leave the shouldn't be indexed pages alone.
No!..Canonical URL doesn't help too much, at least for me!

People routinely suggest to use URL canonization by that Google bots will only take the canonized URL as reference.

Yet, the rest of non-canonical URLs are still indexed and appear on Google result pages that create duplication of the real contents or canonized URL.

In Blogger, we are provided with labels to categorized our articles, and those articles are archived monthly and then there is Mobile friendly URL too for optimizing the look to the smaller devices.

But that's the main issue, because URLs from labels, archives and also mobile are all indexed and those unnecessary index has created so many not-useful contents appear on Google search result pages.

As the result they are marked as duplicate contents by Panda algorithm.

It is time to put an end of the misery and set the search labels URLs, mobile URL and archives URLs excluded from Google index.
In this post you will find of what I have done to recover from Google Panda Algorithm hit that caused my blog dying and need to be taken care of.

Recover from Panda Algorithm Hit by removing duplicate contents in Google result pages for Blogger.


In this section you will find several steps that I consecutively performed to optimize number of areas in my Blogger blog.

All of the steps relate to removing duplicate contents. In Blogger, area that can

How to noindex unnecessary URL to avoid duplicate content in Blogspot

We will be dealing with search label, archive and mobile URL (m). These kind of urls contain too many words that duplicate with the real posts that should be indexed and ranked as high as possible in Google result pages.

Noindex and remove search label URL Blogspot

Blogger's Search label URLs can contribute considerable amount of duplicate contents if your blog has many labels.

It is recommended for these kind of URLs not be indexed if you suffer content duplications and currently get Panda hit.

Use robots.txt.

So to noindex is you can use Robot.txt and place it like this.

Disallow: /search/labels/

Use meta tag.

Aside using robot.txt, you can also place the meta tag to tell Google robots no to index the search label and its url. So inside <head>, paste the following tag.

<b:if cond='data:blog.searchLabel'>
      <meta content='noindex,nofollow' name='robots'/>
    </b:if>
See the image below for example.

nonindex search label

Remove search label URL from Google

You can also remove the already indexed search label URLs from Google, by using remove URL utility in Google Webmaster Tools.

  1. Find the Blogger search label URL that's already indexed, (do so by typing this in Google; site:http://yourblogname.com/search/label).
  2. Then login to your Google Webmaster Tool account, then pick your blog from the list.
  3. Google Index -> Remove URL, then paste the blogger search label URL to the provided form (Create A New Removal Request) and then hit Continue.
Remove URLs Google Webmaster Tools
Now all you need is waiting for Google to update by excluding all the indexed search label URLs from their result pages.

Noindex and remove Blogspot archive URL from Google

Archive is for our readers finding the articles published in certain times, monthly, weekly or yearly.

The idea of archiving our posts is good, but since Google robots are like a 3 years old boy, they hardly differentiate between archive URL and the real URL, they index them all and mark them as duplicate contents, that's bad.

Thus it's better to keep these URLs away from Google's bots sight by set it noindex and remove them all from Google index.

Use meta robot tag.

You can disallow Google from indexing archive by simply paste the following command line in your <head> template.

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>

See the image as reference.

noindex Blogspot archive URL
Use header tag

You can also utilize the owned blogger Custom Robots Header Tags to noindex archive URL that can create duplicate content for single post of yours. You can set it just like in the following picture.

(Settings -> Search Preferences).


Remove archive URL from Google index.

If your archive URLs indexed by Google and they are shown on the search result pages.

You should also remove the Archive URLs from Google result the same way you have removed search label URLs through Google Webmaster Tools (see the image above.

Noindex and remove mobile URL (m) from Google result

Mobile url like this; ?m=0 or ?m=1 at the end of your URL can definetely create a trouble.

All those M urls appear on the Google result pages, sometime they compete to the original URL, and this can alarm Google Panda to think your blog is not correctly maintained.

I suggest you to also deal with these kind of URLs too.

Use Robots.txt

Robots.txt can be our helper to deal with almost many duplicate contents, it can also help you disallow Google to index mobile URLs, therefore paste the lines of cones below to forbid Google from indexing them.

Disallow: /?m=1
Disallow: /?m=0
Disallow: /*?m=1
Disallow: /*?m=0
Disallow: /*/*/*.html?m=0
Disallow: /*/*/*.html?m=1

Use meta robots tag.

Sometime we need to add more warning to emphasize our command to Google robots, therefore add the following meta tag inside your <head>.

<b:if cond='data:blog.isMobile'>
      <meta content='noindex,nofollow' name='robots'/>
    </b:if>

See the image.
noindex mobile URL

Remove Mobile (m) URL from Google results

Complete your efforts removing the entire mobile URLs from Google by removing the already indexed mobile URLs. The procedure is the same like removing search label URLs in Google Webmaster Tools.

Additional.

Beside applying the above techniques, I also checked all the low quality articles on my blog. The low quality articles that only has less words, not too informative and also duplicate with other articles.

So I edit those articles and combine the number of short articles into one lengthy articles, and I also delete many of other articles that I know won't help me if they are kept.

And those action seem to works. The blog traffic is gradually increasing now.

Conclusion.

All the above procedures will of course omitting the possible duplicate contents that attacking your Blogger Blogspot, by applying the procedures you have at least do something to fix the problem that possible caused you a Panda algorithm hit.

Now all you need to do is wait for the update, hopefully you will recover from Panda hit.

Saturday, January 24, 2015

How To Install Top Commentators Widget On Blogger

How to install top commentators widget on Blogger. When we decide to use blog as our media to share everything online or just to sharpen our writing skill, then we are fully aware of the consequence which is our published articles will be commented by our readers.

And we are grateful with that, that means our work is appreciated. Comments from our readers are always welcomed and most of blogger give that opportunity for their readers by providing comment area in each of the published posting.

In Blogger.com -- the best content management system -- we are provided with a great commenting system by default to accommodate users to write down their comments without hassle. Aside from that, in Blogger we can also display Top Commentators Widget too.

With that widget we can reward those who have frequently commented to our postings by displaying their names.

If you wish to have this widget installed on your Blogspot blog, then your wish will soon come true. You need to only add lines of codes to HTML/Javascript gadget and done. The Top Commentators Widget will instantly show up.

Here is the demo.

Top Commentators Widget
Interested to try this widget? Then follow the steps below.

Install top commentators widget on Blogger

Installing top commentators widget will be more handy on the blog that already has many comments. And this only applies to blog that uses official blogger comment system, if you use other third-party commenting systems like Disquss, Facebook, etc.

  1. Login to your Blogger account, then head to Layout and add gadgets.
  2. Scroll down to find and choose HTML/Javascript.
  3. Write down the title of the gadget, for example Top Commentators.
  4. Now just paste the following code to the empty box there, then hit the Save button.
    <style type="text/css">
    .top-commentators {
    margin: 3px 0;
    border-bottom: 1px dotted #ccc;
    }
    .avatar-top-commentators {
    vertical-align:middle;
    border-radius: 30px;
    }
    .top-commentators .commenter-link-name {
    padding-left:0;
    }
    </style>
    <script type="text/javascript">
    var maxTopCommenters = 8; 
    var minComments = 1;     
    var numDays = 0;         
    var excludeMe = true;    
    var excludeUsers = ["Anonymous", "someotherusertoexclude"]; 
    var maxUserNameLength = 42;
    //
    var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
    var txtNoTopCommenters = 'No top commentators at this time.';
    var txtAnonymous = '';
    //
    var sizeAvatar = 33;
    var cropAvatar = true;
    //
    var urlNoAvatar = "http://2.bp.blogspot.com/-pWdg8wLsedo/UmVWQxLdwrI/AAAAAAAAEVk/-z7YgKykkuU/s1600/avatar_blue_m_96.png" + sizeAvatar;
    var urlAnoAvatar = 'http://1.bp.blogspot.com/-6B6DXCp8dek/UmVPm7D2mOI/AAAAAAAAEVU/Xz-3z2nRpUk/s1600/avatar1.png' + sizeAvatar;
    var urlMyProfile = '';
    var urlMyAvatar = '';
    if(!Array.indexOf) {
     Array.prototype.indexOf=function(obj) {
      for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
      return -1;
    }}
    function replaceTopCmtVars(text, item, position)
    {
      if(!item || !item.author) return text;
      var author = item.author;
      var authorUri = "";
      if(author.uri && author.uri.$t != "")
        authorUri = author.uri.$t;
      var avaimg = urlAnoAvatar;
      var bloggerprofile = "http://www.blogger.com/profile/";
      if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
        avaimg = author.gd$image.src;
      else {
        var parseurl = document.createElement('a');
        if(authorUri != "") {
          parseurl.href = authorUri;
          avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
        }
      }
      if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
        avaimg = urlMyAvatar;
      if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
        avaimg = urlNoAvatar;
      var newsize="s"+sizeAvatar;
      avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
      if(cropAvatar) newsize+="-c";
      avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
      var authorName = author.name.$t;
      if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
        authorName = txtAnonymous;
      var imgcode = '<img class="avatar-top-commentators" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
      if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
      if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
        authorName = authorName.substr(0, maxUserNameLength-3) + "...";
      var authorcode = authorName;
      if(authorUri!="") authorcode = '<a class="commenter-link-name" href="'+authorUri+'">'+authorcode+'</a>';
      text = text.replace('[user]', authorcode);
      text = text.replace('[image]', imgcode);
      text = text.replace('[#]', position);
      text = text.replace('[count]', item.count);
      return text;
    }
    var topcommenters = {};
    var ndxbase = 1;
    function showTopCommenters(json) {
      var one_day=1000*60*60*24;
      var today = new Date();
      if(urlMyProfile == "") {
        var elements = document.getElementsByTagName("*");
        var expr = /(^| )profile-link( |$)/;
        for(var i=0 ; i<elements.length ; i++)
          if(expr.test(elements[i].className)) {
            urlMyProfile = elements[i].href;
            break;
          }
      }
      if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
        var entry = json.feed.entry[i];
        if(numDays > 0) {
          var datePart = entry.published.$t.match(/\d+/g);
          var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
       
          var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
          if(days > numDays) break;
        }
        var authorUri = "";
        if(entry.author[0].uri && entry.author[0].uri.$t != "")
          authorUri = entry.author[0].uri.$t;
        if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
          continue;
        var authorName = entry.author[0].name.$t;
        if(excludeUsers.indexOf(authorName) != -1)
          continue;
        var hash=entry.author[0].name.$t + "-" + authorUri;
        if(topcommenters[hash])
          topcommenters[hash].count++;
        else {
          var commenter = new Object();
          commenter.author = entry.author[0];
          commenter.count = 1;
          topcommenters[hash] = commenter;
        }
      }
      if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
        ndxbase += 200;
        document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
        return;
      }
      // convert object to array of tuples
      var tuplear = [];
      for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
      tuplear.sort(function(a, b) {
        if(b[1].count-a[1].count)
            return b[1].count-a[1].count;
        return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
      });
      var realcount = 0;
      for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
        var item = tuplear[i][1];
        if(item.count < minComments)
            break;
        document.write('<di'+'v class="top-commentators">');
        document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
        document.write('</d'+'iv>');
        realcount++;
      }
      if(!realcount)
        document.write(txtNoTopCommenters);
    }
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    </script>
The widget is now appearing on the location of your choice. But it's not yet right, it's because you haven't done the following.

Configure the top commentators widget

  • someotherusertoexclude you can exclude your name or a certain name from appearing to the widget, by change the someotherusertoexclude, and add more by separating it with comma.
  • var sizeAvatar = 33; 33 is the size of the avatar of each commentator, change the 33 to fit with your site.
  • var maxTopCommenters = 8; you can change the 8 number into your heart desire. That's the number of commentators to be displayed in the widget.
That's it, you have done it. Your blog is now having a top commentators widget that showing your blog's visitors name that comment on number of your posts.

Thursday, January 22, 2015

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.

Breadcrumb Google Friendly

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.
Breadcrumbs On Blogspot
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.
Google RichSnippet Blogspot Breadcrumb Preview
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.
Recent Posts Widget With Thumbnails Blogger
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.
    Add A Gadget
  5. Now scroll down to find a gadget namely HTML/Javascript, and click it once you find it.
    HTML Javascript Blogger
  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.

Wednesday, January 14, 2015

Complete Solutions To Deal With 404 Not Found Error On Blogger

404 Page Not Found
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.

Friday, December 26, 2014

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.

Thursday, December 25, 2014

How To Make Blogspot Template To Be Valid HTML5

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='http://2.bp.blogspot.com/-uDWqr_GxsRo/Uy9DrYHuuXI/AAAAAAAAAwI/DY4ORHIDUxY/s1600/logo.png' width='75'/>
Change to be like this
<img alt='image name' height='75' src='http://2.bp.blogspot.com/-uDWqr_GxsRo/Uy9DrYHuuXI/AAAAAAAAAwI/DY4ORHIDUxY/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.

Friday, December 12, 2014

Quickly And Easily Install Facebook Comment System On Blogspot

Facebook Comment System
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.

Wednesday, November 26, 2014

How To Install Facebook Open Graph (OG) On each Blogspot Post

FB Open Graph
How to install Facebook open graph (OG) on each Blogspot post, it's quite easy and the function of its to maximize your post or content when it's shared on Facebook. So when you share your post or anyone share your post, and it only shows the title and descriptions of the post without thumbnail, then I suggest you to use the Facebook open graph tag here.

If you have installed it correctly, it's nearly 100% your shared post will appear just like in the following image.

If your post appears like in the image, of course will attract any Facebook users to visit that will generate you extra traffic from Facebook. Because it's so eye catching.

And the following is the Facebook open graph you need to place inside the <head> or place anywhere before the <b:skin><![CDATA[/*. (Just copy the entire codes below).

<!-- open graph --> <b:if cond='data:blog.url == data:blog.homepageUrl'> <meta content='website' property='og:type'/> <meta content='https://lh6.googleusercontent.com/-tedRhpDNEM0/U2ut0BBTUII/AAAAAAAAACc/_Uth1YnMN8Q/w296-h297-no/Logo-Mad-Tekno.png' property='og:image'/> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <meta content='article' property='og:type'/> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/> </b:if> <b:else/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'> <meta content='Mad Tekno' property='og:title'/> <b:else/> <meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' property='og:title'/> </b:if> <meta expr:content='data:blog.title' property='og:site_name'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' property='og:description'/> </b:if> <!-- end open graph -->
Now save your template, and open your article to see its view source or just share your post to Facebook to see whether it appear on the example image above. Hope this post useful for you. See in in the next post guys.