How to Add a Hit Counter on Blogspot

If you have a Blogger blog on Blogspot, you will have a lot of standard options you can add to the layout. One of the things you will not see included on the layout page is the ability to add a hit counter. But one can be added through a third-party vendor.

Instructions

Step 1
To add a hit counter on Blogspot, sign up for a free account on StatCounter http://www.statcounter.com/ and click on "Proceed & Add A Project."

Step 2
Enter the Blogspot URL, the blog name and select a category for the blog. Click "Next," then click "Configure & Install Code" on the next screen.

Step 3
Select if you want your counter visible or not, then click "Next." Select if you want your hit counter to show unique visits or page loads and what number you want the counter to start at, then click "Next." Select if you want text or graphic, then click "Next." Customize fonts, colors and number of digits, then click "Next." Select "Blogger/Blogspot" under "Installation Options," then click "Next." This will complete the setup wizard.

Step 4
Once the setup wizard is complete, you will get some HTML code for your hit counter. Select and copy all of the HTML code where it reads "Your StatCounter code:."

Step 5
Log into your Blogspot blog and click on "Layout." Click "Add A Gadget" on the side or the bottom. You can choose where you prefer to have the hit counter. Select "HTML/Javascript" from the list of gadgets. Paste your code in the area of the screen where it says "Content" and click "Save." After you do that, the StatCounter hit counter is installed on your Blogspot.


[OR]
Adding a simple page hit counter
Maybe there among my friends who struggle making (install / make) page hit counter blog.Page useful to know the web page has been opened how many times. So help us to know that our website visited by many other people, or not. There are many websites that provide hit counter script, you only need to register your site (blog) you to their sites, if approved and then we'll get a script that can be installed in the sidebar gadget blog.

Procedure for making page hit counter on the blog is:

1. Click the following link to register http://www.easycounter.com/ your blog

Fill registration sheet and the counter type select HTML, select the Counter style you are going to use, then click the "Create My Account"


[OR]
http://www.free-easy-counters.com/

How to post an image in its original size on Blogger or "Blogger scales down my images"

In this post I will explain why Blogger scales your images down and how to post an image in it's original size in Blogger.

Why this happens? By using a Blogspot blog you receive an option to upload photos directly to your blog from the editing interface. The photos will be stored in your Picasa account. However, Blogger restriction for this is that it doesn't allow you to hotlink to your photos in full size - the maximum hotlink size of your image is 800x800.

Even more. By default, even if you choose "Large size" when you upload your photo, it will still return you a link to 400x400 images, and it especially hurts if you want to post some code snippets or precise pixel images.

What to do? There are some good news though. Most of the Blogger posts aren't more then 800 pixels wide (and even if they are, you should always think about how it's gonna look on a display of someone who doesn't have 1600x1200 resolution - you also have right and left columns that hog the display space, right?)

To make your images/pictures/photos look fullsize in your blogger posts you need to edit the link to this picture. Once you upload an image from the editor interface, the code for the image will look like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bpV.blogger.com/
WWWWWWWWWWWW/XXXXXXXXXXX/YYYYYYYYYYY/
ZZZZZZZZZZ/s1600-h/my-sample-image.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://bpV.blogger.com/
WWWWWWWWWWWW/XXXXXXXXXXX/YYYYYYYYYYY
/ZZZZZZZZZZ/s400/my-sample-image.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_UUUUUUUUUUUUU" /></a>

Where UUUUUUUUUUU, V, WWWWWWWWWWWW, XXXXXXXXXXX, YYYYYYYYYYY and ZZZZZZZZZZ will be some mixed digits/letters.

See the text s400 that I've highlighted here in green? That's what you need to change. Change it to s800 and you are done.

Update: Blogger has recently started to add width and height into the tag, so now you also have to remove them. Just look for the text height="XX" and width="YY" and remove it before publishing the post.

This guide will help you to post full-sized images to your BlogSpot blog, if these images have less then 800x800 resolutions. If you need to post a bigger image — use services like imageshack. There is a great list of image hosting sites available on the Blogger templates blog. I wouldn't recommend to use Photobucket as it has some PhotoBucket image hosting issues though.

That's it. Enjoy.

How to Create Tables in Blogger

