Internet Explorer 6 Fix for Blogger Templates

When your site gets a visitor and finds that one of your sidebar has been pushed below the posts, he’ll consider your site of not a decent quality and you might lose a regular reader

The ready made templates which are available for Bloggers are from the side of some world class designers but when a blogger places an image, video etc. in the middle of the post and the width of the images/video is more than that space provided, in some versions of Web browser, the sidebar tends to drop ,ie, it slips down blog posts this is also known as float drops.

I had a similar problem when one of my friends said that the left sidebar is dropping for my Minima three column template in some old versions of Internet Explorer. My site is loaded with a lot of stuff and maybe in some web browser my sidebar falls. My site in short was looking a piece of crap without one sidebar.

A normal css definition for a sidebar looks like

#sidebar-wrapper

{

width: 240px;

float: right;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

word-wrap:break-word property for fixing long floating text works only in Internet Explorer

Too make your sidebar fixed in one location, add these three CSS properties to the sidebar-wrapper property of your template

#sidebar-wrapper

{

positon:absolute;

magin-top:0px;

margin-left:0px;

}

So now the code looks like this

#sidebar-wrapper

{

positon:absolute;

magin-top:1px;

margin-left:1px;

width: 240px;

float: right;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

This confirms to the Web Browser that the sidebar has to remain fixed at one place only in all versions of the Web Browser. The Sidebar will remain static and should not be affected by any long floating image/text/video.

Add Feeds to Your Labels in Blogger

Today i will show you how to add Feeds to labels in Blogger.It is very simple hack and you can do it very easily.As you see the pic in the right side,you notice the feeds icons in the left of each labels.This helps for a reader to subscribe for a single category.So,follow the following easy steps and hey...Dont forget to digg or bookmark this post as other can also know;)

1. Go to HTML tab in your template layout.
2. Backup your template.
3. Tick the box of "Expand the widgets".
4. Find this code (shown in Red) in your template:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='"http://beta.blogger.com/feeds/YOURBLOGID/posts/full/-/" + data:label.name'><img src='http://img304.imageshack.us/img304/3518/rect18st2.png'/></a>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

5. Add the above code colored in Blue in the specified place.
6. Change YOURBLOGID (Shown in bold) to Your own Blog ID.
7. Save your template and Its Done.

What is Blog ID?Just visit the Blog ID link in step 6 and follow instructions to find your blog ID.

Note:You must have the label widget in your template.
If you have any Problems,I am Here.
If you like this trick,then please link back to my blog:)
[Thanks Purple Moggy for the code]

How to Add Email Link Below the Posts in Blogger

You can put your email link below your posts but it will be picked up by spam bots and then your inbox will soon be full of thousands of spam mails. It will be better to follow this method of putting it.......

First you will have to create an image out of your email link. For this go to :

Email Generator

OR

http://services.nexodyne.com/email

Follow the steps to make an image out of your email and then download it to your PC. Create an account at a freehost like Googlepages and upload the image there. Copy down the link of the uploaded image.


Login to Blogger Dasbhoard. Click on layouts for the blog where you want to add the link. Click on Edit Html tab at the top. First backup the template by clicking on Download Full Template link. Then put a check in Expanded widgets Template box and scroll down in Edit Template text box till you come to this line in Blog Posts widget :

<p class='post-footer-line post-footer-line-1'>

Paste the line below just under the code above :

<img src="URL OF UPLOADED EMAIL IMAGE" alt="my email" />

Replace the CAPS with the link of your uploaded image. Preview and save Template.

CLICKABLE EMAIL LINK

To make a clickable image link paste this code instead at the same position :

<a href="mailto:xyz@gmail.com?subject=Hello%20again"><img src="URL OF UPLOADED EMAIL IMAGE" alt="my email" /></a>

Instead of xyz@gmail.com put your own address. This method carries the risk of the address being harvested by spam bots. Save Template. Now clicking on the image will open the Compose Mail window with the address already filled in and the subject title as Hello Again.

How to Fix bX-xu1zoq Error In Blogger

In the Page Elements subtab of Template tab when trying to rearrange your Page Elements or Layout using the drag-and-drop interface you may get a bX-xu1zoq error code as shown below :



Here is a workaround for this :

Switch to Edit Html subtab of Template tab and scroll down to see the code for the widget. It will look like this :

<b:widget id='Label2' locked='false' title='Labels' type='Label'/>

The name, title and widget id may be different but in the unexpanded widget template the whole widget is represented by the above one line. Use Edit---->Cut to remove and copy the widget line to the clipboard. Then use Edit---->Paste to paste it lower down in the same section or to another section.

Remember to paste it within a section which is shown by this code :

<b:section class='sidebar' id='sidebar' preferred='yes'>

PASTE WIDGET CODE LINE HERE

</b:section>

Save Template.

UPDATE : This method also works for ERROR : bX-o3wmwc which you may get when trying to rearrange page elements on the Layout Page.

How to Add Adsense to Beta Blogger Posts

To add Adsense Ads. to beta blogs.............

FIRST BACKUP YOUR TEMPLATE.

Then login to your Adsense account and click on Adsense Setup. Click on type of Ad. you want to setup - Content, Link unit, Search unit or Referrals.

MOST IMPORTANT LINK IN YOUR TEMPLATE SETTINGS is Download Full Template on Edit Html subtab of Template Tab.

At present you are allowed to add three Content Ads., One Link Unit, two Search units and four different Referal units per page. You should try to add Ads. so that most of them appear 'above the fold'. This is the amount of web page visible to the viewer on loading the page without having to scroll down. The best place for the Link unit is in the header as a single line containing 4-5 ad units. The right hand sidebar can hold one 'skyscraper' content unit with another in the left sidebar. This is if you have a three column template structure like this web page. The one big rectangle of content unit can go above the posts in the main column. You can add the search unit either in the posts column or in the sidebar. The referrals units can go in the sidebars at the bottom.

Follow the procedure till you come to the code for pasting in your site. Then login to Dashboard click on Layout under the name of your blog. Click on 'Add Page Element' in the sidebar and choose Html/ javascript option in the popup window. Copy the code for the Ad. from Adsense setup page and paste it into the Content area. Save changes.

To add the code in the main column of your blog. Click on 'Edit Html' Tab to open the Edit Template page. Let Expand widget templates box be unchecked. In Edit template field scroll down till you come to the code for the main column which is :

<div id="main-wrapper">
<b:section class="main" id="main" maxwidgets="1" showaddelement="no">
<b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">
</b:widget>
</b:section></div>

In the above code change maxwidgets="1" to maxwidgets="2"
Also change showaddelement="no" to showaddelement="yes"
Save Template.


Now click Page Elements tab. The Add and arrange Page Elements page opens.
Here you can now see that Blog posts section has a Add Element link. Click it to open the choices page. Choose Html/Javascript option.

CHOOSING HTML/JAVASCRIPT OPTION ENABLES YOU TO ADD CHANNEL INFO ALSO.

Copy and paste the Adsense code into the Content field. Save changes. This will place the Ad. on top of your posts. To place it below your posts go to Page Elements view and in the Blog Posts Section click and drag the Ad. to below the posts. To place one more Ad above the posts change maxwidgets="2" to maxwidgets="3" and repeat the above process. Refresh Cache. View Blog. Enjoy.


IMPORTANT ; Many readers have asked for a hack similar to Classic Blogger in which we could add Adsense Ads. within the body of the posts. louiss lim has a hack for this here. However this is done by altering part of the Adsense Ad. code which is against the TOS, so he has submitted it to Adsense for approval. Also it seems that only text Ads. can be added this way.