This Is A Sample Of Sticky Post

The Problem is: to do this trick, we must use HTML code to make up the text... But don't worry, if you are not capable with HTML Codes, there are simple and fast way to make your sticky post without learn it. Use your "New Post" to make a sample of your sticky post, set the display as close as your real post, use the Preview to check your sticky post display then copy-paste into your content collumn text add gadget.

Learn how to make this sticky post in

List of Blogger bX-Error Codes

>> Monday, December 28, 2009

Below is the List of Blogger bX-error code, Thanks for Blogger Error Codes who makes the list

Publish Confirmation Exception
We're aware of this error which is generated during publish confirmation, and are working to resolve it quickly. Although you are seeing this error, your post/comment should still publish to your blog.


Post Page comment error
Blogger engineers are currently diagnosing and responding to the problem that’s causing this error.

Label limit exceeded
Blogger currently allows a maximum of 20 labels per post, and 2000 unique labels per blog. To get rid of this message, you will have to correct the appropriate label counts.

Comment Moderation Exception
Your blog is experiencing a known issue with comment moderation that the Blogger Team is currently investigating. You do not need to report this problem, and can get the latest updates on this bug on our Known Issues blog:

Invalid Layout Exception
Changes you may have made to the header/title widget (possibly for SEO) are conflicting with your template code. Removing these customizations should fix this error.

bX-3d9atb, bX-6vix0l, bX-afo7e2, bX-mws9sr
Invalid Layout Exception
You blog is experiencing a known error that we are currently investigating. For the latest updates on this bug, please see our Known Issues blog.

Thanks for your patience.

Invalid Post Template
There was an error parsing your post template. Please go to Settings > Formatting to fix the Post Template HTML.

Known Issue
The Blogger team is aware of this error and is investigating.

Widget Parsing Error
This blog is having problems due to internal errors rendering the blog gadgets
Blogger engineers are aware of the problem and are working on a solution.

Image uploading unavailable
Image uploading is currently unavailable due to PicasaWeb maintenance.

bX-f87uq5, bX-kka0xf, bX-pq8xgs, bX-seep61, bX-tsvpgj, bX-uwdr66, bX-woam4u
Blogs Displaying Error Codes
This blog is currently inaccessible.
Blogger engineers will be deploying a fix presently.
We apologize for this interruption in service.

bX-n3ff52, bX-volzpw
XML Generation Error
There was an error generating this blog's feed. Blogger engineers are aware of the issue and are working on it.

bX-ekwfjb, bX-ppqi9d
Gadget directory unavailable
We are experience some problems in our connection to the gadget directory. Gadgets will still show up on your blog but you will not be able to add or configure gadgets at this time.

bX-cf3xin, bX-xd3w84
No Blog Admin Found
There was an error rendering this feed because this blog does not have any admins.

Layouts Error
The Blog Lists widget is currently down. Blogger is aware of the problem and is looking into it.

bX-z8kqgm, bX-391dlh,
Missing Blog Creator
An error occurred rendering this feed. Blogger is aware of the problem and is looking into it.

BlogSpot Error
This blog is currently inaccessible.Blogger engineers will be deploying a fix presently.
We apologize for this interruption in service.

bX-acffys, bX-cldfi1, bX-cviw8s, bX-rh26vj
Error with America / Caracas time zone
Due to recent changes with the America / Caracas time zone, Blogger is unable to display your blog or change time zone settings. We are working on a fix.

Error Processing Your Request
Unfortunately, we are currently unable to perform this action, but we're investigating the problem and working on a fix. For further updates, please see Blogger Status.

Error uploading your photo
There was a temporary error uploading your photo. Please try again in a few minutes.

Photo Uploading Unavailable
Blogger photo uploading is currently down. Our engineers are working on the situation.

bX-ji78k6, bX-xu1zoq
 Invalid Template Code
Please ensure that all page elements (e.g. b:widget) are in between the tags of your template code.

