post large images and photos in your Blogger blogspot?

Using the standard "Add Image" button in Blogger's text editor, you can only post photos or images with limited size, even if you choose the "Large Image" option.

Check out this test blog to see how the image fills up the entire post area. If you use the Blogger's Add Image button, the largest image you can post will be much smaller than this.


Follow these instructions to post large photos or images in your blog:

• Store your photos in an online image hosting service. I would suggest the free Photobucket powered by Google.
  
• Copy the direct link to the photo you want to post. In Photobucket, the direct link to your photo is located in the "Direct Link - Layout Pages" tab below your photo.
  
• In your Blogger Create Post panel, click the Edit HTML in the text editor.
• To post the photo or image, type the code below in the Blogger text Editor:

click here

• Change PhotoURL to the actual URL (the direct link) of the photo you want to post.
• Set the width and height of your photos appropriately. If you want it to be the actual size, simply delete the red part. If you just want to set the width and let the height changes accordingly to scale, simply set the width only, not the height.

Testing and Viewing in Other Browsers

Personally, I don't like the stage of testing in other browsers. It's annoying that other browsers might show your blog differently than the blogs you're designing it in. But if you want all to have access to your blog and see it as nicely as you've designed it, then you have to go through this process. As for my blog and my demo blogs, I designed them in Firefox and tested in IE7. I've received comments that people using IE6 have some trouble with the templates, but I didn't test them in IE6, and not about to trouble myself downloading IE6 and debugging the codes. The way I see it, if Firefox and IE7 get it right, then it's IE6 that's got the problem (not my templates) and it's IE6 that has to debug itself. Anyway, isn't that why IE7 is made in the first place?

Personally, I think Firefox is by far above all. If you're not using Firefox, I suggest you download them right now - it's free, fast, not too crowded with useless buttons, lightweight, and just plain great. And if you're using IE6 and don't want to upgrade to IE7 because your computer is not fit enough to take the load, but you know that viewing blogs is prone to bugs - then Firefox should be the way to go. Plus, the download is quick, the upgrading is efficient and fast, and there's a lot more to this - but I'll just let you see them on your own. So, if you want to get rid of IE and use Firefox instead, the download button is on the sidebar...

I don't really have a tip for debugging. You just have to be patient and solve the problems one by one. The way I avoid problems is by writing a stricter code so they won't have a chance to flip flop or get 'loose'. If you want, you can start designing a template starting from any of my own templates. That way, you can maintain the part of the CSS code that's there to avoid any bugs in different browsers. But I can't guarantee they're 100% bug-free!

Update:
I have tested all the templates in all browsers using Browsershots.org and labeled the ones compatible with all browsers (including IE6). There are also some templates compatible with IE6, but have their sidebars pushed down the Blog Posts because their content-box width is wider than the sidebar. So, please check if this is the case if you see your sidebar misaligned.

Tips and problems when installing templates

Here are some tips you can use to improve reliability on using these templates and some problems you might encounter when installing and how to solve them.

Tips on using background images:
The background images (images of the header, main background, content background, title bar, list background, etc) are stored in my flickr account. I can't guarantee the reliability on fetching these images all the time. So I suggest that you upload the images for a particular template that you're using and store them somewhere else. Simply get the image URLs from the xml code and change the URLs in the code (in red) to point to the new address of the images.

Example of code:
background: #000000 URL(http://...........) repeat left top;

Check all URLs in the CSS styling section and not just the first one you see in the code.

Caution with Header section alignment:
If your Header section look misaligned the first time you upload any template into your blog, that's probably because your Header Title and Description is too long and wrapped into a second line. If this is the case, shorten them or make them smaller. If not, it might be that your Linkbar is empty or your own uploaded header image size is wrong.

Caution with uploading your own Header image:
When you upload your own header image from the Header Layout page, the whole section or some part of it can be misaligned or cut off if your image is not compatible (having the right size) with the template. Read here for more details.

Caution with Linkbar: If you use any template with linkbar, the Header section might look weird and cutoff the first time you upload it into your blog. It's because your linkbar is empty (without any links yet). So fill up you links and the Header section will turn to normal again.

When Blogger can't save your new template:
If Blogger can't save the template because there are more than one IDs (for example ID for LinkList, HTML, Adsense, etc), simply go back to your old template and delete all widgets (also called page elements) except the basic ones (like About Me, Labels, and Blog Archives) and reinstall the template. You can later add the widgets back on.


