Techie Blogger » Blogger Hack

Build Your Own Online Store In Blogger Blogs

Robin — Wed, 30 Dec 2009 13:33:44 +0000

As everyone knows that the Blogger is an online service provided by Google to publish the web-pages free of any cost. Blogger blogs are used to provide online journals, Web Portals, Web Gallery and online magazine.etc. These blogs are not only used for these tasks but also to make money online using different programs like

Google Adsense
Chitika
Kontera
Commission Junction
Click Bank
Affiliates Program
Private Ads

So making money online had a wide space in the blogosphere nowadays. So apart from these task another best feature which the blogs has are the ability to sell your own goods online using some javascripts and paypal intergrated in your blog. Till last week there was a tought time to sell the online goods at blogger.com because the lack of proper shopping cart etc.. But today we had come up with an solution for selling your own goods online using blogger blogs.

I believe Blogspot is a easy and powerful platform . It can do whatever other platform can do . In WordPress ,with plugins ,you can make a shop online . And now ,in Blogspot ,you can do the same . You can make a small online shop for selling good . It’s not a perfect solution ,in fact, it’s not good at processing and security .But anyway ,it’s still the solution you should consider if you want to stick with Blogspot .

Live Demo

Yesterday ,I found the script called SimpleCart . This script is based on Ajax for making a complete shopping cart ,using two payment method Google checkout and Paypal for check out .
You can find out more information on SimpleCart at This page

To make a shop like this ,you can follow some step bellow :
1, Login to your blogger account ,go to Layout tab ,continue to Page elements . Create a HTML/Javascript widget .
2,Download this file and paste it content to HTML/Javascript widget content .
Download file here
3,Save template . And see the widget in action .

How to customize this code

1,Take a look on this code :

simpleCart.checkoutTo = PayPal; mean the payment method is paypal
simpleCart.email = “brett@wojodesign.com”; is the Paypal email for making payment to .Change it to your own .

2,Here is the code of one item in my live demo shop :

Sample DVD

To create a shelf item, you create a div with a class of simpleCart_shelfItem

$14.99
Add to Cart
http://i604.photobucket.com/albums/tt130/metalner/simplexshop/attack-release.png

To create a shelf item, you create a div with a class of “simpleCart_shelfItem” ,like this

…………………

this structure :
is for image of item . Image of item must contain class=”item_image” attribute .

This structure

your_item_name

is name of item . It must included class=”item_name” .

Description of item must included like this

your description

To set the price ,use this structure :
$00.00

To make ” add to cart link” ,add this line
Add to Cart

To add thumbnail image for item ( thumbnail image will be showed in shopping cart ) ,use this structure :
your_thumbnail

Here is the code of cart :

Total:

Empty Cart
Checkout

to show the total ,use this statement :

to show shopping cart ,use this statement

To show “empty cart” and “checkout” button ,use this statement :
Empty Cart
Checkout

In this post ,I explained some important points of using Simplecart and make it a widget to add to Blogspot . If you want to customize the appearance of the shop ,you can modify the CSS section of widget .
If you want to know more about Simple Cart script and its other options such as tax rate ,shipping fee … or option for showing the quantity ,the final cost …
You can go to SimpleCart Documentation page

Page Navigation Hack for Blogger – bugs fixed

Michael — Sat, 17 Oct 2009 18:40:37 +0000

The most awaited Page navigation script with bugs fixed is released. I have received lots of comments on the bugs of Page navigation hack. Although I was busy with my studies , I do spent sometime in fixing the errors. But i was not successful in fixing the errors of Page Navigation hack. It’s Abu Farhan, a fella blogger, who has fixed the errors and made this wonderful page navigation hack available to blogger once again. So blogger is no longer going to be bad when compared to WordPress. Still more features to come , now I invite other coders and developers to create more features which are available to only wordpress before. Without making much fuzz i would like to present you the code.

Regarding Installation you can follow any of the two methods mentioned here :

Installation instructions

Since blogger doesn’t support uploading javascript files it becomes very difficult to add huge codes like below. This will certainly increase your site loading time. So i have included the JavaScript to my own server. Just add the following code to your blogger template.

