Remove "Read More" Hack From Static Pages On Blogger

I have just now enabled guest blogging (my next post will be based on guest blogging and its importance, make sure you subscribe to this blog so that, you don't miss any thing that is valuable to your blog) on this blog, which I should have done long before. Better later than never. Anyway, when I recently added a new page to my blogger blog for enabling guest blogging, I encountered a mistake in it. It displayed a "Read More" link at the end of the post on the static page of my blog.

When I clicked on the link, it still showed the same page. So, it is pretty stupid to display "Read More" link for an already expanded post. More over, displaying the same page again and again for the same link appears to be more stupid. If you did not understand what I meant in the lines mentioned above, just have a look at the following two pictures and you will understand what I mean.

BEFORE REMOVING THE "READ MORE" LINK

AFTER REMOVING THE "READ MORE" LINK

So, I thought I should some how overcome this stupidity and to my surprise, I found a piece of code that would do the magic. Just follow the steps mentioned below and you will rectify the bug on your static pages on blogger.

1. As mentioned in many of my previous posts, make sure you create a back up of your template. To do this, navigate to "Design->Edit HTML" and make a backup of your template clicking on the "Download full template" link at the top.
2. Expand your blogger template and search for the following piece of code.

<b:if cond='data:blog.pageType != "item"'>

(or)<b:if cond='data:blog.pageType != "item"'>

(Note: Make sure that the following pieces of code follow above or below the code mentioned in the step2.)

<div expr:id='"summary" + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

3. Copy and paste the following piece of code just before the line mentioned in step2.

<b:if cond='data:blog.pageType == "static_page"'><b:else/>

4. Now, search for the following code near by the above codes.

<div style='clear: both;'/>

5. Copy and paste the following piece of code just before the line mentioned in step4.

</b:if>

6. Save your template and view the static pages of your blog.

This trick might be little confusing because it involves correcting the stupidity on our blogs(quite difficult to accept and digest). If you feel this tutorial is complex, then you can leave your comments below and I will help you solve the problem.

Click4more... 34 Comments

Free Premium Blogger Templates - Prozine V1

Today, I present to you another premium blogger template namely, "The Prozine V1 Blogger Template". This template is yet another creation from Lasantha Bandara. Although, I google a lot about premium blogger templates, I finally end up with the creations from Lasantha Bandara. I feel the templates posted in his site has got the professional touch that one excepts to have on his/her blog. You may click on the demo link to have a live demo of this template or just view the screen shot below.

Live Demo | Download Prozine V1 Blogger Template For Free

The demo link is the basic setup for the template while the screen shot shows, how good the template can be modified. You can always search for design tips(blogger customizations) in my blog. This template "Prozine V1" is basically a right sided three coulmn blogger template which comes in with outstanding and ready to use features. To start off, the template has got a navigation bar below the header. It comes with ready to use 468x60 banner ad space with the header. More over, the template consists of a sliding feature content which requires a little customization though the space for it is readily provided in the template.

The template carries a white background with black text for the posts which is most commonly preferred combination. The template has a good combination of colors for the rest of the area. Apart from the color combination used, the post area has rounded corners rather than the usual straight ones. The template comes with a ready to use read more feature and also, a very good looking comment bubble enabled for each post.

I always mention one drawback with the templates posted under PBT which is nothing but the footer section. Most of the premium templates lack the footer section. But, this template has overcome that drawback and provides you a four column footer, quite a lot of widgets can be accommodated in this space. If you have not got enough widgets, there is no need to worry. The template comes with enough ideas for each footer section.

So, overall I would recommend this blogger template for every newbie trying to make his/her blog professional. Please share your views about this template via comments!!! Remember, you will generate back links, that contributes to your Google PR, if you comment on dofollow blogs (Read more about dofollow blogs here : "How To Make Your Blogger Blog Dofollow") like mine!!!

Click4more... 11 Comments

How To Speed Up Your Blogger Blog?

Hi friends!! This is my second post about speeding up a blogger/blogspot blog. If you missed out the first one, then click here to have a look at it - Speed Up Your Blogger/Blogspot Blog. I had been working on this topic myself for the past few weeks and few days before, I found a post about the same topic on Google Buzz. I wanted to share some of the tips mentioned there with my readers. Although, this topic deals with terms that sound weird, I have tried my best to keep them as simple as possible because, I always write things aimed at the newbies.

The prerequisites for improving the page speed of your blog would be, to get a few of the Firefox Add-ons working on your computer - Firebug and YSlow. These Add-ons are basically meant to analyze the speed performance of your site. Only when you analyze things, you will know whether you are on the right track or not. So, let me start off with methods which I felt were effective with my blog. I'm sure, it will be effective for your blog as well.

(Note: I have concentrated only on CSS and images in this post. The other methods of improving your blog speed will follow on the next series under the same topic. Make sure you have subscribed to this blog so that, you don't miss any valuable tip for the betterment of your blog.)

1. Changing The CSS Section: I highly recommend you to opt in for CSS sprites because it reduces the number of HTTP requests for your blog. If I start to explain about this, I'm sure either I will go mad or you will become one. So, let's not harm ourselves. I leave it to the link from where I gained a little info about CSS sprites - Image Slicing. I know it is pretty difficult for the newbies to understand. So, what do they do??? Simple. Just visit this site - W3C CSS Validation Service.
Enter your URL and get the report. It will clearly indicate the warnings and the errors regarding the CSS codes . You may avoid the warnings, but not the errors. Try rectifying the errors as much as possible. Alteast, learn why the error showed up and eventually, you will correct them once you understand why showed up, just as I did:)

2. Image Modifications - For a blog to be quick in loading, it is pretty obvious that the images in the blog load faster because images occupy more space when compared to the text. So, how do I load my images faster? Basically, if you reduce the number of images, or crunch them you will reduce the size which in turn, reduces the time it takes to load them, thereby increases the speed. Apart from crunching and reducing the number of images, the following methods will be more effective in increasing the speed of loading your images.

2.1. Serve Scaled Images: It is very simple to understand though it sounds complex. This method basically uses HTML to compress the size of your image. To explain this very clearly, consider the example of attaching a large size wallpaper of dimension (1024x768) to your blogger post. Once you attach it in your post, you will find a smaller image only and not the actual size of the image. This is because, the image has been scaled to fit in your post.

It is very important factor to note that, you can still find the original picture once you click on the picture; which means the original image is loaded, but it has been reduced by some factor to make it load faster in your posts. One image, multiple sizes using HTML implies scaling. This is the basics about scaling of images. You can read a little more about serving scaled images here - Serve scaled images.

2.2. Specifying Image Dimensions And Using Alt Tags: If you feel the first step is pretty complex to adopt, then you definitely need to adopt this technique. This method basically involves adding two tags in the images of your post or blog namely, the "height" and "width" tag. What happens when I add this piece of code? If you specify the dimensions in your "img" tag, then the browser understand that it has to load something in that space of "AxB" dimensions. If the dimensions aren't mentioned, then the browser will have to wait until the complete image is fetched or in other words, say wait until the end of the script.

Apart from specifying the dimensions in your img tag, I recommend you to add "alt" and "title" tags. The alt tag basically provides a text equivalent for the object/image. That is, incase an image has failed to load then, the alternate text will be displayed. This saves time because it prevents the re-hits to the server for loading the images. More over, the title tags will fetch you more traffic through images and makes your blog more SEO friendly. I will explain about this concept in the upcoming posts. Subscribe to my blog so that, you don't miss anything vital to your blog.

2.3. Minimizing the HTTP requests: In this method, you just need to ensure that all the URLs for your images are placed on the same server. To be more specific, since you blog on blogger and make use of Google Picasa to upload the images in your post, I recommend you to upload all the images related to your blog(including facebook, social bookmarking buttons,etc..) on Picasa. Do not upload on external servers say, Imageshack, Photobucket, etc.. Every image is associated with a HTTP request and every HTTP request consumes time.

So, if your HTTP requests are diverse(each image at different locations), it simply means more time. About 40 to 60% of your daily visitors come with an empty cache, meaning to say that, they load your site for the first time. So, I would say satisfying the first time visitors would be the key to a better user experience. Hope, you enjoyed this post. Share your views via comments!!! Comments are always appreciated!!!

Click4more... 29 Comments

How To Make Your Blogger Blog Dofollow?

I am very happy to declare that my blog is a dofollow. I have listed my blog under the list of dofollow blogs on "followlist.com". I assumed that my blog was a dofollow but, I found this morning that, it was not the case. When I went through the source code of my template searching for nofollow tag, I found one stating nofollow. When I checked the code, it happened to be on the comments section. I'm pretty sure, I lost many comments just because of this small mistake.

So, I made this post specifically to ensure that my blog readers should not commit the same mistake which I made. To check whether your blog or say any blog you wish to comment, is a dofollow blog or not, just follow this step. Open your blog or the blog you want to verify for dofollow, go to the comments section of the blog. Just mark a few lines of comments in it and right click on your mouse. Now, select view selection source code. If you find a tag with word rel='nofollow', then it means that the blog is nofollow blog or else it is a dofollow blog. The following figure illustrates this step for better understanding.I have been using the words dofollow and nofollow quite a many times in this post. There is no use in reading this post, if you don't know what it is or what it does. Basically, a dofollow tag indicates that when you comment on a blog with a link to your post, the robots will consider that particular link of yours as a backlink and will point to your site. In other words, when you check for the sites linking to your site, you will find the blog on which you commented. This is what drives more people to comment on your blog and it effectively helps to improve the PR of your blog. To know more about PR and improving it, you may read the following posts:
1. Increase the PageRank of your Blog - First Series.
2. Increase the PageRank of your Blog - Second Series. (Highly Recommended)
If it is a nofollow blog, then the links you post will simply remain as links and just drive traffic to your blog but not backlinks. This would be the simplest definition of dofollow and nofollow as far as I know.

Now, we have understood what a dofollow blog is and how it generates more comments and backlinks for our blog. So, how do I make my blog a dofollow one??? Very Simple!!! Just follow the following steps.
1. Navigate to Design->Edit HTML from your blogger dashboard. Now, click on the Expand Widget Templates and search for the following piece of code.

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

<b:else/>

2. Delete the code marked in green text and save your template. That's it!! Your blog is ready to be listed under dofollow blogs.

Below is the list of few sites which are dofollow blogs. You can comment on them and start generating backlinks for your site right away!!! If your blog is also a dofollow blog and if you wish to add your site to the following list, then please leave a comment and I will update the list.
(Note: Updates will be done once in every 48 hours)
1. Everything About Blogging | Free Premium Blogger Templates (My Blog)
2. ProBlogger
3. ShoutMeLoud
4. BloggingWithSuccess
5. Begin2Dig
6. HackTutors
7. SilentSender
8. Okagba Mobile
9. Snrocks
10. Newlove-makeup
11. Get Financial Status

Click4more... 161 Comments

Free Premium Blogger Templates - Company Style

Hi friends!!! This post deals with yet another premium blogger template namely, "Company Style" blogger template. I found this template at PBT. It was basically designed by "newwpthemes.com" for Wordpress blogs. The conversion to blogger was made by Lasantha Bandara. This template is one among the very few professionally designed blogger template that I would recommend every one to give it a try. It appears so professional and the combination of colors are excellent. Before I start reviewing and highlighting its features, have a look the screen shot below or click on the demo link to have a live demo of the template.

Live Demo | Download Company Style Blogger Template For Free

The "Company Style" blogger template is basically a two column blogger template with rounded corners and a fixed featured content. Unlike the other templates wherein, you find the sliding featured content, this template provides a static featured content/widget which is specifically meant to display a welcome note to the visitor about your blog. The template carries a right sided second column with white background and dark red color for the title of the widgets.

The template comes with the "Read More" hack automatically installed for each blog post. More over, the template provides two navigation bars which means you get a lot of space to share some links. The template includes a ready to use RSS subscriber feed and twitter icon right next to the left of the search box. How ever, the template misses one feature namely, a three column or four column footer(to add one to your blog now, just click here - Add a three column footer to your blogger template).

Overall, I would recommend this template to every one. I would say, this template would be a dream space for people who love to have fun with HTML. For all those who are poor at HTML, this template will work fine, but you might face difficulties in future when you try to make some changes say adding features like a sliding featured content, footer and so on... I hope you enjoy this template. Give it a try and leave your response here via comments!!!

Click4more... 28 Comments

Add Meta Tags To Each Blogger Post

It's pretty obvious that every one who blogs would love to receive more visitors. So, this post basically provides a simple customization by which you can increase your traffic. It improves the SEO of your blog. Although many bloggers would have added the meta tags to their blog, at least one fourth of them would have missed a piece of code which makes a lot of difference when compared to the other blogs. This line is simply a meta tag representing each blogger post rather than the blog as a whole.

I assume that you have already added meta tags for your blogger blog. If that is not the case, then you need to view this post namely, "Add Title Tags To Your Blogger Blog" before you proceed with this post. If you had completed the previous step, then follow the following steps.

1. Navigate to Design->Edit HTML. As usual, create a back up of your template before you make any changes to the template. Once the back up is done, proceed to step 2.
2. Search for the following piece of code in your template.

<title><data:blog.pageName/> | <data:blog.title/></title>

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

<meta expr:content='data:blog.pageName' name='description'/>

4. That's all folks!!! Your blog is ready to get a little more hits than before.

So, what does this code do with my blog? To keep it very simple, assume that a person searches your blog on any search engine, say Google, then he/she would see a description written by you beneath the name of your blog as shown in the picture below. When it comes to a post page, that is, if he/she searches for some content, say "Add meta tags to each blogger post", then the post title would be the meta description that appears on the post page.
Do you wonder what benefit your blog would get by making this small customization? The answer is very simple, better search engine ranking which in turn means more traffic. Another advantage would be like this, if your blog and another blog has got the same traffic and if you had installed this tag it means you have a better edge over him and I'm pretty sure you will receive more hits than the other blog.

I hope the above customization will help your blog rank better than before in the search engines. I tried this on my blog and I felt it was pretty effective. So, I hope even you feel the same. Please, feel free to share your views via comments!!!

Click4more... 78 Comments