Almost everyone has a blog, and does post regularly. But when it comes to creating tables in the blog (especially blogger) then one faces lot of problems. There are the following things which comes in picture while creating a table in a blog,

* How to create table?
* How to eliminate the white space in the post, when the table is created using the HTML code?

This post will describe some of the different ways to create the tables in the blog, along with eliminating the white space formed while creating the tables in HTML. Here we go,

Different ways to Create Tables in Blogger

There are many ways to create cool and well formatted tables in the blogger.

1. Creating the table in the simple HTML format,
2. Creating the table in the Google Spread Sheet, and
3. Create a table in MS-Excel and then take a snap shot and upload as a picture.

1) Creating Table in Blogger’s Post by using HTML code

This is the simple and well known method to create table in the blog post. It’s as easy as posting the post. Just write the code for creating the table, with rows and columns, and you are done. The first thing to be kept in mind is, you should be at least aware of how to create tables in HTML. And hence you can go ahead and create one for your post. But this has a certain draw back, as it leads to a lot of white space between the post and the table and looks too weird. Read below to find how to eliminate these white spaces.

2) Creating Table in Google Spread Sheet

Creating the table in Google’s Document, i.e., Spread Sheet, is quite easy, and moreover after publishing the table, you can just copy the code and place it in your blog’s post where you want the table to appear.

How to create table using Google Document’s Spreadsheet?

Creating the table is quite easy in Google Spread Sheet, the following things to be noted while to create the table,

* Go to the blogger’s “dashboard”.
* Click on “My Account” on the extreme right side.
* Under “My Products”, click “DOCS”.
* Now click NEW > SPREAD SHEET
* The SpreadSheet is divided inot Rows (number going down) and Columns (letters going across)
* Now fill the information in the spread sheet and make the formatting as desired.
* Save the spreadsheet by clicking, FILE > SAVE
* Now publish the sheet, click – Publish > Publish Now
* Select Sheet 1 Only in the next box under “What Parts”
* Then at the bottom of that box, click “More Publishing Options”
* In the next box that pops open, choose the HTML format: HTML embeded in a web page
* “What Sheets” click “Sheet 1 Only”…again.
* Now count the numbers of the table, i.e., The starting cell and the end cell in exactly diagonal fashion.
* Then click “generate URL”

And now you are done to publish the post in your blog. Just copy that code into your post and hence your spread sheet/table is on your post.

3) The simplest way

Create a table in MS-Excel and then take a snap shot and upload as a picture into your blog, and hence you are done. Even though that’s not exactly creating a table in the blog, but it’s another way to put your table in the blog’s post.

How to Eliminate that white space between the Table and the Post?

Now we have created the table by generating the HTML code for the same, and have published the blog. Now the most irritating thing is when you see the outcome of the blog, it’s shocking and disappointing. You are indeed with a table, but that table is making your blog look bad with a lot of white spacing between the post and the table. And more over all the formatting is lost. So, two things come in the mind suddenly,

* how to reduce that white space
* how to get back the formatting

How to reduce the white space?

The first thing is to reduce that large empty white space between the posts. Let us consider the following examples,

Example with Large white space:

The SEO Blog Large White Space
The SEO Blog Large White Space

Example with reduced white space:
The SEO Blog Less Space
The SEO Blog Less Space

The logic behind to reduce the white space when you have created your table is, every time you press enter in order to create the next row or column cell, that many times blogger considers it as a “BREAK”. So that implies if you go for another cell, by pressing ENTER, then one space will be created, and so on.

But in another example, I have taken the entire code of the table as a single line and hence there is no white space. So here we are with no white space.

The major drawback to put the entire code of the table in one line, in order to reduce that white space is, it becomes too clumsy and difficult to manage the table. There is another way also, which I have used in my post. Just add the code in the DIV tags, and see that it works

Just Add the following code, and paste your table code in the mentioned place

<style type="text/css">.nobr br { display:none}</style>
<div class="nobr">

<!--- Paste your Table Code Here --->

</div>

doGet() and doPost()

Let's say you have 2 HTML forms:
--------
<form method="get" action="MyServlet">
<input name="someData">
<input type="submit">
</form>
--------
<form method="post" action="MyServlet">
<input name="someData">
<input type="submit">
</form>
--------

