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 800x600 px the website layout will be perfect. But when you look at your site at a higher screen resolution like 1024x768 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.

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 : <p><data:post.body/></p> 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.

<b:if cond='data:blog.pageType == "item"'>
Encoded Adsense code here
</b:if>

Now paste this code above <p><data:post.body/></p>

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 :

<div style="float:left;padding:5px;">

encoded adsense ad code here

</div>

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.

Screen resolution CSS hack for web designers