Go to layout section of your blog and then navigate to EDIT HTML subtab.

There search for tag. Add the following code immediately above it.

The script gets the number of posts to be displayed using a variable named “numofpost”. After getting the number of posts this script uses a ” for loop ” to display only the number posts mentioned by the author.

I have set the number of posts to be 8. If you want to change the number of posts to be displayed then change the number in the text shown in red.

Installation Instructions

You can either install this widget in the sidebar or add this below the posts. First i will explain how to add this as a widget in the sidebar.

Adding the code in the sidebar is very simple. Just follow the below instructions.

Go to Layout section of your blog.
Then in the sidebar select ” Add a gadget ” option.
choose ” HTML / JAVASCRIPT” widget in that list.
Now add the above code in that widget and click save.

That’s you have successfully installed the random posts widget for blogger sidebar.

Adding random posts widget below posts

I have seen few who are showing the random list of posts below their posts. It’s also a good script placement which can increase your pageviews.

To add the code , just follow the above instructions.

Go to Layout Section
Navigate to EDIT HTML subtab
Now check expand widgets option
Search the
Now add the following code immediately below it

Random posts

If you want to add custom CSS to this link list , then add the following code above

Now you can see a beautiful Random posts appearing below the posts in your Blog.

hope you like this Random posts widget and hack, If you need any other modifications then do let me know via comments.

Make your site compatible for Higher screen resolution

Michael — Mon, 10 Aug 2009 17:04:27 +0000

Most of us might have noticed that our sites may look different in different screen resolutions. Though I have already posted one article on making website layout cross browser compatible , but its also necessary to make your site compatible for different screen resolutions. The visitors of your site will not have same screen resolution your are using. So it’s mandatory to make your site compatible for different screen resolutions. For example, In lower screen resolutions like 800×600 px the website layout will be perfect. But when you look at your site at a higher screen resolution like 1024×768 px or even higher , the website header or sidebar may be aligned to either right or left. It’s all because the designer might have designed the site for a particular screen resolution. In the screen resolution he was working , the site may look perfect. But when it comes to higher screen resolution , the theme may be misaligned.

what is the best screen resolution settings?

One can’t design a website for a particular screen resolution, because visitors will have different screen resolutions. According to me , the best screen resolution on which the designer should be concentrating on should be higher than 1024px. For example if you take techieblogger’s last month stats , most of my visitors are using higher screen resolution.

Some of the web designers use JavaScript to control the screen resolution compatibility. But it will reduce the site loading time.Instead of using JavaScript , I will explain how to make your site higher screen resolution compatible by making changes in CSS codes.

CSS controlling the alignment of the layout

Before explaining the original hack, first let me describe about the css code which controls the layout alignment.

margin: auto;

The simple margin tag in CSS controls the alignment of the site layout in different screen resolutions. I have selected auto to change the layout alignment in accordance with the visitors screen resolution.

Screen resolution compatible CSS – Blogger users

In order to make changes to your CSS code in blogger blogs , follow the below steps.

step 1 : First go to Layout section of your blog.
step2 : Then navigate to EDIT HTML page

Now add the margin: auto; tag in the css codes of the following sections.

Header
Outer wrapper
content wrapper
wrapper
Footer

If one more sections are missing in your style sheet , then insert that code in the respective div sections used in your blogger template.

Screen resolution compatible CSS – WordPress Users

To edit the css code in your wordpress blogs, follow the below steps.

first go to appearance option in your wordpress dashboard. Then go to EDITOR page. In that page , add the css code margin: auto; in the following css sections.

Header
Outer wrapper
content wrapper
wrapper
single entry
Footer

how to change screen resolution

For checking your site compatibility with different screen resolutions do any one of the below steps.

how to get a higher screen resolution on windows vista/XP

To change the screen resolution of your PC , do the following steps.Right click on your desktop , then click the option “Properties” there.A new window will open. Now navigate to “settings ” tab. There you can see a slider to change the screen resolution. With that slider you can either increase or decrease. After you chose a particular screen resolution , click apply. It will give you a warning message click “ok”.

Now open the browser and visit your site for compatibility.

how to set screen resolution using keyboard hotkey

