Add "About the Author" Box Below Every Blogger Post

Hi friends!! I found a lot of Wordpress blogs that include an "About the Author " box/widget below every blog post. So, I thought why not provide the same for the blogger/blogspot blogs. If you had closely watched my blog posts for the past few days, you will find the "About the Author" box/widget installed below every blog post. This new hack will definitely helpful all those bloggers who have multiple authors for their blogspot blogs. If you still have a small confusion about the widget, then have a look at this screen shot below.
I hope you are clear about the widget now. If you like to install this widget on your blog, then please follow the following steps.
1. Go to "Design->Edit HTML. Make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page.
2. Search for the following line in your template. Use "CTRL+F" to fasten your search.

]]></b:skin>

3. Add the following piece of code just above the line mentioned in step 2.

.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}

4. Save your template and check if it is error free. Now, expand your blogger template and search for the following piece of code in your blog template.

<div class='post-footer-line post-footer-line-1'/>

5. Download the following text document - About the Author Widget For Blogger. Open the text document and copy the entire code in it. Now, paste the code below the line mentioned in step 4.
(Note: Please write about yourself instead of the following text mentioned in the document, "Write About Yourself/Fellow Blogger Here!!!". Also, add your twitter name instead of the following text "YOURUSERNAME".)
6. Save your template. The code will automatically appear only in the post pages and will not be visible in the home page. Just go check out your individual post pages and you will find the widget installed.

I hope you enjoyed this post!! For any help, please feel free to leave your comments here!! I will sort out any of the issue with respect to this hack. Also, try spreading this post to your friends if you feel it is worth spreading:)

Click4more... 57 Comments

How To Reduce Your Blog's Bounce Rate?

This post basically explains the following questions: What are Analytics?? What is a bounce rate?? How vital it is?? How to reduce the bounce rate of your blog?? Once you build a website or a blog, your primary aim is to increase the traffic to it, in other words, you try to attract as many people as possible. This could be achieved by the adding your posts to various social bookmarking sites, participating in forums and so on.

Do you think, it is enough if we just increase the traffic to our blog??? Definitely not!!! You need to analyze the traffic or statistics(analytics) of your blog. So, What are Analytics? To keep it very simple, it is a tool to measure your site's performance. It displays various data regarding your blog and bounce rate is one such data. Most of the newbies install Google Analytics on their blogs but they do not know, how to interpret these data. I restrict myself to explain only about "Bounce Rate" in this post.

So, What is a Bounce Rate? Wikipedia defines it as, "Bounce rate is a term used in web site traffic analysis. It essentially represents the percentage of initial visitors to a site who “bounce” away to a different site, rather than continue on to other pages within the same site." I feel the statement is pretty self-explanatory.

To keep it very simple, bounce rate simply represents those percentage of visitors who move away to some other site after visiting a page on your website. You may find the percentage for "Bounce Rate" on the right corner below the graph once you log in to your Google Analytics Account. Higher the bounce rate, more the number of people leave your blog after a single web page visit.As per the definition, an ideal percentage of bounce rate would be zero. Practically speaking, a bounce rate below 60% is good for any blog. So, our only task is to make him/her stay in our blog or in other words, just get the second click out of the visitor. Though, it appears to be very easy, it is one such area that even probloggers constantly work upon.. I am pretty sure few ideas would have cropped if you clearly understood the post till this. You may implement your ideas but, do consider the following methods in reducing the bounce rate.

1. Clean Template: The first impression is always the best impression and you can gain that best impression only when your blog looks clean and tidy. It is not necessary that it should look very professional but, it should be clean. I mean the widgets should be placed properly, broken links should be updated and so on.

2. Quality Content And Keywords: Content is always the king!! So, it is very important that your blog provides quality content. Please, ensure that the keywords are relevant to the content of your blog. It is important that both the keywords and content go hand in hand or else you end up providing the wrong information to the search engines. By doing this, you lose the second click from the visitor.

