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.

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.

Related posts:

1. Create Compatible CSS for Firefox , IE6 , Opera , IE7 , etc
2. Image re-sizer CSS Hack for blogger and wordpress users
3. Page Navigation Menu Widget for Blogger

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.

or

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.

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.

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.

Related posts:

1. Colorful Link Hover Hack for Blogger and WordPress
2. Subscription Box widget for Blogger Users
3. Redirect Users From Old Domain To New Domain – Blogger Hack

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.

Related posts:

1. How to Choose best web Hosting service ?
2. Top 10 free Image hosting and Photo sharing websites
3. Choose web hosting wisely with web hosting Rating

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.

• FlipMyText
• PayPal Button Code Generator
• Paypal Button Generator script

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

Related posts:

1. Image re-sizer CSS Hack for blogger and wordpress users
2. Build Your Own Online Store In Blogger Blogs
3. Colorful Link Hover Hack for Blogger and WordPress

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.

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,

• <b:if cond=’data:newerPageUrl’> contains the code to show newer post links.
• <b:if cond=’data:olderPageUrl’> contains the code necessary to show older posts link.
• <b:if cond=’data:blog.homepageUrl != data:blog.url’> 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.

Now replace the whole code with

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

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.

• <b:includable id=’main’ var=’top’>

Now paste the following code immediately below it

• <b:include name=’nextprev’/>

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 ]]></b:skin> .

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.

<b:include name=’nextprev’/>

if the tag is missing , then add the above tag in your template below <b:includable id=’main’ var=’top’> 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.

Related posts:

1. Show Date before each Post in Blogger
2. Embed Comment Form below post in Blogger
3. Hide Blogger Navigation Bar / navbar

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 == &quot;item&quot;’>
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.

Related posts:

1. Show Date before each Post in Blogger
2. Techie Blogger revenue sharing program : Adsense ID configuration
3. Adsense Video Units Ads is available for All Now – Adsense Player

I have written a tutorial on Backup Blogger blog widgets ” How to change Blogger Template without deleting widgets ? ” .But most of the friends found that difficult to backup blogger widgets. So in order to help them , I have created a video tutorial for them to backup Blogger Template and blogger widgets while changing their blogger templates.

BACKUP BLOGGER WIDGETS VIDEO TUTORIAL

This is my first video tutorial guys , so please give me your suggestions. Due to lesser RAM , the Voice is a bit choppy. If you still have any doubts or difficulty to backup the blogger blog widgets then please feel free to contact me.

Very soon I will write tutorials on

• How to backup Blogger Posts

and will explain the functionality of numerous blogger posts backup software. If you don’t want to miss my future tutorials or hack then please suscribe to my blog.

Related posts:

1. How to change Blogger Template without deleting widgets ?
2. Add paypal donation button to blogger and wordpress blogs
3. Magic House Blogger Template

Web-designers create blogger template for Hours using one particular browser say Firefox , They don’t know that the CSS code they use is compatible only for the browser they are working at present. Especially in IE6 , there are many Compatible issues.

for Example : the sidebar may appear below main content wrapper or there would be more gap between each widget , content wrapper and sidebar may overlap ,etc.

So in this Post I will tell you How to create CSS code which is compatible for almost all browsers. For this you need to have two browsers Internet Explorer 6 and Firefox .

I have chose IE6 because it is one of the most common browsers which windows have.

First let’s check is our current Blogger template is compatible with all browsers or not.

For this visit this website : Browser Screen shots
Enter your Blog URL and check the images there to know How your blog looks in various Browsers.

step 2 : If you find any incompatibility issues then you need to modify your CSS code to suit browsers.

Let’s us see an Example

Generally the css we use if of this form :

#example {
float : left;
width : 170px;
margin-left : 5px;
}

In this assume that this particular div is incompatible with Internet Explorer version x.

then we need to modify the above css code as

#example {
float : left;
width : 170px;
margin-left : 5px;
}
#example {
float : left;
width : 185px;
margin-left : 3px;
}

in this first css code is for all versions of Internet Explorer and the second css code is for other browsers like firefox , opera , dillo , sea monkey , etc

but it will be confusing for you to edit.. so now we are going to add different CSS rules to IE, we can use the child selector command which IE can’t understand. The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

After introducing Child selector command , the css code must look like this

#example {
float : left;
width : 170px;
margin-left : 5px;
}
html > body #example {
width : 185px;
margin-left : 3px;
}

in this the green colored code is for IE versions and the red Colored code is for other browsers.

So with simple child selector command we can make our css code compatible for all browsers. Every time when I create a New template , I use to check whether it is compatible with other browsers or not. And I use to change the CSS code to suit that browser.

If you are unable to modify the CSS code then please mail me your template and explain the problem , I will rectify those errors and mail you back.

