Simple Blogger Tutorials

There are quite few good Syntax Highlighters out there, one of them is “ Prettify ” which is simple and lightweight. Prettify states that it can automatically guess and highlight code snippets for many languages (best on C-like and HTML-like ) and also has many language extensions, if you need one. So I setup a simple demo to test it and the result was quite good.

Adding Description Meta tag is one of the good SEO practices. These tags are HTML attributes which tell the search engines about the content of the page and describes it. Description tags don’t helps in ranking high within search result pages but helps in good clickthrough rates. Many years back, search engines used to show the result snippets of these Description Meta tags but recently some search engines, like Google, shows preview snippets depending on user searches. Just like any other top CMS, like WordPress.org, blogs powered by Blogger also have the feature to add Description Meta tags to every page, you just need to enable some settings, in this tutorial let us see how.

Why use any other translate widgets with or without images of country flags when Google translator widget can translate texts of any webpage and is capable of translating to 64 different languages (and increasing) automatically and instantly to readers speaking language. Google translator for websites can be added to any website or CMS, like WordPress, Blogger, Tumblr, etc. with ease. While the steps of adding this widget is all same but here I will mainly write about how it can be added to Blogger blogs. Blogger has this widget, you just need to go to your blog’s Layout tab and click “Add a Gadget” link. A popup page will open, scroll down below and you will find the Google Translate gadget. But there aren’t much options to select from to customize it, that’s why let’s add it in a different way.

After the introduction of Google +1 button (Plus One), it has become a trend for the publishers to add it to their websites and blogs, whether it is hosted on Blogger or WordPress. So the general question that will pop up in our minds is what is so popular about this +1 button ? Well, the answer is, when you finds a web content to be useful and click Google +1 button to share it on Google+ , it will not only help your friends and contacts on Google+ Circle to get to know about the interesting content but will also help them to find more relevant search results on Google.

If you are looking for free open-source fonts to design your blog’s texts then nothing is better than Google web fonts. Blogger has been using Google web fonts for quite a long time, you can find it by clicking the Customize button found under Blogger Template tab of your blog. But there aren’t many web fonts available to choose from as many as the font directory has, isn’t it? Or you have a custom Blogger template where you want to add web fonts. Let’s start with Merienda as our example font and see how we can add this to Blogger.

Previously I had written about animated floating widget for Blogger which was or still is popular. But many didn’t liked it for the animated effect and wanted it to be fixed while scrolling. Many requested for this and after giving a thought I am writing this for you. So let’s get started with it and add a fixed sharing buttons widget that will float to the left (or to right) of the Blogger post section.

On April 24, 2012, Google released a new search algorithm , later it was named Penguin. This was mainly meant to stop “webspam”, that is, mainly to bring down the sites which use “black hat” methods to rank well in Search Engine Result Pages (SERPs), like, violating webmasters guidelines , keyword stuffing, participating in link schemes, etc. When I read it I was happy that after the Panda update , Google moved a step forward to stop those spam sites who wishes to rank well within SERPs by shortcut methods. But as days passed, I became very sad and depressed as I found out that my blog also got hit by this update. My traffic dropped below 50%, some of my great posts cannot be found within SERPs and some went very down.

Pinterest have launched their sharing buttons, why not have it for Blogger. “ Pin it ” buttons has counters and comes in three different sizes. But before you add it to Blogger posts, let’s see what you have to do first. For those who don’t know about it yet, Pinterest allows you to organize and share your interests on a virtual pin board. It has become famous because not only this site is beautiful but also is very easy to share and manage your “pins”. You need to use it to believe it.

Now Blogger has become more Search engine optimization ( SEO ) friendly with its new and updated features. You are ready to enable the SEO settings for your blogs and remove all hacks and customizations that you have done to your Blogger templates so far. But do you really know which or what should be used and when? Unlike the three letters, SEO, which creates the acronym, it is a vast term and there are so many guidelines you have to follow to increase your traffic from ‘natural’ search results. Simply speaking, following the guidelines, SEO can be done in two ways, off-site and on-site. Off-site means preparing yourselves thinking “ what if there were no search engines then how people would have reached my site?”. There are many ways, like, getting social and create Google+ Page and Facebook Page .