3. Internal Links: This serves to be the most effective way of reducing a blog's bounce rate. When you provide links which are relevant to the content, within your blog, it is obvious that the user makes a click on it and thereby, he keeps hopping around your blog. In fact, you end up boosting your page views and back links too.

4. Related Posts: The last factor which I would suggest to reduce the bounce rate would be the related posts widget. I recommended every blogger to add this widget at the end of every post. It will have a tremendous effect in reducing your bounce rate and increase the page views of your site. Click here to learn more about this widget(for blogger blogs): Add Related Posts To Blogger Blogs.

As far as I know, the above four methods will definitely reduce the bounce rate. To be very frank, even I am currently working on reducing the same for my site. I So, I appreciate any ideas from your side as well. Leave them as comments below this post and I assure you that I will include them in my next series of post.

Click4more... 11 Comments

Free Premium Blogger Templates - Masunurin

Today, I present to you, yet another premium blogger template namely, "The Masunurin Blogger Template". This template is originally a Wordpress theme which was converted to blogger by "Themecraft.net". Basically, the Masunurin blogger template is a two column premium blogger template. It includes features like rounder corners, dual navigation bars, a default tweet and re-tweet icon for each blog post and a default social bookmarking system.

Live Demo | Download Masunurin Blogger Template For Free

You may have a look at the template by checking the screen shot above. Or click on the demo link to have a live demo of the template. As I said before, the main feature of this template is the rounded corners which you may observe in the widgets. The second feature would be the navigation bars. As we have seen in previous premium blogger templates like "The Hybrid News Blogger Template" or "The Latter Blogger Template", this template also includes a navigation bar above and below the title of the blog.

Another important feature of this blog is the social bookmarking system which comes by default with the template. There are about nine social bookmarking sites which will be displayed at the top right corner to the visitors of the blog. This eliminates the need to manually install the social bookmarking sites as we do in other templates. Click here to learn about "Adding social bookmarks to blogger blogs".

The template how ever has one disadvantage, or in other words, lacks one feature which I feel is essential for a very professional site namely, the footer section. How ever, it is quite easy to add a footer to our blogs. You can click here to learn about "Adding a stylish footer to your blogger template". If you are interested in installing a footer like the one I installed, you may mail me and I will help you out!! Comments are always appreciated!! So, install the template and tell me your views!!

Click4more... 0 Comments

Add An Animated Notice Box To Blogger

Today, I would like to present you an interesting widget, "The Animated Notice Box". This widget will add a notice box such that it flashes for certain number of times say three times and then, will stay static on the web page until the user wishes to close it. It is something like an alert message which you would have seen in many websites. But, this kind of alert message can be used to increase the subscribers for your blog. If you still haven't got an idea about what I am explaining here, then just look at the screen shot below.

I hope you got an idea about the widget now. If not just visit this blog "My Test Blog" to view the demo of this widget. I will initially explain you how to install this widget in your blog with a general message as shown in the screen shot above. Later, I will provide you the code which I installed in "My Test Blog" that displays a message to the visitor asking him/her to subscribe to the blog. Let us get to our work now.

1. Go to "Design->Edit HTML. Make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page.
2. Search for the following line in your template. Use "CTRL+F" to fasten your search.

]]></b:skin>

3.Add the following piece of code just below the line mentioned in step 2.

<style>
#info{
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
color: #00529B;
background-color: #BDE5F8;
background-image: url('http://i46.tinypic.com/jzf8tk.jpg');
}
</style>

<script src='http://code.jquery.com/jquery-1.2.3.min.js' type='text/javascript'>

</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".close").click(function(){
$("#info").animate({left:"+=10px"}).animate({left:"-5000px"});
});
$("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)
.fadeOut(400).fadeIn(400);
});
</script>

