Subscribe

Get our E-Mail Newsletter:

Random posts

Download Microsoft Visual Studio 2008 and Expressi... Download free McAfee VirusScan Plus Special Edition Download Fedora Core 9 for free Download free easy to use accounting software from... Cut MP3 audio file online to make rigntone without... Vista look alike Linux Distribution Vixta.Org Load youtube quickly with firefox add-on Bitdefender free 6 months license key Learn about rss via video New del.icio.us Bookmarks Extension for Firefox

Blogs that are on Blogger, WordPress or TypePad can now add the wonderful outbrain star ratings widget to their blog posts.

This ratings widget has been under a closed beta for some time but they finally made a public release today.

It's light, requires no registration and very intuitive - visitors can hover the mouse over the five stars and click any of them to rate your current blog post.

Even if you have a regular website that's not a blog, this ratings widget can be installed on your site as well.

You need such a rating widget to get feedback from all those reader who are subscribed to your blog aren't contributing to the discussion because they are probably too lazy to write a comment.

Give them a system like this ratings widget that requires no effort and they'll be happy to say if enjoyed or disliked reading your blog post.

Get Ratings Widget here. Developer Blog is here. If you are using Windows Live Writer to insert ratings in your blog posts, make sure you remove the link breaks from javascript else this may not work.

Labels: Blog help

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.

Labels: Blog help

've noticed that some people who have been using my templates face some little bugs, mostly with alignment. When creating these templates, I have, at my best, tried to make sure that they're all bugs free and I have the tested version in the demo pages in IE and Firefox. So, carefully check the demo pages. But I surely can't control all the loose bugs flying off here and there in little places.

If I do find these bugs, I'll deal with them in two ways. First, I'll correct them by upgrading the template into a newer version and post it as a new template (with maybe some little changes on the template look that you can always change back easily later on). So, if you have these little problems, do check back in here to see the updated version or tell me about the problem in the comment section.

Second, I plan to make a short tutorial on how to go about designing and tweaking your Blogger template. I'll probably have them done in a couple of week or so, so do check on these to start fiddling with CSS your own way.

Some of the problems:

Most of them have their header section cut off that only a portion of the image shows up. If this is the case, most probably it's because you're using a template that has a Linkbar but you forgot to fill in the URLs. One other thing is probably you're using a template that requires you to put up your own header image, but you forgot to do so. In these cases, my advice is you have to read that template instructions carefully.

There are also some who have a problem with their footer background - it was cut short. Some of templates have the black-gray shade background in the footer. I was thinking that most footer is not very long vertically, so I made the background graphics to be relatively short. But I saw that some people using my templates have long footer that the background graphics is cut short and changes to the 'actual' background; mostly dark green. There are 2 solutions to these. If you know how to use the HTML code, point the background URL to a new background that lays out farther downward. The second solution is to make the 'actual' background blend with the black-gray shade; simply use the Fonts and Colors option in the Layout page to do this.

There are also some that have their sidebar text overlapping with the sidebar header. In my demo pages, I've made sure that this overlapping doesn't happen. But if they do happen in your case, I suggest you move the sidebar text further down from it's header (only it won't look the way it's suppose to look). I'll start putting up small tutorials on how to tweak your template, so check back in here to read these tutorials to tweak your template.

Labels: Blog help

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 here.

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.

Labels: Blog help

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.


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.

Labels: Blog help