You can also check the compatibility of your site with different screen resolutions with simple keyboard short keys.
First go to your blog and do the following :
To reduce the screen resolution , press “ctrl” and scroll down the mouse roller.
Or
press ” ctrl ” button and press “-” button.

To increase the screen resolution, click “ctrl” and “+” button or else press ” ctrl ” and scroll up the mouse roller.

With the above keyboards hotkeys , you can check the screen resolution compatibility of your site.

Hope this article will be useful for all web designers who want to create wordpress themes or blogger templates which are higher screen resolution compatible. If you have any problem with your website layout alignment, then please email me about the issue.

Image re-sizer CSS Hack for blogger and wordpress users

Michael — Wed, 05 Aug 2009 18:03:03 +0000

Are the images in your main container is wider than the width of the main container. If it’s so then you will find your blog layout clumsy or misaligned.I have seen few using image resizer tool to resize images, but it’s time consuming. You can even use JavaScript for resizing images, but using JavaScript will increase blog loading time. In order to avoid using JavaScript or image resizing tool, in this post I have explained how to resize images in your blog main container with simple CSS codes.

You can implement image resizing hack in PHP based wordpress or in blogger blogs too. In this tutorial i will explain how to add this hack to both blogger as well as wordpress.

Image resize hack for Blogger

Before explaining the original hack , I would like to tell what most of the blogger might be doing to re-size their images while writing posts. Mostly they will use style tags to mention the width and height of the image.

style=”height:260px;width:560px;“/>

width=”560″ height=”260″/>

But when you are having a number of images in your posts , then it becomes difficult to mention the image size and width in each and every image. And also if you change the template which contains different width , then you need to edit the size and width in all images.

In order to get rid off those head-aches , just follow these simple steps to resize images in your blog. Even if you have declared different image size and width in that image code , this code will overwrite those tags and will change the width and size you mentioned in the style sheet.

First go to layout section of your blogger blog. Then navigate to EDIT HTML section. Now search for this tag there.

]]>

Now add the following code above that code line.

.post img {
float:center;
min-width:560px;
max-width:560px;
max-height:260px;
min-height:260px;
padding : 10px;
line-height : 2em;
margin: 0 auto 10px auto;
clear: both;
}

In that above code , edit the max-height and min-width tags to suit your main container width and height.

Image resizer for wordpress users

In order to implement image resizer hack in your wordpress blog , just follow these steps.
First go to the dashboard of your wordpress blog. Then navigate to the Appearance tab in the left sidebar. Now go to the Editor page.

In the style sheet, check for the div element used in the main content container. In most of the wordpress blogs , the div element used will be “single-entry” . Now in that style sheet page , paste the following code anywhere.

.single-entry img {
float:center;
min-width:560px;
max-width:560px;
max-height:260px;
min-height:260px;
padding : 10px;
line-height : 2em;
margin: 0 auto 10px auto;
clear: both;
}

remember to change the text in green to the div element id of your main container.

Hope This hack will be more useful when you will be having more number of images in your posts. You need not use separate style codes for each and every image. Rather by this method everything is made automatic and even you can save your blog loading time too.

GET 50% offer in JUSTHOST without any coupon code

Michael — Sat, 01 Aug 2009 02:23:40 +0000

Today I have got a great news to share with you all. Hope you all know that I have hosted my site in dreamhost, since three months. Though I haven’t had any problems so far with dreamhost. While surfing for best blog hosts, I came across Justhost.com . While surfing their page I came across a great offer which most of the users won’t know. Instead of searching for justhost.com coupon codes , for 20% offer , you can use this trick to avail 50% offer without any coupon code. I also included a special JUSTHOST coupon code to get half price offer.

Let me first make clear that , I am not affiliated to JustHost in any way. I just wanted to share this trick with you all , so that you can transfer your blogger blog to wordpress for a cheap price with a massive 50% offer.

About JustHost.com

Just host is a new blog hosting company which has been started in the year 2008. They have good reputation for their uptime and cheap cost. They have got many awards and have been considered as one of the best blog hosting site since 2008.

Key Features of JustHost

