Posts

Showing posts from March, 2012

How To Add Related Posts Widget To Blogger with Thumbnails

Image
Now here is a wonderful hack for displaying related posts beneath each of your blog posts along with post thumbnails. The related posts are picked from other posts having same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest. Adding the Related Posts Widget to Blogger/Blogspot Step 1. Log in to your Blogger account and go to Template > Edit HTML Step 2. Click anywhere inside the code area and press the CTRL + F keys: Step 3. Search for this tag that you need to add inside the search box (hit Enter to find it): </head> Step 4. Copy and paste the below code just before/above the </head> tag: <!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts{float:left;width:auto;} #related-posts a{border-right: 1px dotted #eaeaea;} #related-posts ...

How to change Blogger "Post A Comment" Message

Image
While the main secret of getting comments is to have good friends and creating good content, sometimes it is difficult getting more comments when we have a brand new blog that is not visited very often. A pretty good technique is to put images to encourage visitors to comment. This tutorial will show you how to replace the 'Post A Comment' text that appears above the comment form with an image. Also, below are some images that you can use but you can also add your own image, that depends on your tastes. So, let's proceed with the steps... How to replace Post a Comment with an image In order to replace "Post A Comment" message in Blogger / Blogspot, follow the steps below: Step 1. Log into your Blogger account and select your blog. Step 2. Go to "Template" and press the "Edit HTML" button Accessing Blogger template editor Step 3. Click anywhere on the code area, then press the CTRL + F keys and search for this code (if you can't find the ...

How to optimize Images and Increase Blog Traffic

Image
This tutorial will explain you how to optimize images before uploading them on your blog. Generally, most of people don't optimize images before uploading it to Blogger as needed. Optimizing images should be done if you want to improve the SEO (Search Engine Optimization) or your blog or site. Learning the correct and proper way of optimizing images in Blogger is also very important. Google Image search is used widely for finding quality reference images, icons or photos. A great percentage of our blog traffic depends on Image search. But the problem is that, when we are downloading images they are saved with odd names and we don't take any interest in modifying the name. So, we should always consider two things when uploading images on our blog - the proper use of the alt tag and changing the name of the images or pictures choosing the right SEO keywords . 1. Change Image Name with Keyword As mentioned above, most of the picture we are downloading on our hard drive are usual...

How To SEO Optimize Your Blogger Blog Titles For Higher Search Results

Image
This is called "Blogger/blogspot Title Swapping". Swapping blog's title can help boost your position in search engine results page listing and increase click-throughs as well. From an SEO (Search Engine Optimization) perspective, page title is the most important element in your blog in terms of ranking well in search engines. If you look at your browser's title bar you will notice that Blogger's default templates display your blog title in front of each page or post title. So page title would normally be displayed as: After swapping the blog title, it will be appearing like this: This kind of placement will also appear in google search results. The reason why you should put post titles at the beginning is because users are more likely to search for specific post content rather than the actual name of your blog. So having the post titles at the beginning increases your chances of being found. How to SEO optimize Blogger post titles Step 1. Log in to your Blogger Da...

How To Remove Blogger Attribution Gadget

Image
The Attribution gadget is the gadget in the footer that says "Powered By Blogger". If you have tried to remove this then you may of noticed this gadget is locked into you blog. To unlock it, follow the next steps: Step 1. Log in to your Dashboard, go to Template > Edit HTML Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box Step 3. Type or paste the following tag inside the search box then hit Enter to find it: </head> Step 4. Just above the </head> tag, add this CSS code: <style>#Attribution1{display: none;}</style> Step 5. Click on the "Save Template" button to save the changes. And this is how you can remove the blogger attribution gadget.

How to add a gadget/widget inside your Blogger Blog header

Image
Some of you might have noticed this kind of placement of AdSense Units or other ads and widgets in the header section of the blog, one of the most popular format being the AdSense 468x60 ad unit. Unfortunately, we are not always able to add widget inside the Blogger header as a Blogspot user. If we are using the Blogger's default template, or any other customized template available on the internet, the header usually is locked and have no option to Add a gadget inside it or next to the blog title. The reason why some bloggers are using AdSense ads or different widgets in a blog header is because of its maximum of number of impressions. For instance, when a visitor goes to a page, this will be the first place where he would give a first look and this makes it one of the hottest spots in our blog. But how we can add a gadget inside Blogger header - be it a AdSense unit, a search bar, social sharing buttons, or a widget? By simply adding a section in the blog's header. First off, ...

How to Burn Blogger RSS Feeds at Feedburner