bX-pohgdk, bX-xjlu2f
This blog has invalid template code
If this is your blog, please look through your template code (Template | Edit HTML tab) and search for any code referencing "post.url." This code must not exist outside of your post widget, so please remove any code referencing "post.url," unless it is in your post widget.

bX-btoxyn, bX-tkcah7

Unable to Delete Blog
We are working on resolving this issue. Updates will be posted in the Help group.

bX-5tdd1p, bX-6tj0s5, bX-6tnmaz, bX-7mplh0, bX-l28v5z, bX-ltlqzv, bX-n4mon3, bX-nsm4vm, bX-pvq71c, bX-qeihpe, bX-ujue70
Unable to upload image
We are aware of this problem and currently working on a fix.

Profile Image Error
One of the members of this blog has a problem with their profile image, which is preventing this page from being displayed properly. Please have each member check their profile to make sure their picture is displaying correctly. If it isn't, they can remove it or add a new one to solve this problem.

Unable to display blog
The original owner of this blog is no longer a member. To display this blog properly, please remove any tags beginning with <$BlogOwner...

Unable to Update Profile
We are aware of this issue and working on a fix.

Unable to display Navbar
Please try again

bX-2f00qm, bX-tlsikm
Profile Image Problem
There is a problem with your profile image that is preventing this page from being displayed. We are aware of the problem and working on a fix.

bX-677pki, bX-geqofh, bX-lsioy8, bX-napiw5, bX-qa45xg
There was a Temporary error.
Please wait a few minutes and see if your updates were successful. If not, please try again.

bX-lw8mpb, bX-prxtbp
Unable to edit poll
We are aware of this issue and currently working on a fix. In the meantime, as a workaround, you can remove the poll's code from your Template | Edit HTML tab, which will delete the problematic poll from your blog.

bX-5j5nhh, bX-x7mp8t
Unable to display this post page
This blog has disabled post page archiving, so this URL can no longer display. If this is your blog, please enable post page archiving on the Settings | Archiving tab (select "Yes" for the "Enable post pages?" option) to rectify this problem.

There was an error
Please try again later.

Error with "Japanese (Japan, JP)" Language Setting
Your blog cannot be displayed because of a language setting error. Please visit your blog's settings page and change the language from "Japanese (Japan, JP)" to "Japanese (Japan)."

Language Setting Error
We are currently unable to display this blog. If you are the blog owner, you can fix the error as follows:
1. Go to the Settings | Formatting tab for this blog.
2. Change the Language setting to a different language.
3. Click the "Save" button.
4. Change the Language setting back to your desired language.
5. Click the "Save" button again.

Video Processing Error
This blog cannot be displayed due to a video processing error. Please remove the

Post Editor Error
The post editor is trying to display too many posts. Please add "&numPosts=10" to the end of the URL where you encounter this error, to change the number of posts displayed by the blog's post editor.

bX-idlp73, bX-o0zoa0, bX-pgtif7, bX-r1buvw, bX-rthuiq
We are unable to save your template
We are aware of this issue (caused by outdated AdSense code) and are currently working on a fix. In the meantime, as a workaround, you can add the following line of code into each ad code snippet, directly after the google_ad_client label:
Thank you for your patience.

Comment Link Error
The comment link you have followed appears to be incorrect or outdated. This could be due to the blog in question being deleted or having incorrect template code for the comment links.

bX-mtwwdi, bX-rxaqrt
Unable to Upload Image
Please try again in a few minutes.

bX-37qik4, bX-7s15tm, bX-lzkkhl
Blogger Search is not Working
Blogger search is currently broken. Engineers have identified the problem and will be deploying a solution presently.
In the meantime, we suggest using Google Blog Search to find what you're looking for.

bX-2v7ys6, bX-xt3xtp
Login Validation Error
Your username and password are correct but Blogger had an internal error validating your login. Please try to login again.