Free Setup
99.9% UpTime Guarantee
FREE Domain Name FOR LIFE
UNLIMITED Disk Space
UNLIMITED Bandwidth
ANYTIME Money Back Guarantee
Host UNLIMITED Domains
UNLIMITED MySQL Databases
Host UNLIMITED Domains
UNLIMITED Sub Domains
FREE domain name FOR LIFE

Just Host reviews

When i searched in Google for just host reviews to know whether Just Host is scam or not. I found no results or complaints about JustHost.com downtime or about Just Host scam. According to me , Just Host is a good web hosting company to host your blog.

Steps to get 50% offer

Let’s see how to get the half price offer in justhost.com . First go to just Host website. Now under footer check for the secret link. Click that link , it will take you to a new page.

In that page , fill the details. Either register a new domain there or else transfer your existing domain. Since they offer lifetime free domain , i would suggest you to register a new domain.

After filling the details click continue. In the new page, you will find only 20% offer notice. So now it’s the time to do my trick.

Without filling the details there , go to the browser address bar and type some web address and click enter. For example type “www.google.com” and click enter.

As soon as you do that , two pop-up windows will open saying that they have a last minute offer for you.

Now in that pop-up box , click cancel to receive that offer. Within some time in that chat box , you will find a link to get 50 percent offer for web hosting. click that link.

If you are using firefox browser while registering just close the tab , even at that time you will get those pop-ups.

In that new page , continue with your registration and now you have massive 50 percent offer in any web hosting plan in Just Host.

USING COUPON CODE

Instead of doing all these steps , You can also get the offer by using ” 50OFF ” (without quotes ) coupon code while registering. Isn’t it so simple ?.

I hope it will help all blogger users who are looking for a cheap web hosting. Now it’s time to transfer your blog from blogger to wordpress. Catch you soon with a new hack.

Add paypal donation button to blogger and wordpress blogs

Michael — Thu, 30 Jul 2009 18:54:39 +0000

Rather than advertising revenue some websites depend on donations from users to run their sites. Although there are few online paypal button code generator websites available, I would like to explain how to generate paypal donation button script manually using your own paypal account. In order to create a donation button in paypal you need to have paypal account of any type (personal , business or merchant).

Creating the code for Paypal donation button

In order to create the paypal donation button script, just login to your paypal account.Then navigate to Merchant services sub page. There under ” PayPal Website Payments Standard ” , you can see a link to ” Donations” page. Click that “donations” link.

Now in that page , edit the paypal button code to suit your template. You can also have your own paypal donations button image. You can use some online paypal button creation websites to create a paypal donation button , then upload those images to your blog. In that paypal donation button customization page , enter that image url.

Then you can also customize the paypal donations script over there itself. I have explained them in my video tutorial for this hack.
So now we will have the paypal donation button script with us. Copy and paste the script somewhere in notepad.

VIDEO TUTORIAL to create paypal donation button

Online paypal donation button script generators

You can also generate the paypal donation button script using the following online paypal code generators.

Enter your paypal account details there and finally you will have the code ready to add in your blog/wesbite.

The above sites are some of the paypal button creators which i have found so far. If you any other then please let me know using comments.

ADDING PAYPAL DONATION BUTTON TO BLOGGER BLOGS

To add the paypal donation button to your blogger blogs , Go to layout section of your blogger blog. Then add a HTML/JAVASCRIPT widget using “add a gadget” option in the layout page. Paste the paypal donation button code you generated either via the online paypal button creator or from the paypal website itself there. Then click save , Now you can see a cool paypal donation button on your website.

if you want to add the paypal donation button below post of your blogger blog, then navigate to the EDIT HTML subtab in the layout section.
Then click “Expand Widget Templates” option in that page. Now search for this tag

and add the paypal donation button code immediately below that line.

Now you can see a beautiful paypal donation button in your blogger blog.

ADDING PAYPAL DONATION BUTTON TO WORDPRESS

In order to add the paypal donation button code to your wordpress blog , Go to Themes appearance/presentation tab. Then navigate to WIDGETS option available there.
Add either a text widget or HTML widget and paste the paypal button code there.

If you want to add the paypal donation button below post in wordpress too , then navigate to EDITOR option in APPEARANCE. IN editor page search for single.php page. There place the paypal donation button code immediately below the “the_content” whole tag line.