Image
What is RSS? A RSS (Really Simple Syndication) feed is a XML-based format for your content. Most blogging platforms, for example, will have an RSS feed built in. Whenever you start publishing posts, your latest posts will be updated in the RSS feed. Visitors on your website can subscribe to your blog’s RSS feed in an RSS reader such as Google Reader . What is FeedBurner? Most blogs have RSS feed which is detected automatically by commonly used feed readers when the blog URL is added to the reader. However, if you want to make it more obvious and easier for readers to subscribe using RSS, or want to know exactly how many people subscribe to your blog, then the best option is to add a FeedBurner RSS feed and email subscription to your blog. Feedburner is a free web service which enhances bloggers' and podcasters' ability to manage their RSS feeds and track usage of their subscribers. How to create a feed with Feedburner 1. Go to FeedBurner and sign in to Feedburner with your Go...

Add Facebook Like Button Below Post Titles

Image
The Facebook Like button will allow visitors to Like your post and share it with their Facebook friends. In this tutorial, we will see how we can add a Like button for each individual Blogger post, and not a Facebook fan box for the entire blog (which is also a good idea to have it in the blog's sidebar). Having a Facebook Like button below your post titles makes easier for Facebook users to like specific posts on your blog, which in turn displays the liked content on their profile (and potentially on their friend's feeds). If you want to add the Facebook Like Button below your blogger post title, then follow these steps: Adding Facebook Like Button Below Post Titles Step 1. Go to Blogger Dashboard > Template > Edit HTML  Step 2. Click anywhere inside the code area and search using CTRL + F keys for this tag (hit Enter to find it): <data:post.body/> Note: you may find it more than 3 times, stop at the second one (or third one in case it won't show up after ap...

Auto Read More with thumbnail for Blogger/Blogspot Posts

Image
How to make posts in the blog homepage to be displayed with an automatic "read more" button and a thumbnail. To be more specific, this will show the title of the post, a short summary with a number of characters and a thumbnail , that will be the thumbnail of the first image uploaded inside the post. After the thumbnail and the post summary, there will be a "Read More" link which, when you click on it, will take you to the actual post. This Automatic Read More script will summarize content and the post summary will be shown only on the main blog page (homepage), category pages, and archive pages. Using the Automatic Read More feature in Blogger Posts Step 1. From your Blogger dashboard , go to "Template" and click on the "Edit HTML" button: Step 2. Click anywhere inside the code area, then press the CTRL + F keys and search for this tag (hit Enter to find it): <data:post.body/> Note: after hitting Enter, you'll find this code more tha...

Adsense Ad Code Converter

Image
HTML has special handling for characters like < and > symbols, so it doesn't work well with those characters where they shouldn't be. Having spurious characters like those symbols in your text can have some weird effects - blocks of text not appearing, broken formatting, and generally just not seeing what you expect to see. This can all be fixed by 'escaping' those characters. This process involves scanning the text for those characters, and replacing them with a special character-code that browsers can interpret as the correct symbol, without actually embedding that symbol in your text. For example, the escaped character code for > is &gt;. This tool automatically converts a JavaScript ad code into the correct format so you can embed it directly into your new xml Blogger template. It’s perfect for converting AdSense, AdBrite, Chitika or any other JavaScript code that you may have. How to Use the AdSense Code Converter Paste your AdSense code or any HTML...

How to put Adsense ads on Blogger/Blogspot

Image
If you want to earn money from your site or blog, Google Adsense is the most popular service to monetize your website content. When implemented, AdSense will display targeted Google ads on your blog and they can generate revenue on either a per-click or per-impression basis. In order to display ads on your site, you should first Sign Up to Google AdSense program . Before adding your ads, keep in mind that AdSense allows only up to 3 ad units, 3 link units and 2 search boxes per page. This tutorial will show you three ways to add AdSense ads on your Blogger blog. 1. Add AdSense Gadget Use this method to add ad unit as a widget in places that are outside the content or blog post area. You can position it by simply dragging it in Page Elements, just like with any other widget. To add the AdSense Gadget, follow these steps: Step 1. Log in to your Blogger Dashboard , go to "Layout" and click on the "Add a Gadget" link on the Page elements area. Step 2. From the pop-up wi...

How To Remove Blogger Threaded Comments

Image
The Blogger Threaded commenting system allows a reader to reply to other reader comments on that post. Blogger supports threaded commenting with two levels - the original comment, and the replies to that comment. If you want remove threaded comments from your blogger blog, follow these steps: Important Before anything, it is recommended to backup your Blogger template so that if anything goes wrong, we can easily restore the original working template on our blog. To make a backup of your current Blogger template, go to your Blogger dashboard , then go to "Template" and click on the "Backup/Restore" button on the upper right side. Clicking on this button, will prompt you to save your existing template as an XML file to your hard drive. You can change the name of the file and choose the location to ensure it is easy to find if you need to use this later. Removing the Blogger Threaded Comments (with reply option) Step 1.Go to "Template" and click on the ...