Report your problems here:
If you face some new problems when installing my templates or if you want to share some tips, put your questions or tips in the Comment section. I'll try to answer them as soon as I can.

Tips and problems when installing templates

Here are some tips you can use to improve reliability on using these templates and some problems you might encounter when installing and how to solve them.

Tips on using background images:
The background images (images of the header, main background, content background, title bar, list background, etc) are stored in my flickr account. I can't guarantee the reliability on fetching these images all the time. So I suggest that you upload the images for a particular template that you're using and store them somewhere else. Simply get the image URLs from the xml code and change the URLs in the code (in red) to point to the new address of the images.

Example of code:
background: #000000 URL(http://...........) repeat left top;

Check all URLs in the CSS styling section and not just the first one you see in the code.

Caution with Header section alignment:
If your Header section look misaligned the first time you upload any template into your blog, that's probably because your Header Title and Description is too long and wrapped into a second line. If this is the case, shorten them or make them smaller. If not, it might be that your Linkbar is empty or your own uploaded header image size is wrong.

Caution with uploading your own Header image:
When you upload your own header image from the Header Layout page, the whole section or some part of it can be misaligned or cut off if your image is not compatible (having the right size) with the template. Read here for more details.

Caution with Linkbar: If you use any template with linkbar, the Header section might look weird and cutoff the first time you upload it into your blog. It's because your linkbar is empty (without any links yet). So fill up you links and the Header section will turn to normal again.

When Blogger can't save your new template:
If Blogger can't save the template because there are more than one IDs (for example ID for LinkList, HTML, Adsense, etc), simply go back to your old template and delete all widgets (also called page elements) except the basic ones (like About Me, Labels, and Blog Archives) and reinstall the template. You can later add the widgets back on.

Read also some other common template problems , fail to upload template.

Report your problems here:
If you face some new problems when installing my templates or if you want to share some tips, put your questions or tips in the Comment section. I'll try to answer them as soon as I can.

What is a Linkbar?

Linkbar is just a menu of links at the top of your blog, usually near your Blog Title. Come to think of it, it's better if I just call it Menubar. I don't know why I call it Linkbar in the first place, but I'll just stick to that name because I've used it so many times in my post and my templates.

Below are some example pictures of where the Linkbar is in the blog page, and how you can add links to the Linkbar in the Settings page.

Moving the 'Blog Title & Description' Location

This guide is meant to be used with the Ourblogtemplates.com designs.

You may see that you have to move the location of your Blog Title & Description (BTD), relative to the header borders or image. For example, if you're using a header image smaller that what was designed for the template and the BTD doesn't appear because it's way down at the bottom of the header border, you then have to move the BTD up. To do this, search for this code:

#header h1 {
display: block;
margin: 0px 0px 0px 0px;
padding: 130px 30px 0px 20px;
color: $blogTitleColor;
font: $blogTitleFont;
text-align: left;
}

To move the BTD up or down, change the number in red accordingly. The smaller the number, the higher the BTD location is on the header, relative to its borders and/or header image.

This is just a basic instruction to play around with the BTD location. If you're more familiar with CSS, than this obviously is just a piece of cake :)

How to Get Excellent Images for Your Blog Header?

To improve your blog design, you can place your own image in the header section, and add your own text to act as the blog title and description, instead of using the default Blog Title and Description provided in the template.

If you don't have any images to use as the header image, you can look at these websites that offer free excellent blog header images. You can follow this instruction on how to place an image on a Blogger's blog.

How to upload your own header image

This guide will show you how to upload a header image with Blog Title and Description as part of the graphic. For this to work, you have to hide the default Blog Title and Description texts.

*****

It's much better to use your own header image than the image already defined by the designer or just the simple plain background. For one thing, you can be sure to have a unique header compared to the rest of the blogs. The second reason is that you can write your blog Title and Description with much nicer fonts and color combinations.

Before that, you have to make sure that your image size will align well with the rest of the Header section. Turning the Title and Description text on or off can also mess up you alignment. For my templates, I've already given instructions for perfect alignment.


So, how to do this? Simple...

1. Go to the Layout > Template > Page Element. From there, click the Edit button for your Header. The screen below will pop up.