Conclusion :

I hope that you guys will like this tutorial for adding paypal donation button. Placing a donation button in your blog can help you to earn some extra income.

P.S: This is my first video tutorial for blogger users. I have created a new youtube channel for uploading blogger tutorials over there. Hope you guys will support me for that.

Subscription Box widget for Blogger Users

Michael — Fri, 17 Jul 2009 15:56:24 +0000

Are you still using the old subscription box provided by FeedBurner.com ? Do you admire when some famous wordpress sites have custom subscription box with background images and custom CSS ? Want to know how to do that , then here is a tutorial for all Novice Blogger users and designers. With this tutorial you can add subscription box to your blogger blog.

Just Follow this step by Step procedure to create newsletter subscription box widget for Blogger with your own custom CSS.

Creating a Feedburner Account

Step 1 :

First we need to have one feedburner account in order to create a subscription form widget.

Register an account in Feedburner.com and then go to Publicize Page , there select Email subscription option in left sidebar. In that click activate button below.

Step 2 : So now you have your own feedburner account. In that code search this tag ” feedid= ” after this there will be 7 digit number save it in a text file .

Step 3 : Adding code and CSS

I am going to share my own feedburner code with you guys. And i will explain all the codes which you need to modify.

First let’s add the CSS required for this subscription box.

/*... Subscription ..*/
div#subscribe {
float : left;
width : 350px;
height : 94px;
background : url('http://techieblogger.com/wp-content/uploads/2009/07/subscribebgcopy-1.jpg') no-repeat;
background-color : #ffffff;
overflow:hidden;
}

#subscribe a {
font-weight : normal;
color : #64666b;
border:none;
}
#subscribe a :hover {
font-weight : normal;
color : #64666b;
border:none;
}

div#subscribe img {
float : right;
margin-top : 6px;
}
#subscribeform {
float : left;
margin : 0;
padding : 0;
padding-left : 72px;
}
#subscribeform .subscribeinput {
float : left;
border : 0;
width : 188px;
height : 19px;
background : url('http://i422.photobucket.com/albums/pp302/bloggeracs/input.jpg') no-repeat;
font : 11px Verdana;
color : #c6c6c6;
margin-top:10px;
padding-top : 5px;
padding-left : 5px;
margin-left : 9px;
}
#subscribeform .subscribesubmit {
float : left;
border : 0;
margin-left : 5px;
margin-top:10px;
}

To add this code in your template , Go to Edit HTML page of your Blogger template. Then search for this tag ]]> .
And add the CSS codes above that tag.

Subscription Box code

Now let’s add the HTML code to sidebar.

To add this code to sidebar , use the option ” Add a Gadget” in layout section of your blogger template and add HTML/Javascript Blogger widget.

Customizing the Subscription Box Code

As I have told early that the code above is from my own blog. So you need to edit few things to make it compatible for your blog.

Just edit the text in red with your own Feedburner subscription links and details.

Customizing the Appearance of the subscription form

First let me discuss the code i have used in my blog and then I will explain how to customize it.

div#subscribe {
float : left;
width : 350px;
height : 94px;
background : url(‘http://techieblogger.com/wp-content/uploads/2009/07/subscribebgcopy-1.jpg‘) no-repeat;
background-color : #ffffff;
overflow:hidden;
}

This is the div element which is going to contain the subscription box.
In this you can change the width and height of the widget to suit your blog. You can also change the background image of the subscription box as well.

#subscribe a {
font-weight : normal;
color : #64666b;
border:none;
}
#subscribe a :hover {
font-weight : normal;
color : #64666b;
border:none;
}

div#subscribe img {
float : right;
margin-top : 6px;
}

This codes control the display setting of the text and image shown in the subscription box widget.

#subscribeform {
float : left;
margin : 0;
padding : 0;
padding-left : 72px;
}
#subscribeform .subscribeinput {
float : left;
border : 0;
width : 188px;
height : 19px;
background : url(‘http://i422.photobucket.com/albums/pp302/bloggeracs/input.jpg‘) no-repeat;
font : 11px Verdana;
color : #c6c6c6;
margin-top:10px;
padding-top : 5px;
padding-left : 5px;
margin-left : 9px;
}
#subscribeform .subscribesubmit {
float : left;
border : 0;
margin-left : 5px;
margin-top:10px;
}

