Easy HTML Tricks for Blogging

Adding Intense Debate to Blogger

If you have visited a Wordpress blog, then you must have seen the comment form which has option to fill the Name , email id and Blog address. However the Blogger blog doesnt have such a comment form. The Blogger comment system has only three types
1. Full page
2. Pop-up window
3. Embedded below post

Out of the three options, the first two should be avoided as much as possible as only the blog comments are visible below the post. To comment on that post you have to visit another page. This increases the work of the blog reader and there are chances that they may not comment as they have to visit another page.

The third option is better than the other two as it is an Inline Comment Form. But even this comment form isnt very good as there aren't many options that are available in Wordpress Comment Forms.

We cant know the email id of the person who has commented on our blog nor can we block spam comments. Also there is no option to ban certain person from commenting on our blog.

However we can add these features on on our Blogger Blog by using Intense Debate.

Intense Debate is a commenting system which has been created by Automattic who are the creators of Wordpress. Below is the pic of the Intense Debate Comment Form on a Blogger Blog.

Here are some of the features of Intense Debate:

1. Comment Threading : With Intense Debate Comment Threading is possible which means we can reply to comment. This is very useful as you no longer have to put your comment at the bottom of the comments even if you want to reply to the first comment.

2. Moderation and Blacklisting : You can moderate the comments being posted on your blog and can blacklist comments by specifying certain keywords which are present in the comment by adding them to the moderation list or automatically deleting them.

3. Gravatar : With Intense Debate you will get support for enabling Gravatar in your blog. So if you have a Gravatar, then you will see your picture beside the comment.

4. Smileys : Intense Debate also provides Smilies in the comments. This makes your comments look better.

5. Add Image : Using Intense Debate, you can add an image to the comments.

6. Widgets : When you add Intense Debate to your blog , you get a variety of widgets which you can add to your blog. You can display the total number of comments made on your blog or some of the following widgets:

Recent Comments Widget
Popular Blog Post Widget
Top Commenters Widget
My Recent Comments Widget

7. Add Polls : You can also add polls in the comments if you have an account at Intense Debate

8. You Tube Videos : The Intense Debate users can also add You Tube videos to blog comments.

9. Twitter : With Intense Debate, the blog commenters have the option to send a simultaneous tweet when they post a comment.

10. Email Id : When you select the option to get email updates whenever there is a new comment, you get the email id of the person who has commented in that email.

With so many features, it is better if Blogger users start using Intense Debate instead of the boring Blogger comment form. Adding Intense Debate to your blog isnt that tough.

To add Intense Debate to your blog, you have to create an account at Intense Debate. After that you have to follow three steps.

In the First Step specify the address of the blog for which you want to add Intense Debate

In the Second Step, you have to select the Blog Platform. We will choose Blogger.

After clicking on Blogger comes the most important step. In Step Four you have to choose whether you want to install Intense Debate as a Widget or directly into the Template. Installing it as a Widget is easy but it can increase page load time. Choosing the Template option will reduce the load time but it is tough compared to the Widget option.

You also have to choose whether you want to install Intense Debate for all your posts or only the new posts. If you have many posts with comments then select the second option, otherwise your comments will be hidden.

If you want to save your work, then choose the Widget option to install Intense Debate. When you click on the widget option, you will see some instructions which will tell you how to add it to your blog. Jump to the 4th instruction which contains the link "Add widget to my blog". On clicking it, you will see your Blogger account on the right side. Select the blog for which you want to add Intense Debate and click on Add Widget. Thats it, and your work is over.

But it will be better if you choose the Template option as it will reduce the page load time. Before starting this step, it is better if you backup your template. Goto Layout>Edit HTML and click on Download Full Template. When you will click on the Template option, you will see some instructions below it. . After the download is complete, read instruction no.4 . In this step you have to select the template that you have just downloaded and Upload File.

On uploading the file, you will see a new set of instructions on the left side and your Blogger Dashboard on the right side. Jump to the 3rd instruction. You will see a box in which there is some code. Click on it to select it and copy it.

Once you have copied the HTML code, go to Layout>Edit HTML and select Expand Widget Templates and replace the earlier template code with the one you have just copied. Now click on Save Template. Now you have finished installing Intense Debate to your blog.

I hope that you found this tutorial useful. If you are facing any problems, please comment your and I will try to help you as soon as possible

Improving Bounce Rate with Google Analytics

Google Analytics defines bounce rate as: "The percentage of single-page visits or visits in which the person left your site from the entrance (landing) page. Use this metric to measure visit quality - a high bounce rate generally indicates that site entrance pages aren't relevant to your visitors." Therefore, a high bounce rate is bad but a low bounce rate is a positive sign that your visitors are engaging and exploring your website. So what constitutes a good rate? This is a very hard question to answer, but if you do some research, most say it needs to be under 50%. It also will depend on the type of site that you have. For example, if you're a blogger, many times a visitor will come to your blog to read the latest updates then leave. Thus more often a blog will have a higher bounce rate than a "normal" site as there is no need for them to go any deeper. How do you know what your bounce rate is? One free program that makes it easy is "Google Analytics". Register, list your sites and paste some HTML code on your pages and you're ready to go. You'll clearly see your bounce rate go up and down as you view the in-depth reports. So, how can you improve your bounce rate? First, you'll need to track the rate over time, and also look at the amount of time your visitors are sticking around. Also, take note of the traffic sources. Where is the majority of the traffic coming from? Search engines, direct links, social networking sites like Stumble Upon or Twitter, etc. The source of the traffic and the quality of that traffic will contribute to the overall bounce rate being higher or lower for the week. Some traffic, depending on the source will naturally convert better than others. As you can see, bounce rate is an important statistical measure and says a lot about the "stickiness/effectiveness" of your website. By studying your site's bounce rate, you really can learn a lot as to what's working and what's not with your website. It really is an important number to know and one you'll want to continually strive to improve upon.