It seems that many of you who have enabled Blogger’s Threaded Comments are having problems to view your blog mainly in IE (Internet Explorer) and Chrome (by Google). Problems such as, you are viewing a blank page even if your blog loads or the page freezes in IE and/or the Reply function not working in Chrome. These two things are common and can be fixed for the time being.

It came to my notice that even though you have enabled the proper settings , still many of you have failed to install/see/have the threaded comments and it’s not working on your Blogger template. This is mainly happening to those who have customized their templates or have downloaded it from other sites. Well, I think I have got what it needs to get it back.

You may have seen this in WordPress blogs, now Blogger also has this too, it’s threaded commenting . Blogger has introduced a new improved commenting system for us. So what’s that actually? Well, now it’s possible to reply on an existing comment to start a conversation. It will be displayed as threaded (or nested). See an image example below: Image from Blogger Buzz

The Open Graph Protocol help web pages to integrate into social graph. It combines all the unstructured data of a page into a structured information so that the page can be defined how it will be represented on social networking sites. According to Facebook, if you include Open Graph tags, you will have the ability to treat your page same as Facebook Page . If you have added Plus One button and/or Like button then you may want your page to get integrated into the social graph of Google+, Facebook and other social sites when they are shared. WordPress has many plugins but users of Blogger needs to add Open Graph protocol Meta tags manually to Blogger and to its post pages by editing the template. In this tutorial I will explain it in simple steps.

Blogger finally rolled out templates with Dynamic views. It is built with all the latest technologies like HTML5, CSS3 and AJAX. Blogger adds that “ Dynamic Views is a unique browsing experience that will inspire your readers to explore your blog in new ways ”. To find out, you can setup a test blog (it’s better to test things out before applying it for your main blog) and apply the new dynamic templates from Blogger’s Dashboard > Template tab. You will find that there are 7 templates to choose from, namely, Classic, Flipcard, Magazine, Mosaic, Sidebar, Snapshot and Timeslide.

Twitter has officially launched their Follow Button, which can be also added to Blogger. The best feature of this Follow button is that your readers don't need to visit Twitter to find and follow you. Instead, with just one click, they can instantly follow you without leaving your blog. It can also show the number of followers you have and can also be customized according to your needs. You can always visit Twitter official page to get the Follow Button but having it for Blogger posts requires a series of simple steps which I will guide you through.

Google.com, as we all know, is the search engine giant and to stay in this position it makes some rules and changes its search algorithms overtime so that it can give users more relevant search to its users. One of such change that was introduced on February, 2011 was the “Panda” algorithm. Panda ready to fight for Google

Most of you must have heard or is using Blogger’s new updated user interface on draft.blogger.com. Well, for those who love the new UI can now enable it from Blogger.com. You will find the option on top right corner as “Try the updated Blogger interface” on your Blogger’s dashboard. Here are some images of new UI, extracted from Blogger Buzz, for those who are new or didn’t use it previously.

Related posts widget is demanding for Blogger users as this help your blog readers to know about your older posts. While there are many widgets available on different blogs, there aren’t many which are more customizable than this one which I will be sharing with you. Why more customizable? It’s because you will get both Related Posts and Recent Posts widget which can be a link list, link list with image thumbnail or with only thumbnail with popup title, transition effects and above all, it’s fast. This is one of the best widget for Blogger ever made and found on the web.

I was hoping that Blogger will enable us to add our own favicon, also known as favorite icon or shortcut icon. Well, it has already been enabled for us to add custom favicon to Blogger powered blogs. My assumption was correct because while writing the post about adding +1 (plus one) button to Blogger , the image that was provided by Blogger Buzz was telling that something new is going to happen. For example see the image below:

I have been always asked “ why Facebook does not show the description of the post when it has been liked or shared by the readers ”. In this post I will discuss different methods to solve this problem. Facebook has updated its scripts and codes which results in showing a small description of the post and an image whenever it is shared within Facebook. But people who are using Blogger and have added the Facebook Like button ( iframe or XFBML ) finds that when anyone likes a post, the description of the post is not seen or scraped by Facebook, instead there is only the title of the post and your blog’s link. This is a concern for many bloggers who are blogging on Blogger platform and to be honest, there’s no problem from yours end as it’s a problem of Blogger’s Post Editor itself.