Multiple Spam Blogs
This error occurs because you have more than one blog that has been marked by our automated spam-prevention system as potentially spam. We apologize if this is preventing you from accessing your blogs.

Photo uploading is temporarily not working
This should be fixed in half an hour. Please try again later.
Secret error for clever people
Move along. Nothing to see here.

Comment notification error
Your comment has been posted to this blog, but we were unable to send a notification email to the blog’s owner. We apologize for this error.

Could not upload Image.
Blogger is currently unable to upload your images to this blog. We are working on resolving this problem as soon as possible. Please see Blogger Status for more information and updates on this issue.
bX-1us3c3, bX-4qmsfw, bX-ftexlv, bX-kayz6v, bX-prdd9n
Cannot edit Domain Hosting Settings
Due to Blogger maintenance, custom domain hosting settings are currently not modifiable. Please try again in 1 hour.

Template Tag Error
Blogger engineers are currently looking into the source of this error and will fix it presently.

Blog Cannot be Displayed
The owner of this blog has deleted his/her account, and this blog is no longer available.

Missing URL Settings
Your blog does not have a homepage URL. Please go back, click "Settings," then "Publishing," and enter the correct address for your blog in the URL setting. Then come back and try posting again.

Error emailing post
Blogger is unable to email this post to the recipient, due to a problem with the BlogSend setting. Please check this setting under the Settings | Email tab and ensure that it contains a single, correctly formatted email address.

bX-9w7qz9, bX-blo1ut, bX-jp3d1, bX-la6m4o, bX-pn0dtw, bX-v2vqfh
This Profile cannot be displayed
If this is your profile, please log in and check your profile settings. If you have entered a username for an IM service, please ensure that you have also selected the specific IM service corresponding with the username.

bX-2o3sed, bX-45y3w1
Error completing action
There was a transient error in completing this action. Please try to click back or otherwise repeat what you were doing. It will likely work a second time.

Error loading user information
Blogger has experienced a transient error. Please wait a few seconds and then reload this page.

bbX-lgwej, bX-3r3ejc, bX-5d69vr, bX-85oi4e, bX-d7il0a, bX-gbdnj4, bX-irbo2k, bX-l96j2, bX-l9xjx9, bX-mzm63b, bX-obv7m3, bX-t0ou3g, bX-xetjcr, bX-yvq86z
Invalid Post template
Your post template contains invalid html. This typically means <script> tags. You can get rid of this error by either removing the post template alltogether or by editing it on Settings->Formatting->Post Template.

Error Saving editor preferences
We experienced a transient error saving your preferences. Please click the back button in your browser and try again. 

This error comes from uploading an image to
Please login through and update any bookmarks you have to change to

Test Error
This error code signifies a test error from a Blogger engineer.

How to Make The Navigation Menu Bar (Links) on Blogspot (I)

Not like WordPress which provides navigation facilities in the header of the blog, Blogspot does not have it. 
So if we want to have Navigation (Links) Page on the header Blogger/Blogspot then we must first create our own. This article will explain "How to Make The Navigation Bar (Links) Menu on Blogspot".

Navigation Bar is a link to the address we are going to (in the same pages, other pages within a site, or even in the pages of other sites). We provide this facility to our site / blog to accelerate or to shorten access to the link address (spesific phrase, articles, menu or anything that we think is important or interesting for our guests).

Because it is "a link", then we can create a simple Navigation Page with HTML. Script for links in HTML is:

<a href="Location_of_Document">Name of The Link</a>
 The following are some example for it :
<a href="">Home</a> | <a href="">About Me</a> | <a href="">Contact</a>
and the result will look as follows:
The Next step is put these link into the header bloger, or right under the header bloger.

1. Log in to Blogger .
2. On your Dashboard, select the Layout menu, and click the Page Element.
3. Click (one of) "Add a Gadget".
Note :If you want to add facilities "Ad a Gadget" on the Header and Blog Posts ... Please read How to Add The "Add a Gadget" on Header and Blog Posts of Blogger Page Elements 
4. From the "Add a Gadget window pop up", choose/click the HTML/JavaScript.
5. On the page "Configure HTML / JavaScript", enter The Links in HTML Script, such as the example below.