Notice the "method" in each form is the only thing that differs. GET is the default. With a GET, all the data in the form is encoded in a QueryString and appended to the URL of the servlet. This is typically used for small amounts of data. POST is used for large amounts of data. For more information regarding GET vs. POST, go to http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html to read the Method Definitions for HTTP.

HttpServlet has a service() method. The purpose of service() is to analyze incoming requests and determine appropriate method calls. If you make an HTTP request and the form method was GET, then service() will call doGet(). If it was POST, then the service() method will call doPost().

Of course, when you create your own servlets, you're extending HttpServlet...so service is inherited from the superclass. You're free to override it.

Putting the same code in doGet() and doPost() is a waste of disk space. If they're meant to have the same functionality, do something akin to the following:

public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
performTask(req, resp);
}

public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
performTask(req, resp);
}

private void performTask(HttpServletReq

uest req, HttpServletResponse resp) throws ServletException, IOException {
// put your code in here
}

You probably don't want to override service() to achieve this result because doGet() and doPost() aren't the only methods service() deals with.

difference between doGet() and doPost()

[Please right click and View Image in order to view the full image.]

#	doGet()	doPost()
1	In doGet() the parameters are appended to the URL and sent along with header information.	In doPost(), on the other hand will (typically) send the information through a socket back to the webserver and it won't show up in the URL bar.
2	The amount of information you can send back using a GET is restricted as URLs can only be 1024 characters.	You can send much more information to the server this way - and it's not restricted to textual data either. It is possible to send files and even binary data such as serialized Java objects!
3	doGet() is a request for information; it does not (or should not) change anything on the server. (doGet() should be idempotent)	doPost() provides information (such as placing an order for merchandise) that the server is expected to remember
4	Parameters are not encrypted	Parameters are encrypted
5	doGet() is faster if we set the response content length since the same connection is used. Thus increasing the performance	doPost() is generally used to update or post some information to the server.doPost is slower compared to doGet since doPost does not write the content length
6	doGet() should be idempotent. i.e. doget should be able to be repeated safely many times	This method does not need to be idempotent. Operations requested through POST can have side effects for which the user can be held accountable.
7	doGet() should be safe without any side effects for which user is held responsible	This method does not need to be either safe
8	It allows bookmarks.	It disallows bookmarks.

When to use doGet() and when doPost()?

Always prefer to use GET (As because GET is faster than POST), except mentioned in the following reason:
If data is sensitive
Data is greater than 1024 characters
If your application don't need bookmarks.


How do I support both GET and POST from the same Servlet?

The easy way is, just support POST, then have your doGet method call your doPost method:

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
doPost(request, response);
}


Should I override the service() method?

We never override the service method, since the HTTP Servlets have already taken care of it . The default service function invokes the doXXX() method corresponding to the method of the HTTP request.For example, if the HTTP request method is GET, doGet() method is called by default. A servlet should override the doXXX() method for the HTTP methods that servlet supports. Because HTTP service method check the request method and calls the appropriate handler method, it is not necessary to override the service method itself. Only override the appropriate doXXX() method.

How to post XML code on Blogger

In order to post XML code on Blogger, we had to encode the code. Rather than do it the tedious way by hand we can use a site such as http://centricle.com/tools/html-entities/ to encode it for us

Servlet Life Cycle Steps

Step 1.
Container reads the Deployment descriptor and read the servlets class name element value
say for example:
<servlet>
<servlet-name>MyServlet</servlet-name>
<servlet-class>com.mycompany.MyServlet</servlet-class> <!-- This value will be read.
<init-param>
<param-name>myVariable</param-name>
<param-value>1</param-value>
</init-param>
</servlet>

Step 2:
The container loads the class
Class clazz = Class.forName("com.mycompany.MyServlet");

Step 3:
Creates an Instance of the Servelt class,
Servlet objServlet = clazz.newInstance();

The above step will invoke the default contstructor (Zero parameter constructor of the servelt class. The spec dictates that Servlet Code should have a constructor with zero paremeter i.e default constructor).

Step 4:
The container then reads the initialization parameter "init-param" xml tags, and constructs a ServletConfig object and inovkes the
objServlet.init(config)

After which the servlet will be move the serviciable state from there on the Servlet instance is ready to service any request from the client.