Remove Blogger Nav bar Completely

Blogger has got a default Navigation Bar. This navigation bar is hidden in most of the third party templates. Instead of hiding the nav bar using CSS, we can completely remove it.
To do that
1. Login to your Blogger account and navigate to Layout > Edit HTML
2. In the Template Code find <body> and just above that add the following Code.

<!--<body>-->

3. Now Save the Template and you will see a confirmation about deleting the Navbar Widget. Confirm the Deletion by Clicking on the Delete Widgets Button

4.Now your Nav bar is completely removed from your Blog.

Advantages of this Method

You will be completely removing the nav bar and not hiding it. The nav bar iframe codes wont be present in your blog’s HTML source and so the blog would be more Search Engine Friendly and your blog will have a more valid XHTML code..

Disadvantages of this Method

You will no longer see the Quick Edit pencil

or wrench links

on your blog even if you are logged in. This is not a a big deal. You can Edit the Widgets from the Layout > Page Elements Page. You wont see the Comment Delete icon near your comments even if you are logged in.But you can definitely manage the comments from the Blogger Comment Tab.It would also be a good idea to completely remove the Quick Edit and Wrench Links from Blogger

How to Get back the Nav Bar?

If you followed this method to remove the nav bar and now want to get it back, then delete the extra code that you added. i.e remove the code from step 2, that you added into your template and Save the Template.

Set your Photo as Background Image of Blog

How to use your Photo for the Blog Background?

Requirement

You should be using a Template Designed using the Blogger Template Designer

The Background may not look good on all of the Templates in the Template Designer
Steps
1.Login to your Blogger in Draft Dashboard at http://draft.blogger .com
2. Go to the Design Link and Click on the Template Designer

3. Click on Background Image under the Background Tab

3. In the Overlay Window you can upload your own Image

4. Once the upload completes, click on the uploaded image and you will be able to see a live preview

5. Click Done and Apply these Changes to the blog.

Official Sharing Buttons on Blogger

Blogger has been rolling out new features to improve the looks and usability of the blogs. Blogger is now testing out a new Social Sharing icon set consisting of Email, Blogger,Twitter(with goo.gl shortener),Facebook and Google buzz buttons. The set looks simple and elegant with some cool mouse over effects. These Sharing buttons are now available in your regular dashboard.If you need to take a peek at these new sharing icons, then take a look at my post page(and try sharing it :P ).
You are still reading. So i guess that you are really interested in implementing these Sharing buttons on your Blogger Blog.
Then don’t wait. Just follow these simple steps

Login to Your Blogger Dashboard
Go to Design > Page Elements and Click on the Edit Button near the Blog Posts Gadget and check the “Show Share Buttons” Option
You can Drag and Drop the Share buttons and place it where you want.
Now if everything went right, then you should be able to see the Share buttons on your Blog. If not then read on. :)
If it didn’t appear then don’t worry, That is because you are having a modded template. Just Go to the Edit HTML page under the Design Tab , Check the “Expand Widget Templates” Option and locate
```
<p class='post-footer-line post-footer-line-3'>
```
Or if that is not there then find
```
<div class='post-footer-line post-footer-line-3'>
```
Or if that is not there then find
```
<data:post.body/>
```
and place the following code just below any of these lines[whichever is present in your template].
```
<div class='post-share-buttons'>
   <b:include data='post' name='shareButtons'/>
</div>
```
and Save your template.

Optional Tweaks

Show the Sharing Buttons on Post pages only - Find the Following Code in your template

<div class='post-share-buttons'>
   <b:include data='post' name='shareButtons'/>
</div>

and wrap it within conditional tags as

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons'>
   <b:include data='post' name='shareButtons'/>
</div>
</b:if>

Hide Some of the Sharing Buttons – If you want you can hide some of these buttons using CSS. For example to hide the Blogger sharing button, add the following code above ]]></b:skin> in your template
```
.sb-blog{display:none}
```
sb-email , sb-twitter, sb-facebook, sb-buzz and sb-blog are the different Button Classes. If you hide the mail or buzz buttons, then it might look a little bad as these have rounded edges,
How to add the text “Share this:” before the Share Buttons? – This was one of the questions asked in the comments.So here is how to do it.Go to Design > Edit HTML and “Expand Widget Templates”.Look for
```
<b:if cond='data:post.sharePostUrl'>
```
Just below that add
```
<table border='0'><tr><td><b>Share this : </b></td><td>
```
Now Look for the first occurrence of
```
</b:if>
```
that comes after that. Just above that add
```
</td></tr></table>
```