Then click Save, "Configure HTML/JavaScript" page will disappear and you will be brought back to the "Page Elements" page, with The "New" HTML/JavaScript Widget

Note : The position of the HTML / JavaScript widget can vary depending on the "Add a Gadget" that you choose. In the example above I use a "Header Add a Gadget".

 6. The next step is to set the laying of the Page Navigation (Links). 
If you want to put it in the header, then arrange for the following position.

The result will look like the following.

If you want to put the Navigation Page (Links) Right below the header then set as the following position.

And the result will look like this

Thats for "How to  Make The Navigation Bar Menu (Links) on Blogspot", in the next post we'll try to make the link look more attractive...

Solution For Blogger Post Comment (Window) Problem (doesn't fully show up)

>> Wednesday, December 16, 2009

There are few times I am having a hard time posting comments on a blog because The Post Comment Window doesn't fully show up, so I cannot continue typing the Word Verification code and/or click the Post Comment buttons

If you get a complaint from your blog visitor or face the same Blogger Post Comment Problem at your Blog, then You can fix it like these steps below :

1. Log in to Blogger .
2. On your Dashboard, select the Layout menu, than click the Edit HTML. Under the Edit Template you can see your Blog's HTML. Check The Expand Widget Templates
3. Scroll down Edit Template, find
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>  and 
4. Replace 'no' with 'yes' or 'auto' to enable auto scrolling and the comment form will automatically expand with or without a scroll bar.

That's it.. I hope works for You...!!!

How to Change Blogger Favicon Ico

>> Thursday, December 3, 2009

Favicon (short for "favourite icon") is a little icon that appear next to the web address at the top of the page. That little icon is an .ICO icon format. This also appears when we save the link in our browser and gives us a graphical way of looking at it. Some of the browsers support *.GIF and *.PNG formats, but .ICO format is the most common.
By default, blogs on Bloggers favicon is a white letter B in the box with an orange background. in order to personalize the blog, we should change the default blogger favicon.

How to Change Blogger Favicon Ico? 

The first thing we should do of course is to make icons. We could make an icon with the extension .gif or .png format, but as explained above, better if we make it with ico format. We also can make it in a variety of pixel sizes, 16x16 px, 24x24 px, or 32x32 px. I think a 16x16 icon is preferable since it is readable in most older browsers.
There are several ways to create an icon.  

  • We can download the icon from the Internet, there are many sites that provide an icon that we can download and use for free, just enter in the search box "free favicon" and you'll find so many sites that provide it, even animated gif format... which will slightly increase your web loading, for sure.  
  • You can also easily create icon from image files you have. you only need to upload it to the icon generator, then download the result (a file icon) and put it in a web host / storage. These sites are example of "icon generator on line". Genfavicon, Favicon Generator
  • We also can make directly with graphics programs such as Photoshop, Fireworks, or GIMP or if you felt difficulties in using it, you can create icons using any software that you can work with it (MS Paint or Word for example), and than you can capture your works by MWSnap3, (you can free download it). This is the easiest way to make an icon (make letters or pictures with whatever program that you can work with, and then capture it with the software capture / snapshoot), but of course less than perfect (but it's just tiny picture itsn't ??).
  • But if you want to create your own icons and have little time to learn. There is an icon maker program which I think is very good.. name IcoFX
  • besides having a variety of editing and effects tools, this software also has the ability to import an image and have a screen capture tools to. The most special part of this "wonderful icon maker software", is given for FREE,  yup.. we can download it from IcoFX - The Free Icon Maker.

After creating an icon for your website or blog, then the next step is to put it in the web storage / host. You can learn about it in "Using Google Groups and Google Sites as a web storage space", and how to use it in "Create a Rainbow-Colored Link"

The next step is to put the "URL" address of the icon file in the HTML of our Blogger Templates, please follow the steps below:

1. Log in to Blogger .
2. On your Dashboard, select the Layout menu, than click the Edit HTML. Under the Edit Template you can see your Blog's HTML.
3. Scroll down Edit Template, find <title><data:blog.pageTitle/></title> and put this script below right after it. 
For the .ICO format...

<link href='URL of your icon file' rel='shortcut icon' type='image/'/>
This will also work but the former is preferred:
<link href='URL of your icon file' rel='shortcut icon' type='image/x-icon'/>
For the .PNG format, the script is
<link href='URL of your icon file' rel='shortcut icon' type='image/png'/>
And For the .GIF format,
<link href='URL of your icon file' rel='shortcut icon' type='image/gif'/>
Please remember to replace URL of your icon file with your favicon url address. Save the template. and after you refresh your blog site, you should see your nice little Favicon next to the blog address.

How to Modify / Change The Blogger Header

>> Wednesday, November 25, 2009

Actually, Blogger has provided facilities to modify or change The Blogger Header.
Before we start it, if you only want to change the color of your blogger header you can see in how to change blogger header color. You can also learn how to make a header in how to create header easily and quickly.

After we have a background image or full header images (background image and the title on it), the next step is putt in on our blog.

1. Log in to Blogger .
2. On your Dashboard, select the Layout menu, and click the Page Element

3. Click edit link from the header widget,
Blogger will display "configure header" in the pop-up form

4. There are two options to insert images into the header,,  from your computer or from the web. After the Browse button is selected, it will show a dialog box "File Upload" 

please select the image header that we've made earlier, than click open.
5. Wait for a while until we see a thumbnail of our image header.

If you just upload pictures backgrond and continue to use its original title, then choose the placement of "Behind title and description", but if you upload a complete header with title, then choose the placement of "Instead of title and description ". With this arrangement, the image will be placed on the front so that it will covering the blog title.

How to Create Header easily and quickly with a free header maker software "Xheader"

>> Tuesday, November 24, 2009

In order to make interesting view or proffessional look of our blogger, we can change or replace the default header. If you just want to change the font or background color header, you can see how to do it in How to Change Blogger Header Color,
For those who unfamiliar or had difficulty in using graphics programs like Photoshop, Fireworks, or GIMP to created header, There is a  "header maker" software who can create a header with easily and quickly... It is Xheader ,
More than just it's very good ability, this software can be downloaded for free, complete with 500 examples of images in it. Xheader software can be downloaded at: * the official site or * : 32.6 Mb. After install it, we can get another free 500 header image.

Knowing  the size of Default Header
Before making a header, we better known first our blogger default header size.Log in to Blogger ,on your Dashboard, select the Layout menu, than click the Edit HTML.
Scroll down Edit Template and find  this script below,

#header-wrapper {
  margin:0 auto 10px;
  border:1px solid $bordercolor;
width:660px; are the default width of our header. so we should also make it by this measure. For the high we can set as our wishes, of course with proper consideration whether or not.

If you want to make a full header with a background template and the title, or only want to insert/use images into the header as a background (assume that you already have a tittle), you can start with "Load from Template Library". But if you want to create a header with your own background image, then you should start with "Create with Blank Header". "Load an XHF File" button used to continue editing your work that you have previously saved (Save with XHF extension). We can also use our own background image by click Load an image graphics from disc to Xheader.

1. Load from Template Library.

Xheader provide more than 500 hundreds of free header image ready templates to choose from. To create a header / background from a template image. From the Main menu, just click "Load from Template  Library".

Select the design You want to use with Your mouse and then click again to load it into Xheader or click the OK button.
a. If you only want to insert/use images into the header as a background (assume that you already have a tittle), from Xheader window, select Option and then Resize Header

Enter the size as we want (Look at Knowing  the size of Default Header) than click OK..Last, do not forget to save your file, if you are confident with your work then you can save it with "Save JPG", but if you still want to edit it again than save with "Save XHF".
b. If you want to make full header, complete with title, in Xheader window you can start make a text title and set it up, add object lines, square box and/or circle and give effect to it, add another images from your computer if you want to, and adjust the placement. For more details of each step you can see below.

2. Create a Blank Header.

a. Set the header image size,
Enter the size as we want to than click OK,

We also can adjust the size of the header image via the Options menu -> Resize Header. (Look at Knowing  the size of Default Header above)  
b. Entering the text.

We can start entering the text, set the color option (if you have difficulty in choosing colors, use the iconico software)  , choose the  text option, add the outline effects, Chisel, emboss, and glow. and set the transparancy. Or choose no effect and set the shadow option. Note : select the text you want to edit first before editing

c. Create lines, boxes, and the circle
We can add lines, boxes, and circles into header with the tool as shown in the picture below. We can also give effect to these objects!

d. Insert an image from your computer 
We can insert an image from our computer (hard drive, flash, etc..) By using the Image tool.

e. Adjust the placement of objects 
A sequence of pictures, fields, or writings can be placed above or below the others. You can select the object with the Select tool (far left) and arrange the order of object placement through the tool To Front or To Back.

 f. Adjust the transparency and shadow effects
we can adjust transparency and shadow effects on the object (text or images) of our header, as seen in this picture. Just select the object before set it up.

g. Preview and save the image
Before you save the image header, you can try to see the look of your header image in the browser, open the Options menu -> Preview in Browser. After all okay, save your images via the menu File -> Save JPG. Or File -> Save XHF. JPG files ready to be uploaded to your blog, while the files can be edited re XHF if you want. Good luck!

Create a Rainbow-Colored Link

>> Saturday, November 21, 2009

This article as well as a simple example of the use of files stored in my Google site (you can see how to Using Google Groups and Google Sites as Web Storage Space ... in the previous article).

In this example, I already upload a "rainbow javascript" file in my Google site. "" (I know the URL site from my Browsers Addres Bar), because I had uploaded rainbow.js inside Blog for Us File page, So my rainbow.js file link is  

Actually to Create a Rainbow-Colored Link (like in this blog), I just put a Javascript code right after tag

1. Log in to Blogger .
2. On your Dashboard, select the Layout menu, than click the Edit HTML. Under the Edit Template you can see your Blog's HTML.
3. Scroll down Edit Template and find  <head> put this script below right after it

<script src=''></script>
And Save Template.
4. The URL, is the link address where I put the Javascript file that serves to rainbow-colored link. If You want to, You can download this Javascript file, upload it in Your web host and replace the link address above with Yours..

Using Google Groups and Google Sites as web storage space

One of very important factor in managing our blog is to have (at least) a web host that we will use to store the archive files (pictures, music, programs, data etc.) which will be uploaded to our blog. Using a paid web host to store the archive from a free blog like our blogger / blogspot it's sounds really absurd. Fortunately, there are so many sites offering free hosting for storing our files, but looking for the best among them is another matter..
Beside Picasa Web where we can store our photos, pictures, and images, There are 2 very useful free web hosts which we can consider (according to the webmaster) to use it. Google Groups and Google Pages Creator Unfortunately when I visited Google Pages Creator  Admin says that  

"Google Page Creator is no longer accepting new sign-ups.  If you would still like to create your own free website, please use Google Sites."
So, I ended up using Google Sites instead of Google Pages Creator, and I am quite satisfied with it.

Actually Google Groups is a service from Google that supports discussion groups, including many Usenet newsgroups, based on common interests. But we will use it as a web storage space, to store our files.

1. Creating a Google group is easy. Just visit Google Groups, than Click the “Create a group” button.
2. After Sign in with your Google Account (or Sign up New Account), enter your Google Group's Nickname, and click Continue
3. You will be brought to a screen which requires to enter your Group's name, and description.
4. After verification, because we only want to use Google Groups as a web storage, then we skip "invite members" by choose "skip this step"
5. Done... Now we have a new Google Group.

To upload files, click the “Files” link on the right panel.
And we can begin uploading files by clicking "+ Upload file"
Google Sites

1. Visit Google sites than Click the “Create site” button.
2. To use Google Site as a web storage, choose a Blank  template, then Name your site, type the code shown and click "Create site".
3. We've now created a new Google Site.  Next step is create a page and use it as a "File cabinet" ... Click + Create page link on the right panel.
4. Select File Cabinet, Name The Page, then click "Create page"
5. To upload files, Just click + Add file 
And We can choose add a file from computer or web.
6. That's all..

You can see how to use it on Create a Rainbow-Colored Link..

Solution for (Lenovo) Shutdown Problem

>> Tuesday, November 17, 2009

A few weeks ago I had a problem with my laptop. After the downgrade OS from Vista to Xp and install some programs, my laptop (Lenovo) have this problem. Every time i turn off the laptop, it hangs on message - 'Windows is shutting down'. Sometimes, it shuts down without any hang but at the end of shut down, a hard 'tic' sound comes up and then it shuts down, but more often hang and must be turned off with pressing the power button.
I have found this answer but it didn't solve the problem..

"Shutdown problems in Windows XP can be caused by many factors, These included: a damaged exit sound file; incorrectly configured, damaged, or incompatible hardware; conflicting programs, or an incompatible, damaged, or conflicting device driver...."
I need real action...  and finally I discovered the following ways.
Unchecked the option in USB RootHub under the power management tab. ( You can locate the USB RootHub in device manager )
1. Click Start, Control panel and System.

2. Under the System Properties window, Select Hardware then click Device Manager

3. Click USB Root Hub, select Power Management and Uncheck "Allow the computer to turn off the device to save power."

4. I do it in all my USB Root Hub (7).

How to Cange Blogger Header Color

>> Thursday, November 12, 2009

Before we start to change blogger header color, first we must determine what color we would like to have, and then "translate" it into HTML code. ie: #000000 for BLACK and #FF0000 for RED.
I have found a Great Tool for this, Small, Smart, and Usefull Software by Iconico.

I highly recommend you to download it, and spend a little bit of your time to learn it, because we will often to use it later, sure if you haven't one yet. I am still amazed that this wonderfull software provided by Iconico is free. Yup... you can download it Legally Free at :

Method 1
Actually, bloggers have been providing facilities to change the color of the page template, which is in the Fonts and Colors facility, under the Layout menu in our dashboard. This facility is not only set color and font in the header, but also the entire page.

After you decided what the color and know what the HTML code is (for example #FF0000), then go to your Dashboard, click Layout, then Fonts and Colors.
Scroll the window and find "Page Header Background Color", click on it, and choose your color from the righ side, if the color of your choice is not there, then you can insert the HTML code into "edit color hex code"and click enter ..

Unfortunately, this setting is not the same rules for all templates, for example If you are using minima template, than you will not find Page Header Background Color setting. and it also occurs in other template items.
If you don't find Page Header Background Color setting in Fonts and Colors, than you can do it with method 2 below.

Method 2
Go to your Dashboard, click Layout, Edit HTML. In Edit Template, Scroll the window and find this:
#header-wrapper {
  margin:0 auto 10px;
  border:1px solid $bordercolor;
put this script;  right after it... (In a different templates, instead of #header-wrapper, you may see #header-wrap or #header or #head.) 

background:#FF0000; .
Here is the final
#header-wrapper {
  margin:0 auto 10px;
  border:1px solid $bordercolor;
Save Template and view your blog..
This is before

You can set the Title and Description color to match your Header Color fits. Just go back to the “Fonts and Colors” tab, and change them

Understanding the Name. Location and Setting of Page Elements in Our Bloggers Template HTML

After learning how to optimize Page Element by adding the Add a Gadget facility, than I have another questions arise:
- How to edit the header?, Post images? or create a link in it?
- How to edit the sidebar?, move it?, put the background or just color it? or could we make it two sidebar?
- Also wanted to know how to paint and install the background, Is it possible that we insert "something" in the middle of Blog Posts?
- How did the Footer, can I edit it to?
 I don't know..., but I am trying to find answer ... And with my foolish thinking, I finally realized that the first step is to know its name, its location and the ways to regulate it.

This is what I've got :
As usual we must start it with Log in to Blogger, Click Layout, click Edit HTML and take browse the Edit Template HTML

Yup..  As we discussed before, Blogger setting Header from these lines code, below...

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Blogger Test Result (Header)' type='Header'/>
And Script CSS below:
/* Header

#header-wrapper {
  margin:0 auto 10px;
  border:1px solid $bordercolor;

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  font: $pagetitlefont;

#header a {

#header a:hover {

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
Blogger setting Sidebar from these lines code, below...

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
And this
#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  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 */
 And script css below:
/* Sidebar Content
----------------------------------------------- */
.sidebar {
  color: $sidebartextcolor;
  line-height: 1.5em;

.sidebar ul {
  margin:0 0 0;
  padding:0 0 0;
.sidebar li {

.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;

.main .Blog {
  border-bottom-width: 0;

Blog Post
Blogger setting Blog Posts from these lines code, below...
<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
And This..
#main-wrapper {
  width: 410px;
  float: $startSide;
  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 */

Blogger setting Footer from these lines code, below...
<div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
/* Footer
----------------------------------------------- */
#footer {
  margin:0 auto;
  line-height: 1.6em;
  text-align: center;
Well... that was what I founded, Please Correctly if I wrong...

After this, I'll show you my experience when I try to modified the header blogger....

Add The "Add a Gadget" on Header and Blog Posts of Blogger Page Elements

>> Wednesday, November 11, 2009

As well as another Content Management System (CMS) base sites (ie : Wordpress, Joomla, Mambo, Drupal etc) Blogger Template consist of Page Elements (header, main, sidebar and footer) and Each element of this page, usually also composed of a few gadgets (the name may be different on each CMS).
Pege Elements are very important. In addition to its function, Elements (Widget) of the page and Gadgets, also affect to the overall look of the pages of our blog.
One of the advantages of a CMS base sites is the Flexibility, In these CMS sites, we could cange the Elements, add or less the Gadgets and also set the appereance (display) of the Page..

When we first create a Blog in Blogger, the Default Templates consisting of 4 page elements: Header, Blog Posts, Sidebar (which consists of About Me, Blog Archive and the Follower), and a Blank Page Elements at the bottom of blog pages (usually filled with Footer). From the above picture seen that the Header and Blog Posts does not have the facility to add gadgets. To optimize the blog and to be able to add various functions (gadgets) in it, then the Header and Blog Posts must be change.

Let's do it by following this steps:

1 . As usually Log in to Blogger
2. On your Dashboard, select the Layout menu, than click the Edit HTML. Under the Edit Template you can see your Blog's HTML. (please Back up first...!)
3. To have an “Add a Gadget” option, under “Header”, Check the "Expand Widgets Templates" then Scroll down and towards the bottom, you will see these lines (use Ctrl+F to find):
<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogger Test Result (Header)' type='Header'>
<b:includable id='main'>
 Change with this :
<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Blogger Test Result (Header)' type='Header'>
<b:includable id='main'>
This will give you 1 more Page Element in your Header. You can add it more by change the number of maxwidgets="..."

4. To add "Add a Gadget" on the Blog Posts, find these lines
<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
Than change with this:
 <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
 Once You have done, don't forget to Save Template... And You will have :

Finnaly we have a "New" Blogger Page Element ready to optimized...

Simple isn't it...?


  © New Blogger Tips For Us Free Blogger Template by Mc 2010.

Back to TOP