Blogger Tutorials

Google +1 Button Configuration Options - Blogger

In the previous blog post, we discussed how to add a basic +1 sharing button to your blogger blog post using Javascript.In this post, we will extend the example provided earlier and see what customization options are avaialble to us, if you want to play around with the size of the +1 button. You will find that it is very easy to customize this new sharing feature to suit to your needs. I will ....

Add Google +1 Button to Blogger - Example Tutorial

Here is a detailed tutorial on how to add Google +1 Button to your blog posts using code. Keep watching this space for more.. ....

Index of Blogger Tutorials

Google +1 Button Configuration Options - Blogger How to Add +1 Button to Blogger Blog Post - Javascript Approach Example Add Google +1 Button to Blogger - Example Tutorial How to Use CSS Sprite Blogger Tutorial Example - Part 3 Using SpriteMe Tool Example CSS Sprites How to Use CSS Sprite Blogger Tutorial Example - Part 2 How to Use CSS Sprite Blogger ....

Adsense Ads not relevant - Blogger

I have been hearing this from my friends for quite some time till today. Here it goes:- I have been studying this for the past few weeks till now and the problem persists. My problem is,the Google Adsense Ads displayed on my blog post are not relevant to the content I have provided. I'm getting a poor CTR due to this and the ads don't really appeal to my audience.I did try using the Google ....

Digg Widget For Blogger - Standard HTTP Request

In our quest to build a Digg related post widget for Blogger, we are going to see how to create a standard HTTP request call in Java to invoke a HTTP GET method to get the posts of our interest. We have a URL on hand to be invoked and all we need to do is pass some parameters to the URL and invoke a standard GET method.An example code to invoke a HTTP GET method from Java is provided below.import ....

Related Post Widget for Blogger - Filter URLs and Display Related

Till this point, we have used the Google Feed API to get all the related URLs for a given blog post. We have also invoked it iteratively and pushed all the resulting URLs into an Array. The step that is left over is to filter the duplicate URLs from that array and stamp the result to an output HTML file. Once this is done, we have a running code for us, and to integrate it to blogger, we have to ....

Related Post Widget - Blogger / Blogspot

Much has been discussed about this. Lot of posts in the internet discuss about related post widget for blogger. There are some workable solutions posted by Hoctro elsewhere in the web. But, I somehow felt that those widgets were relatively slow to load and often crashed by Firefox / IE. So, I decided to write one related post widget on my own, using the Google Ajax Feed API. I must really thank ....

How to Use CSS Sprite Blogger Tutorial Example - Part 3

This is Part 3 of the blog post series, that provides an introduction to using CSS Sprites in your blogger blog. This tutorial can be applied to any website for that sake, but we target Blogger because of the complexity involved in editing the blogger template. Till this point,we have a sprite image with us and we are after using it in our blogger in a way so that it improves the performance of ....

Best Facebook Send Button Widget for Blogger / Blogspot

In this post, we will see how to add the Facebook Send Button as a widget to your blogger blog. This is the simplest way to add the Send button widget for those who are novice to HTML and Javascript or tweaking Blogger templates. I have also tested this on my test blog and it works fine.I have also given the source code of the widget at the end which could be useful for developers. To add the ....

New Related Post Widget for Blogger

....

Best Related Post Widget Blogger

There are a lot of related post widgets available for Blogger and this post describes the best of them. Before we proceed any further, the best related post widget can be accessed from the following reference URL: ....

Related Post Widget

Today, the layout of Thinktibits was altered slightly. The widget used to display related posts (Hoctro's Widget) was replaced with the widget that I wrote by myself. This widget is amazingly fast when compared to the earlier one and can also comfortably load more than 8 posts at a time. As of now, I have set up an upper limit of 15 to prevent loading of more than 15 posts. More details is ....

Digg Widget for Blogger - VTD Extract XML

After I wrote the methodology to make an XSLT to extract the response from Digg, I got a request asking for a way to do this in VTD itself and return the response back to the calling module. So, before we dwell on using JQuery and creating a widget in Blogger for this, let us understand how to use VTD to process the response. We have the following output returned from Digg
Digg Widget for Blogger - XSLT Transformation on Response

Ok, so we have triggered a HTTP request to Digg and received the top posts as a XML and hold it in an object for processing. What we need to do now, is to process the received XML and identify the title of the post and link the title with a hyperlink to the actual URL. Once this is done, all we need to do is to push these results to our blog page. (we will not be using Java for that case)To ....

Digg Widget for Blogger - HTTP Request Using VTD

In the earlier post, we saw how to invoke a HTTP GET request using the traditional methods of Java. We also found that we need to write a lot of code for this and a shorter method could be much helpful for us. Since we have to parse the resulting XML to get the links, we have to use a XML parser for this. Across my blog, I have already covered DOM4J to some extent. So, I decided to use VTD this ....

Building a Digg Related Post Widget for Blogger

In this series of posts, we will make an attempt to build a Digg widget for blogger. What difference would this widget make, when there are already plethora of Digg widgets available? Well, this widget would help to find related posts from Digg, with the labels specified against your post.To make this widget, first let us make an attempt to build this widget in Java and later post a solution ....

How to Use CSS Sprite Blogger Tutorial Example - Part 2

In part 1 of this series, we introduced the benefits of using CSS Sprite in your blogger website.We also showed five image files and explained that we will be combining them into one image using CSS Sprite. Now, visit my test blog space where I have hosted all these images into a HTML area now. They are all separate individual images and we will build a sprite with that. As expected ,when google ....

How to Use CSS Sprite Blogger Example Tutorial - Part 1

In this post, we will discuss how to make use of CSS Sprites for your blogger blog. CSS Sprite is the talk of the town. It has been widely acknowledged that CSS Sprites improve the performance of your blog / website by a larger amount. So, if you have a website designed using Blogger,can you take advantage of this technique? If you run a speed test for your blogger blog using Googles Page Speed ....

Location Information to Blogger Posts

A cool feature introduced by Blogger which enables adding Location information to your Blog Posts. To enable, refer to a detailed tutorial on geotagging your blog posts. Thanks to the original blog post that provided this information. ....

Geotag Posts Add Location Info Blogger

I saw a cool feature introduced by Blogger today on adding Location / Maps (geotagging) to your blog post. Whenever you post a new blog item, you will be able to add your location (from where you make the post) for the blog entry. I thought of testing this feature out on my test blog and created a new blog post in it, titling My location post. I entered the title for my blog and clicked on the ....

Related Posts - Blogger - Integration - Widget

We have seen a glimpse of the code to accomplish the task of displaying related posts in blogger. But that is not a complete working one to directly plug into blogger and get going. It is a synopsis to make you understand the approach of created a related post widget for blogger. To integrate, we have to follow the approach given below.1) Add the relevant code to the HEAD tag.2) Create a post ....