4. Save your template. Next, you need to add the "div" section of the code any where in between the body tags of your template. The simplest way to add this code is to use the "HTML/Javascript" plug-in in blogger.
5. To do so, just navigate as follows: Design->Page Elements. Now, click on "Add a Gadget" and select "HTML/Javascript". Paste the following piece of code and hit the Save button. Leave the title section of the widget empty.

<div id="info">
<a class="close" href="#close" style="float: right;"><img border="0" src="http://i48.tinypic.com/3502jif.jpg" /></a>
This Is Your Message .You can change it to Your need. Click on close button on right to exit this box</div>

6. You may drag the widget any where you want. Once you finalize the place, click on save again and view your blog with the "Animated Notice Box" installed.

As I said earlier, you may download this text document "CODE I USED", which consists of the code I used in "My Test Blog"(Demo which you viewed). You may use the code in document for your blogs too. But, please do change the links and the title of your blog in the code (self-explanatory). Else, you will help me increase my subscribers count by displaying the box in your template:)

Click4more... 19 Comments

Add Breadcrumb Navigation To Blogger Blogs

I came across the breadcrumb navigation trick for blogger during its inception. But, I thought there is no use adding such a widget other than improving the navigation. The navigation simply can be improved by adding a blog archive or using the labels widget in blogger. But, I found that apart from improving the navigation it also facilitates Search Engine Optimization. Basically, the search engines view a breadcrumb as a text link to posts and provides importance to the subject of the linked page.

To basically understand this, I should define what a breadcrumb is??? To keep it simple, a breadcrumb is a widget like stuff that displays the visitor's location within a blog. Basically, it improves the navigation for a blog and helps the visitor easily jump from one part of the blog to another. To have a better understanding of what I am blabbering, please have a look at the following screen shot.
Let us now install this hack to improve our SEO and site navigation. Just follow the simple steps given below.
1. Go to "Design->Edit HTML. Make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page.
2. Search for the following line in your template. Use "CTRL+F" to fasten your search.

]]></b:skin>

3. Add the following piece of code just above the line mentioned in step 2.

.breadcrumbs
{
float: left;
width: 590px;
font-size: 11px;
margin: 5px 10px 20px 10px;
padding: 0px 0px 3px 0px;
border-bottom: double #EAEAEA;
}

4. Save your template. Just make sure that your template is expanded. Click on the "Expand Widget Templates". Now, search for the following piece of code in your expanded template.

<b:includable id='main' var='top'>

5. Replace the following block of code with the code mentioned in this text document - "Breadcrumb For Blogger".

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>

6. Save your template. That's all folks!!!

Visit any of your post page and enjoy the hack!! If you still face any problem regarding this widget, I am always ready to help you via mails. Even comments below the post will do!! For all those who had a smooth installation, just enjoy the hack!!!

Click4more... 33 Comments

Free Premium Blogger Templates - Uniqx

When I searched for premium blogger templates, I found one amazing template namely, "The Uniqx Blogger Template". Basically, Uniqx blogger template is a two column template with right sidebars, footer columns, custom fonts and abstract. The template was designed by "Rethnaraj Rambabu" from BloggerBits. The main difference between this template and the other premium blogger templates is that it carries a unique font( ‘Chunk’ and ‘Steinem’) throughout the template.

Live Demo | Download Uniqx Blogger Template For Free

You may have a look at the template by checking the screen shot above. Or click on the demo link to have a live demo of the template. Let me continue to highlight some of its features. The template consists has an unique navigation bar. Unlike the usual bars which you see above or below the header, this template consists of a navigation bar besides the title, in a random order, not horizontal nor vertical menus. It also includes "Welcome Text", where in you can add your name and your blog name. Above all, it is designed such that the "Welcome text" appears only in the home page.

It includes a "Read more" hack installed by default with the template. To make it more professional, it includes a three column footer. I just can't use any other word in this post other than "unique" because, it is designed in such a way that it carries a separate identity for itself from the header to the footer. I hope you like this unique template!:)

Click4more... 6 Comments