In this the #subscribeform code defines where the subscription form box to be placed. If the box is misaligned in your blog then edit the text in red there.

.subscribeinput : This code defines the width of the input area of the subscription box. Just replace the codes in red to suit your blog.

.subscribesubmit : This code controls the CSS settings of the submit button. You can find the URL of the submission button in the widget code. Change the code in red to suit your blogger template.

Hope I have explained the CSS and Feedburner subscription box code to the fullest. With this basic knowledge you can create your own feedburner subscription box.

If you had came across any good looking subscription box in any website then let me know. I will send you the code to add in your own blog and i will also explain that code as well.

Customizing Blogger post Navigation script

Michael — Tue, 23 Jun 2009 12:53:59 +0000

Blogger Blogs have default post navigation script which allows user to navigate between posts.It consists of ” older posts” , “Newer posts” and ” Home page” link. Since it’s default , no CSS codings are added for the navigation script. So in this post I will explain how to modify the script and to add background images and then aligning the older posts and newer posts links properly.

Know the script codes

Before explaining how to customize the codes , I would like to explain the tags involved in the blogger templates which control the blogger post navigation script.

CSS codes

Firstly, let us see the default code included in minima or Rounders blogger template.

#blog-pager-newer-link {
float: $startSide;
margin-$startSide: 13px;
}

#blog-pager-older-link {
float: $endSide;
margin-$endSide: 13px;
}

#blog-pager {
text-align: center;
}

instead of startside and endside we can have left and right respectively.
#blog-pager-newer-link : this code contains the css necessary for newer posts link
#blog-pager-older-link : this code contains the css necessary for older posts link
and #blog-pager controls the contains necessary for Home page links.

If you are using custom blogger template , then you will find something like this :
#blog-pager-newer-link {
padding-left : 20px;
border : none;
float : left;
}
#blog-pager-older-link {
float : right;
padding-right : 20px;
border : none;
}
#blog-pager {
padding : 0 15px 0;
text-align : center;
}
.blog-pager a {
color : #cc0000;
}
.blog-pager a:hover {
color : #cc0000;
}

XML tags which shows the post navigation links

Now let us see the default tags included in the blogger templates which shows post navigation links.To see this tag , you need to check ” expand widget templates” option in EDIT HTML page of the blogger template.

There you can find the following tag

As mentioned in the CSS codes itself,

contains the code to show newer post links.
contains the code necessary to show older posts link.
will contain the code necessary to show Home Page Link.

Hope now you know about the code which controls the Older post and Newer post links for post navigation. Now let us see how to customize this script to suit our blogger template.

Adding background image along with text

Let us see how to add Background image to the text Older Posts and Newer Posts.
Go to EDIT HTML SUBTAB and then search this following code or similar.

#blog-pager-newer-link {
float: $startSide;
margin-$startSide: 13px;
}

#blog-pager-older-link {
float: $endSide;
margin-$endSide: 13px;
}

#blog-pager {
text-align: center;
}

Now replace the whole code with

#blog-pager-newer-link {
background : url(http://i43.tinypic.com/11bro1s.jpg) no-repeat left 0%;
padding-left : 20px;
border : none;
float : left;
}
#blog-pager-older-link {
float : right;
background : url(http://i44.tinypic.com/2n6dirp.jpg) no-repeat right 0%;
padding-right : 20px;
border : none;
}
#blog-pager {
padding : 0 15px 0;
text-align : center;
}
.blog-pager a {
color : #cc0000;
}
.blog-pager a:hover {
color : #cc0000;
}

In that you can change the background images and then customize the color of the text. That’s it now save your template , you can find something like this :

Replace Image with Background images

To replace the “older posts” , ” Newer Posts” and “Home” text with background images , follow these simple steps.

replace the css code for blog post navigation widget with this code

#blog-pager-newer-link {
padding-left : 20px;
border : none;
float : left;
}
#blog-pager-older-link {
float : right;
padding-right : 20px;
border : none;
}
#blog-pager{
padding:50px 10px 10px 10px;
text-align:center;
}
.blog-pager a{
color:#A10000
}