Related Post Widget for Blogger - Google Feed API

In this series of posts, we have defined an approach for developing a related post widget for blogger. We have also covered the steps of identifying the labels from a blog post and the eliminated the duplicates from the labels.For all the qualified labels in 'filtArray', we are now ready to move on with the processing logic i.e. retrieve the related URLs.To do this, we have to include couple of ....

Related Post Widget for Blogger - Eliminate Duplicates from Array

We have defined an approach for developing a related post widget for blogger. We have also crossed the first step in the process to identify all the labels for a given blog post. We now have a 'labelarray' container which holds all the labels attached to the displayed blog posts in blogger. Since it is possible to have duplicate labels spanning across multiple blog posts, we are now in a ....

Related Post Widget for Blogger - Identify Labels

In an attempt to demystify the logic behind developing a related post widget for blogger, we have had an introduction where we defined the approach for creating a widget. In this post, we will examine each and every section of the approach we have laid on and dwell more on that with examples. I'm going to explain each of the code snippets in the form of separate Javascripts and we will integrate ....

Add Facebook Send Button Blogger

I have been writing about adding Facebook Send Button to Blogger post for the past few days. We saw multiple approaches to add Facebook Share Button and I would like to present a summary of different approaches for configuring Facebook Social Sharing Plugin to your blog [ with Code ]: Method 1: In this method, you edit the Blogger template and add the send button to your blog post. You will be ....

Blogger Combine Like Send Button

I just learned an interesting note on the Send Button for Facebook. It is possible to combine both LIKE and SEND button together, by just adding an addition option for the LIKE button, if you already have one in your blog. An example image is provided below; Facebook - Both Like and Send Buttons The like button code has got a new attribute called Send. If you set this attribute to True, ....

Facebook Send Button Gadget Blogger

In our previous post, we discussed how to add Facebook Send Button Gadget to Blogger, as Add your Own option in Blogger. Some highlighting features of this Gadget are provided below; 1) You can customize the title and height of this gadget. 2) For developers, who are keen to introduce more configuration options for this Gadget, they can customize the XML code and add their own options like ....

Facebook Send Button Widget Blogger

I was doing a prototype on building a Send button widget for Blogger application. It came out pretty well, except that it is in the initial stages and there is a good scope for customization. This post is for blogger users who need not bother much about HTML and Javascript stuff to add a Send Button widget to their blogger website. Rather, they can add this as a widget if they wish to. Keep ....

Add Facebook Send Button for Blogger Blogspot

In our previous post, we introduced the new Facebook Send Button for Blogger. In this post, we will present a short tutorial on integrating the Facebook send button to your blogger template. I would like this send button to come just below my blog post title. But, you can just extend this tutorial to place it anywhere on your blog. So, to get started, navigate to the URL given in our initial Send ....

Blogger Add Facebook Send Button

In this blog post, we will explain how to add the Facebook Send Button to your blog post hosted on blogger / blogspot. Send button is a recent addition by Facebook, introduced quite recently. To add the Send Button on your blogger blog post, navigate to the following link and select your options. The options you have pick are 1) URL to Send -> You can leave this blank 2) Font -> The font for ....

Best Syntax Highlighter for Blogger Part 3

ok, In part 1 of the blog we installed JEdit and Copy2HTML. In Part 2 of the blog post, we loaded some style sheet changes to the blog to keep it ready for syntax highlighting. In this part, we will show the final outcome. How to enable syntax highlighting? To do this, we will write a simple java program, HelloWorld.java. The snippet is shown below; public class HelloWorld { public static void ....

Best Syntax Highlighter for Blogger Part 2

In our quest to come up with a syntax highlighting tool for Blogger that does not use Javascript, we have downloaded JEdit and installed Copy2HTML plugin for JEdit. We will now edit our Blogger template to load some Style definitions. To do this, click on Design –> Edit HTML and click on the checkbox “Expand Widget Templates”. Now, copy the entire HTML that is shown there and save it as a backup. ....

Best Syntax Highlighter for Blogger–Part 1

If you are an ardent programmer / developer trying to showcase your programming abilities through blogger, I’m sure you would have stumbled across one roadblock – highlighting syntax to make it more readable in blogger. Highlighting syntax in your blog post makes it more readable and easy for anybody to follow / use. If you search in the web for syntax highlighter for blogger, you will get more ....