Simple Blogger Tutorials

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.

If you are blogging then you must have created Facebook Page for your blog. Now do not keep it blank, post something so that Facebook users who have Liked your Page can engage with it. You can post status updates with interesting discussions or can update it with your newly created blog posts.

Send button by Facebook enables your blog readers to send your content to their Facebook friends privately in their inbox or to the group wall or to any email address. Let’s see how to add Send button to Blogger .

I got many emails asking me how did I make a separate page for the labels and archive for my Blogger blog. Well, first get a live example of my explore tutorials page and then see the tutorial for it. The whole process is a complicated one as this includes the proper use of conditional tags to hide a gadget from appearing in other blog pages rather than a particular page. So here we have to create a page and hide the label or archive widget from appearing it in every other pages rather than the separate page that is specially created to show these widgets. At first you have to publish a page. You can just publish a simple post and hide the post or can create a static page . Now add the label widget or the archive widget or both the gadgets from Blogger’s Layout tab and drag them just below the “Blog Posts” gadget (as shown in the picture below) and Save ” it

Today I will tell you how to show different Blogger gadgets or widgets on different or specific posts or pages. Previously we learned about conditional tags and how to use it. In this tutorial we need these tags to hide the gadgets. So first go to Blogger’s Layout tab and add a “HTML/JavaScript” gadget. I prefer it because it will be easy for everyone to understand. Give it a unique tile so that it does not match with any of the titles of other widgets added (if any).

After Facebook deprecated the share button, the Like button became one of the famous and widely used social sharing button as it let your blog readers to share your posts and articles with their Facebook friends with just one click. When you will visit the official page you will find that there are two different versions of Like button for which the implementation processes are also different. The most flexible one is XFBML but it requires a series of steps before it can be added to any webpage while Iframe version of the Like button is more easy to add. So here we will find out how it can be added to Blogger blogs.

Conditional tags in Blogger are used to tell browsers what to do in certain conditions . It is a great way to do certain things like hiding widgets or gadgets or your share buttons in Blogger. For example, when we want to show “Hello world” on post pages and “Goodbye Cruel World” on every other page then we can use it as: <b:if cond='data:blog.pageType == &quot;item&quot;'> Hello world <b:else/> Goodbye Cruel World </b:if> A conditional tag comes handy when you are designing your Blogger blogs and customizing and editing it from the scratch. But first you need to know how many type of pages are there in Blogger and then how to use these conditional tags respective to that type of page. In this tutorial I will try to cover most of it, so let’s start.

In many Blogger blogs you may have found that the default comment form’s width is much smaller than the post body width. When you are customizing the design of your blog then you must be also thinking to increase the width of the Blogger’s comment form. In this simple tutorial I will tell how to expand it. Normally, the default width for the comment form of Blogger is fixed at 425 pixels . So we just need to override this with a CSS definition.

Today we will learn to highlight author or admin comments in Blogger so that your comment as administrator stands out from comments posted by others. Blogger has advanced and many new codes are added. So to highlight the author or the admin comment in Blogger you have to just apply some simple trick to activate it. But however, this tutorial is not meant for those who have enabled threaded comments . Here’s an advance method to do it. You will find that not the comment body but the whole section of your comment as admin or other comments as author will change. So first just follow the steps:

Previously I have told about what will be Blogger in future . While looking at the screen shots I was really amazed. But today while I logged in to blogger, a popup opened informing about the new dynamic templates by introduced by blogger. I didn’t waste any time to visit Blogger Buzz to see what’s all this about. And finally it was all clear.

Blogger Buzz introduced the new " Follow by Email gadget ". It's an email subscription box widget which let your readers to subscribe to your blog posts by email. This widget works in conjunction with Google FeedBurner . Whenever you write a post and publish it, your readers, who have subscribed to your blog by email, will be able to get the updates to their inbox. Let's have a preview of the new gadget.

Previously I have told what Blogger is on 2011 but blogger buzz now tell us what will be blogger in future . So let's have a look at upcoming changes. New Post Editor

Let’s go one step forward and add an extra gadget section within Blogger header in new template designers. Within this gadget section you can add anything that you may want, for example, subscribe buttons, search box or your AdSense ads within the Blogger header. Demo In previous tutorial I have told you how to resize Blogger header which is needed to be done first to give space for the extra gadget to fit in. If it is done then follow the below steps.

One of the drawbacks of Blogger is its header. When you are using text as your blog title, you will find that there is no problem but when you add an image or logo to the header portion instead of title and description or having description placed after the image from Layout tab, you will find that it’s not the logo but the whole header becomes clickable. So in this tutorial we will find out how to resize the Blogger header in new templates.

Blogger is evolving day by day and bringing many improvements to us, blogspot users , making it easy to use some advance settings. For example, some of the previous updates are popular posts widget , stats widget and spam filtering for blogger comments , enabling read more and many more. Within this month, blogger has added some more to it. Let’s see what those are:

To bring professional audience to your blog, let’s add LinkedIn share buttons to Blogger. It’s official and has counters. These share buttons, also known as “inShare”, comes in three different sizes. Let’s have look with live examples.

Twitter has released their official share buttons with counter. In this tutorial we will discuss on how to add this Tweet Button to Blogger In this new Tweet Button, you can customize the size, mention yourself and can also mention related Twitter user whom you may want to be followed by others. So have a look at the live example below by tweeting it.

Today we will learn how to add Facebook Like button to Blogger (XFBML/HTML5). After using the Iframe version, I was thinking if it could do something which will enable my blog readers to leave a comment while sharing. So I checked and found out the JavaScript version of Like button which has a Send button too. When someone likes your post to share it with their Facebook friends, it will open a popup comment box to leave a comment which will give it more prominence . To get this you can visit the official page . Here I will try to explain it in simpler form. Facebook Like Button for Blogger Step 1. Log in to Blogger, go to Template tab, then click “Edit HTML” and check “Expand Widget Templates”. Step 2. Though this step is not required as I have updated the rendering codes with HTML5 version but still you may include this for certain reasons. Find the highlighted HTML attribution: <html ...... xmlns:expr='http://www.google.com/2005/gml/expr'> After this, add XML name...

The best way to get to the top in Digg is by adding Digg This button to Blogger which let your readers to easily submit and share your content. It displays the real-time count. In the official page, you can find the script and codes which are meant for developers. But in this tutorial, I will tell you in more simpler form about Digg Smart Buttons for Blogger. You just need to select the appropriate size from four diffident types, configure it and you are ready to go.

Blogger has finally rolled out the Jump Break feature which will add a “Read more” link to every posts if every step is done correctly. That is a great news but if style matters then you have to put some more effort to edit, customize and style it. There can be so many reasons for why you want to edit the Jump Break link. Within this post I will try to cover most of the reasons and solve most of the problems as far as possible, let us see those.