Related posts:

1. Make your site compatible for Higher screen resolution
2. Add Yahoo Smileys to Blogger Posts – Firefox Hack
3. Image re-sizer CSS Hack for blogger and wordpress users

I noticed that most of my readers are asking me How to add 125 x 125 ads section in Blogger templates. We know that to add a widget we need b:section with add page elements function enabled. So in this post I will tell you how to add b:section in your Blogger template and how to add CSS code to suit that b:section.

So with this hack you can add any widget you want. And I will also make a note on Adding 125 x 125 Page Element.

Lets start :

Adding b:section to Blog sidebar :

Step 1 : Sign in to Your Blogger account and got to Layout section of your Blog. Then Navigate to Edit HTML sub tab.

Step 2 : If your template possess two Columns in Right sidebar and if you want to add an Subscription form or 125 x 125 ad section above those two columns then do this step.

Search this tag or similar

The id can be different , so please paste the following code just above the sidebar section of your Blog.

So Now we have added the b:section code needed to add more widgets. Then we need to add css code for that b:section

please edit the text in green to suit your Blogger template.

So we have successfully added the b:section and css codings required.

Now navigate to Layout section of your blog and there you will see a new ” Add page Elements ” link just above the sidebar.

If you are planning to add 125 x 125 ad section then click add page element link. there select add HTML/ JAVASCRIPT page widget and insert the below code over there.

After adding the code , click save widget. Then navigate to Edit HTML sub tab to add the necessary CSS code needed for this ad section

Edit the test in red to suit your template.

So we have successfully added the 125 x 125 ad section.

Adding b:section below or above posts ( content)

Most wish to add two column b:section below main container ( posts ) . I will write about this hack soon. (Its a continuation of this hack )

If you guys need any help , please feel free to contact me mohamedrias1103@gmail.com . See you soon with new Blogger hacks.

Related posts:

1. Random Posts Widget for Blogger
2. Show Date before each Post in Blogger
3. Add yahoo Smileys on Blogger Posts – Blogger hack

“Why should we submit our Blog sitemap to Search Engines ? “

Sitemaps allows a webmaster to inform search engines about URLs on a website that are available for crawling. A Sitemap is an XML file that lists the URLs for a site. It allows webmasters to include additional information about each URL: when it was last updated, how often it changes, and how important it is in relation to other URLs in the site. This allows search engines to crawl the site more intelligently.

So in this Post I am going to tell how to Submit our Blog url and Blog Sitemap to Google. Just follow these step by step instructions:

Step 1 : Submitting Blog url to Google.

To submit our Blog Url to Google visit this page(http://www.google.com/addurl/?continue=/addurl). There you will find a form like this ,

Fill the form and click submit.

So we have successfully added our Blog to Google. but it’s just not enough. We need to submit our Blog Sitemap to Google.

Step 2 : Now we need to add our Blogger Blog sitemap to Google Webmasters.

Why we need to submit our Blog to Google Webmasters ?

Google Webmaster provide us some useful tools which helps us to know lots of things about our site. I will explain only top 2 tools :

* Google Crawling info

- when Google Indexed our Blog.

- Broken or Invalid Urls which Google unable to crawl

* Top search queries

- with this tool we can find the top queries that drive traffic to your site and where your site is included in the top search results. This will let you learn how users are finding your site.

I hope with the small introduction you might have learned the importance of Google Webmaster. So let us see how to Add our Blog there.

We can do this in two methods. First I will tell how to do it manually

Login to Google Webmaster with your Google Account .

It will take you to Dashboard page. There you can see a box saying ” Click here to add your site” . In that box type your full blog url with http:// and click add site.

You know With Draft Blogger we can automatically submit our blog to Google Webmasters

So draft blogger will automatically add our blog url to Google Webmasters.

step 3 :

After adding your site url , navigate to dashboard again. One the right side of your site , you will find two links ( ADD and Verify ).

Now click ” Verify ” , it will take you to new page saying

In this select ” Add Meta Tag ” and copy and paste the code in your Blogger template. Then save your Blogger template and click verify.

step 4 : Adding Blog Sitemap to Google Webmasters

Now navigate to Dashboard again , there click add sitemap link . It will take you to a new page , There click ” Add a sitemap” . Then select ” Add General Web Sitemap” . and do as instructed.

that’s it. So we have successfully added our Blog sitemaps to Google.

Now we can see indexed stats of our Blog sitemap .

After submitting the sitemap , you will see indexed stats like these

If you have any trouble let me know , I will try my best to help you guys.

Related posts:

1. Google translation Flags Widget for Blogger Blog
2. backup Blogger Blog Widgets – an easy video tutorial
3. Write for Techie Blogger and get 100% Google Adsense revenue