2. Upload an image from your computer. Make sure to that your image size is correct or otherwise your Header will be misaligned! Save your changes. (Don't forget to fill in your Title and Description in the text box above! You can turn the text off later.)

3. To hide the default Blog Title and Description text, click the Header Edit button again. Another screen will pop up, but with a slightly different option (see the screen below). Select the 'Placement: Instead of title and description'. This will hide your Title and Description from showing up on the blog (but still kept as your blog's information). If you don't want to hide your Title and Description text, simply click the other option.

4. That's it. All you really have to do is make sure that you've got a nice image to put up as your blog's header.

Installing the template in your blog

Before you start changing your template, make sure you save your old template file just in case you need to start again. And make sure you have a programming-based text editor installed on your computer (to make the codes easier to see. If you don't have one, there are many free programming text editors that you can download. I use Notepad++).

These are some instructions on how to put the template in your blog. There are some ways to do it; I'll explain some of them, starting from the simplest methods.

For tips to improve template usage and common problems faced when installing these templates, read this post, or here if you fail to upload template.


METHODS TO INSTALL BLOGGER TEMPLATES:

Method I. Simplest method - Uploading the xml file:

1. Download the template that you want and save it in your computer (make sure it is saved as xml file).
   
2. Go to your Layout > Template > Edit HTML page.
3. Choose the file from the Browse... button, and then press the Upload button.
4. It may ask you to delete some widgets - so just delete them. (Widgets are the extra page element added to the sidebars).
   
5. You're done! View your new blog.
   
6. If your contents doesn't look aligned, that's probably because you don't have any widget on one of the sidebars - so add your widgets.

Method II. Copy-paste the template codes into the Blogger text editor:

If you don't want to download the file first, or prefer to paste the code into your Blogger editor, this is how to do it.

1. Open the template file that you want and copy all the codes.
2. Got to your Layout > Template > Edit HTML page.
3. Click the Expand Widget Templates (EWT) button. (If the EWT button is on or clicked, all template codes will be visible; if it's off or unclicked, then some codes related to Blogger Data are hidden so that the HTML codes look less messy - most of the time, you don't want to change or add codes inside the Blogger Data area).
   
4. Select all the codes in your Blogger editor and delete them all. Then paste the codes for your new template.
5. It may ask you to delete some widgets - so just delete them. (Widgets are the extra page element added to the sidebars).
6. You're done! View your new blog.
   
7. If your contents doesn't look aligned, that's probably because you don't have any widget on one of the sidebars - so add your widgets.

Method III. Copy-paste the CSS styling only into the template code:

The annoying part about using the two methods above is that you have to delete some widgets that you've made (maybe some Adsense codes, Text contents, HTML codes - usually the widgets About Me, Labels, and Blog Archives are not deleted). If you don't want this to happen, you must copy and paste the CSS styling part only. By changing the CSS part only, you don't change anything related to the Blogger Data including the data about the widgets that you've made.

CSS styling is the code that controls everything about the template style or appearance - the font size, colors, background images, header size, post layout, sidebar size and locations, etc.

But to do this is a bit tricky. You have to make sure the basic layout of your old template with the new one is the same. For example, if the old template has 3 columns (2 sidebars and 1 main), your new template has to be 3 columns too. The arrangement of columns will follow the old template; for example SMS or MSS or SSM. If the old and new templates don't have the same content layout, it won't work! If you're not sure about this, just use the first 2 methods above.

If you still want to change the CSS styling part only, read on below.

In the template, look for the code section in between the b:skin tags. In my templates, I've labeled the start and end of the CSS styling part. (In the code, the 'Page structure tweaks' code are actually part of the CSS styling too, but just leave it there.)

So, these are what you need to do to change the CSS part only:

1. Open the template file that you want and copy the CSS styling code only.
2. Got to your Layout > Template > Edit HTML page.
3. Don't click the Expand Widget Templates (EWT) button because you don't have to change the Blogger Data code.
   
4. Select the existing CSS styling codes in your Blogger editor and delete them. Then paste the codes for your new template.
5. It may ask you to delete some widgets - so just delete them. (Widgets are the extra page element added to the sidebars).
6. You're done! View your new blog.
7. If it doesn't work, you can always use the first 2 methods above and add the widgets later.

Fail to Upload Template?

This happened to me just now when I tried to upload my own template using Firefox browser. I got an error message from Blogger.

But it worked fine when I uploaded the template using Internet Explorer browser. So if you have the same problem on Firefox when uploading these templates, try using the Internet Explorer. I don't really know why, but as long as it worked, that's all that matters.