.blog-pager a:hover{
color:#15FFED
}

and then save your template. Now check ” Expand Widget Templates” option and now replace the

with this code

You can change the images included with your own blog navigation images. After that save your template and check your blog. You can find a blog navigation links something like this :

Show blog post navigation above posts title

You can also show the blog post navigation script above post title too. In order to implement this hack , go to EDIT HTML page of your blog and check ” EXPAND WIDGET TEMPLATES” option. Now search this tag in your template.

Now paste the following code immediately below it

Troubleshooting problems with blog post navigation script

Few might have noticed that the Blog post navigation links will be misaligned sometimes. Newer post , Older post and Home page links will get together. So it means that the CSS codes are missing for the file. To overcome this problem , just copy and paste the corresponding CSS code you need above ]]> .

Blog post navigation missing

Sometimes the blog post navigation may be missing in your blog. It’s because the blog post navigation code may be missing in your template. To overcome this problem , search this tag in your template with ” expand widget templates” option enabled.

if the tag is missing , then add the above tag in your template below as shown in the image.

Hope this post will be helpful for all blogger newbies. If you need any other customization then feel free to ask in comment form below.

Show Adsense ads below post title

Michael — Sat, 16 May 2009 13:07:00 +0000

In this tutorial I will explain how to place Adsense ads below post title in Blogger Blogs with lots of customization tips. You might have noticed that most of the bloggers show Google adsense ads below title to increase their Click through rate and earnings.

According to Google adsense help pages ” Where to place adsense ads ?“. Placing adsense ads below title and above article content can bring high ctr and performance.

This “heat map” illustrates the ideal placing on a sample page layout. The colors fade from dark orange (strongest performance) to light yellow (weakest performance). So it’s clear from the heat map that the adsense ads below post title can bring high ctr.

How to add Adsense ads below post title ?

It’s really very easy to add adsense ads below post title in blogger. Inorder to add adsense ads below post title ,just follow the below steps.

Before adding the adsense ads to blogger templates , we need to encode our adsense ads code.If you add the adsense code without encoding then you can’t see any adsense ads below post title.

Encoding Adsense Ad Code ?

To encode adsense ads, first create an adsense ad and then visit centricle website to encode. In centricle web page , you need to paste your adsense code in the text area and then click ” Encode “. Copy the encoded code. Now your adsense code is ready to be added to blogger template.

Adding adsense ad code to blogger template

step 1 : Go to layout section of your blogger template and then navigate to EDIT HTML sub tab. There check the “Expand Widget Templates “.

step2 : Look up the following tag :

and paste the encoded adsense ad code above that tag.

Then click save. That’s it Now we have added the adsense ad code below the post title in blogger blog successfully.

Customizing Adsense ads

Here are the few customization tips , which you can apply to increase your CTR.You might have seen that most of the bloggers will show more than Three posts in home page / labels page / archives page. But as per adsense TOS we can show only Three ads per page. So due to this we will see some blank spaces between post title and content , when the three adsense ads are already loaded.In order to avoid this error , we can show adsense ads only in Post pages i.e pages containing articles.

Showing adsense Ad only in Post pages

In order to implement this hack in your blogger template. you need to change the encoded adsense ad code to this.

Encoded Adsense code here

Now paste this code above

Making adsense ads to Float

After adding the adsense ad code to your templates , you can see that by default the adsense ad code will not allow any text to be shown nearby it.

So in order to overcome this error , we need to add some CSS codes to make adsense ad code to float either left or right.

For this we just need to modify the encoded adsense code to be added in step 2.

replace that encoded code with this one :

left;padding:5px;”>

encoded adsense ad code here

Change the text in red to make adsense ad to float either to left or right.

My suggestion

According to me , instead of showing adsense ads in all pages ( home page , archives page and labels page ) , we can show adsense ads only in post pages to increase our ctr. If you are using the ” Read More hack for Blogger with automatic Thumbnail creator script ” then it’s advisable to show adsense ads only in post pages.

Hope you guys will like this hack. If you need any more customization , then give me your suggestions via comments.