New Blogger Tips For Us

Free Pop-Up Scripts - Pop-up Script To Open A Window When Your Page Loads I

2010-09-04T00:32:00.000-07:00

It's been a long time since I wrote my last post... So here I post some Pop-Up Script.

In this First Script I'll give some example that You can use it in Your Blog...

Pop-up Script To Open A Window When Your Page Loads

Just put the following script between Your <HEAD> and </HEAD> tag

<script language="javascript">

</script>

Then add the following code into your <BODY> tag:

onLoad="popup('URL/to/popup.html')"

Your<BODY> tag should then look something like this:

<BODY bgcolor="#ffffff" text="#000000"
onLoad="popup('http://doit2us.blogspot.com/popup.html')">

Note: In this and all script examples that follow, change the attributes "toolbar", "statusbar", etc., to on (1) or off (0) as you prefer (or omit them), and set the width and height to the size you require.

That's all.. Happy Pop-Up...

The Simplest And The Smartest Blogger Related Posts

2010-05-24T22:13:00.000-07:00

We have been discussed about How To Make A Blogger Related Post before, by written a JavaScript and CSS directly into our HTML Template.

Although this methode is more safer because we could see the naked ("true") JS and avoid the malicious script, to some people especially for newbie, it could be complicated to implemented this method.

If you are searching "The Simplest And The Smartest Blogger Related Posts" and did not bother with external JS.. (Before make this posting, I already checked that this code was "clean", even I used it too for this blog). Than I think this Blogger Related Post Tips will fit with you. I have found this code in more tech tips

To display related links at the end of every post. copy this code into a new HTML/Javascript widget and place at the bottom of the post or at the footer in the page elements section.
Widget uses jQuery v1.3.2, If you already included jQuery into your blog. no need to do it again.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'containerSelector':'div.post-body'
,'loadingText':'loading...'
});</script>

And this what will we look after save...

Auto Hide/Show (Toggle) Blogger Navigation Bar

2010-05-23T22:57:00.000-07:00

Instead of Removed the Blogger NavBar as I mention before (Removed Blogger NvBar), A lot of better if we make it "toggle". We can set the display of the Blogger NavBar to disappear when our mouse pointer not in the Blogger NavBar position (top of our page),

To enable the Blogger NavBar Toggle function in your blog, you can follow these...

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. If you already do "Blogger Tip Trick No.4.: Removed The Blogger NavBar", Then you must..! delete your code..

4. Then replace it / insert with this code..

/* Blogger Navigation Bar */
#navbar-iframe {
opacity:0.0;
height: 10px;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;height: 30px;
filter:alpha(Opacity=100, FinishedOpacity=100)
border: 2px;}

If you never change your Blogger NavBar before, Just insert the code. You can Look at Blogger Tip Trick No.4. to see where you must put the code. (or see #5)

5. The final position is shown as below..

5. Finish...

How To Removed The Blogger Navigation Bar

2010-05-22T08:54:00.000-07:00

If you bother with the view of your Blogger NavBar (top of your blogger page), then you can get rid of it with the following ways:

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. Insert this CSS definition as shown as below...

4.We can easily show it again by removing the CSS definition

How To Make A Recent Post With Feed Widget In Blogger

2010-05-09T21:56:00.000-07:00

I nstead of Making A Recent Comment as we've discussed before, We can also make A Recent Post with Feed Widget.

First we must ensure that our Comment Feeds are enabled cause we will use the Feed Widget

To do that, Go to your Dashboard >> click Settings of your Blog >> click Site Feed. Then set the “Blog Comment Feed” and “Per-Post Comment Feeds” to either “Short” or “Full”. Please do not choose “None”. Save the Settings.

Next Go back to Layout >> Page Elements >> Add a Gadget in your sidebar, select “Feed”. You will be prompted to enter a Feed URL.

Insert RSS Feed as Blog Posts as follows :

http://doit2us.blogspot.com/feeds/posts/default?alt=rss

Please replace http://doit2us.blogspot.com with yours. After finished click Continue

Next, We can set "how to display" our recent comment. We can named our Recent Comments by insert the Title column, Setting how much last comment we want to show up (5 by default). We can also choose to displayed the dates and name of the authors or not, and open links in new window.
After finished with the setting, click to Save the Changes.

We still can set the position of your recent comments by drag and drop the widget to the relevant part of our template and then Save the Template.

How to Create Meta Tag on Blogger (Blogspot)

2010-05-04T09:33:00.000-07:00

Meta Tag Definition

A meta tag is a tag (a coding statement) in the Hypertext Markup Language (HTML) that describes some aspect of the contents of a Web page. Unlike normal HTML tags, meta tags do not affect how the page is displayed. Instead, they provide information such as who created the page, how often it is updated, what the page is about, and which keywords represent the page's content.

Meta Tag Function

The information that we provide in a meta tag is used by search engines to index our web page, most often to help search engines categorize them correctly, so that if someone searching for the kind of information as in our web page, they will be able to find it easily.

There are several kinds of meta tags, but the most important for search engine indexing are the keywords meta tag and the description meta tag. The keywords meta tag lists the words or phrases that best describe the contents of the page. The description meta tag includes a brief one- or two-sentence description of the page. Both the keywords and the description are used by search engines in adding a page to their index. Some search engines also use the description to show the searcher a summary of the page's contents.
Meta tag (element) used in search engine optimization, where different methods are explored to provide a user's site with a higher ranking on search engines. In the mid to late 1990s, search engines were reliant on meta data to correctly classify a Web page and webmasters quickly learned the commercial significance of having the right meta element, as it frequently led to a high ranking in the search engines — and thus, high traffic to the website.

Meta elements have significantly less effect on search engine results pages today than they did in the 1990s and their utility has decreased dramatically as search engine robots have become more sophisticated. This is due in part to the nearly infinite re-occurrence (keyword stuffing) of meta elements and/or to attempts by unscrupulous website placement consultants to manipulate (spamdexing) or otherwise circumvent search engine ranking algorithms.

Although meta tag have significantly less effect on search engine results pages today, and most search engines also use the contents of a page as a way to determine how to index it, the creator of a Web page should be sure to include meta tags with appropriate keywords and description. Well-written meta tags still can help make the page rank higher in search results.

How To Do It?

The meta tag is placed near the top of the HTML in a Web page as part of the heading. All the information that we want to be conveyed on our web page, can be enter between the tags <head>...</head>

The meta tags writing format is:

<meta name="name" content="content"/>

or <meta content='content' name='name'/>

Note: we can use " as well as '

As we have mentioned before, although there are several kinds of meta tags (you can "search" to have more information about the kind of meta tags), but the most important for search engine indexing are the keywords meta tag and the description meta tag.

To be more easily understood, the following is an example of meta tags which are applied in this blog.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

    <head>

<meta content='New Blogger Tips For Us' name='Author'/>
<meta content='blog tips, tricks, help for all new bloggers on Web templates, Blog templates, designs, widgets, layout, JavaScript, HTML codes, SEO, Google AdSense, gadgets, diagnostic tools, and how to monetize Blogger or Blogspot blogs, learning by doing' name='description'/>
<meta content='blogspot, blog, tips, tricks, blogger tips and tricks, template, widget, layout, HTML codes, javascript, seo, SEO, google adsense, gadget, monetize, blogger' name='keywords'/>

    <b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.pageType == "index"'>
    <title><data:blog.pageTitle/></title>
    <b:else/>
    <title><data:blog.pageName/> | <data:blog.pageTitle/></title>
    </bhttp://www.blogger.com/post-edit.g?blogID=8693675884300473333&postID=3139178726186289880:if>
    <b:skin><![CDATA[/*

If you want to do this trick.. then Go to Your Dashboard >> Layout >> Edit HTML >> and add your meta tag code, just change the Red words with Your content tag. You can also add another meta (eg. 'generator').
If your home page consists of several languages, you can also define a language that you use the attribute "lang". For example, if the contents of your web documents written in French, you can use the attribute "lang" as follows:

<meta content='Your Content' name='Your Name' lang='fr'/>

Well.. that it's.. Happy SEO...!

JavaScript - Small Tips II (How To Make An Alert Message Pop Up Box)

2010-04-30T17:54:00.000-07:00

Before we go any further to discuss this JavaScript - Small Tips II, I must remain you as in JavaScript I, that at least there are 2 think we must be consider to use the JavaScript apps , because to many JavaScript in your template will slowing down your web page to load. Besides that, for security reason, many user set their browser to disable JavaScripts. To resolve these problem, we must be wise to choose which the JavaScript that will be install into our template (choose the appropriate and useful JS apps) and use the "warning message" that we using JavaScript .

How To Make An Alert Message With JavaScript.

The functions of an alert message is to provide announcements, information or warning to the guests before they go to see or read the entire contents of our site.
There are a few display an alert message that we can create, an alert message box which only has a button 'OK', "OK" button and "cancel" to divert to other sites, and an alert message box with a dialog box.

Note: This tricks maybe annoying to some people, because this pop up box will STOP our browsing activity, we will not be able to do anything until we execute this pop up box (click OK or X).

An Alert Message Box With 'OK" Button.

We usually seen this message on "adult" or "serious" sites, the messages give warning to their visitor about the content of the sites and their restriction or limitation.
To create an alert message box, login to your account, go to Template -> Page Elements -> Add a Page Element in your left sidebar or post body area, and select HTML/JavaScript. And paste this code shown below.

<script type="text/javascript">
alert('You are about to enter our "serious" site. This site contains violence and sadistic material, persons under 18 years old are prohibited ... Beware!')
</script>
<noscript>Enable javascript in your browser to view an important message.</noscript>

Just change the Red words with your message..!, this words will be displayed as a pop up alert box when the visitors view your site / blog. The Purple words will show up when our guests disable their Javascript on their browser.
Look at this example below..

I put this "alert message" page element right under my header. This alert message box just for an information cause both choices, click "OK" button or click "X" will bring our visitor directly into our site (continuing to open our site).

An Alert Message Box With Confirmation ( "OK" and "Cancel" ) Button.

For any reasons, sometimes we need to give our guests a choice not to continuing or cancel to visiting our website / blog. If our guests prefer to cancel, then they will be redirect into another URL address.
So if we want to do this trick, go to Template -> Page Elements -> Add a Page Element in your left sidebar or post body area or even below your header, and select HTML/JavaScript and Paste this code below.

<script type="text/javascript">
confirm('This site contains sadistic materials. Are you sure you want to continue?');
if (confirm('This site contains sadistic materials. Are you sure you want to continue?')) {
window.location = "http://doit2us.blogspot.com/";
}
else {
window.location = "http://www.google.com/";
}
</script>

Change the Red words with your message..!, the Blue URL is the URL destination address when our guests click the "OK" button, and the Purple URL is the URL destination address when our guests click the "cancel" button or click "X".

An Alert Message Box With Dialog Form

Besides give a warning or information to our guest, with this simple Javascript trick below, we can build a warning or information message + dialog form. In this example below, This trick is to give a warning to our guest, knowing the name, and give a welcome message. It,s a rather weird isn't it, but this just a sample, you can created better than this, I just want to share an Idea...

First Script

<script type="text/javascript">
alert('You are about to enter our "serious" site. This site contains violence and sadistic material, persons under 18 years old are prohibited ... Beware!')

var yourName = prompt("Please, write your name first...!", "Reader");
</script>

<noscript>Enable javascript in your browser to view an important message.</noscript>
<script type="text/javascript"></script>

The way what we done it, is the same with both How To Make An Alert Message With JavaScript. above, I put the FirstScript page element below my header. Because this is a dialog box, of course we must have a follow up, to continuing the action, So I put a second script in top of my post body as my welcome message.

Second Script

Thank you <script type="text/javascript">document.write(yourName)</script>! Feel free to look around. If you like what you read, please mention us in your post or link to this site. Enjoy your visit <script type="text/javascript">document.write(yourName)</script>

So this is what we got with those trick.
When first opened our site or blog, there will be a pop up box warning message just like the first trick,

after click "OK" or "X" button, there will be shown another pop up dialog box like this,

If the Guest write their name into the dialog box (eg. Mc4tur) and click "OK", then they will be brought to continuing opened our site with a welcome message in the place where we put the second script page element.

Well that's all, you can combined those tricks or make a modification (eg. put into the post). but please remember choose wisely because of the disadvantage of the JS tricks.

How To Change The Blogger Blog Post Footer

2010-04-23T23:46:00.000-07:00

B efore we continuing discuss about How To Customize The Blogger Blog Post Footer, Let,s look at this picture bellow for the description...

1. Change The "AUTHOR" Text
Actually, this AUTHOR'S name is the name that shown on our blogger profile. To change this name then followed this steps.
Log in to Blogger, in Your Dashboard select your blog (if you have more then one) >> Layout >> Edit HTML and click Expand Widget Templates box. Then find this words data:post.author

<div class='post-footer'>

      <div class='post-footer-line post-footer-line-1'>
       <span class='post-author'>
          <b:if cond='data:top.showAuthor'>
            <data:top.authorLabel/> <data:post.author/>
          </b:if>
        </span>
       <span class='post-timestamp'>
          <b:if cond='data:top.showTimestamp'>
            <data:top.timestampLabel/>
          <b:if cond='data:post.url'>
            <a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
          </b:if>

A. To change your author's name, just replace the <data:post.author/> with whatever name you like.. This is mine when I change Mc4tur (before) with Admin.

Note: We can "decorate" our name with HTML code, I make it bold by adding Tex

B. To change the POSTED BY phrase, replace the <data:top.authorLabel/> with yours. This is mine when I change it into WRITTEN BY

Note: We can decorate this with HTML Code too..

2. Change The "AUTHOR" Text With An Image
Because this tricks are about "knowing the posistion" of the AUTHOR, and we also know that we can "decorate" it with HTML Code. Instead of Text, we can replace it with our Image, or even combined them.

To do this tricks, of course we must have an Image (small signature will be better) first. Let's just say that we already have the image that we store in a host sever. Please remember the URL of your image.

Note: You can learn how to have free web storage in Using Google Groups and Google Sites as A Web Storage Space and how to use it in Create a Rainbow Colored Link

A. To change the Author text with your Image and blog link, just replace <data:top.authorLabel/> <data:post.author/> with this script..

<a href="Your Blog URL"><img src="Your Image URL" /></a>

If you don't want to insert your blog link, then just deleted it and only insert <img src="Your Image URL" /></a> Then the final script will be like this:

<div class='post-footer'>

      <div class='post-footer-line post-footer-line-1'>
       <span class='post-author'>
          <b:if cond='data:top.showAuthor'>
            <a href="Your Blog URL"><img src="Your Image    URL" /></a>
          </b:if>
        </span>
       <span class='post-timestamp'>
          <b:if cond='data:top.showTimestamp'>
            <data:top.timestampLabel/>
          <b:if cond='data:post.url'>
            <a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
          </b:if>

B. To combined with the text, choose which one will be replaced by the image. <data:top.authorLabel/> or <data:post.author/> . Usually we replace our name with Image. We can also combine with Text Replace (1B.) either, to make WRITTEN BY "IMAGE NAME".

How To Make A Scroolbar Within Blog Post

2010-04-19T23:20:00.000-07:00

This trick is rather similar with How To Make A Spoiler In Second on purposed and the final display, Each technique have their "positive and negative" factor. I don't want to discuss the "more and less" of each trick, is up to you to decided which one that will fit to your purpose. Scrollbars will be very useful to minimized the text area and allowing readers to view the full contents by clicking the bar. We usually saw this technique implemented for Terms of Service, User Agreements, Rules, or Privacy Policy.

To make a scrollbar within the blog post, first we must define a class (write into HTML Template), this action is giving the "name" to this class and setting the display when it show, and then to applied within the blog post, we must "call" the class (by writing the class in our blog post).

Log in to Blogger >> In your Dashboard choose your Lay out blog >> Edit HTML >> and Find /* Sidebar Content */ and put this script to define a class below it:

.scrollingpostbar {
height:350px;
width:450px;
border:0;
overflow:auto;
}

You can rename .scrollingpostbar as you like, as long as you remember the "name", set the height and weight and border by adjust 350, 450 and 0 to make it fit with your post.

After finished, then we can type the text, although the tittle is How To Make A Scroolbar Within Blog Post, actually we can use this scrollbar mode in the page element in our template, exactly the same as How To Make A Spoiler In Second .

To show up in our blog post, after we have typed the TEXTARTICLE in the Post Editor, then click “Edit HTML” and paste these tags, exactly as this position:

<div class="scrollingpostbar">TEXTARTICLE</div>

I wrote this article again and applied this trick to show up how is the final display for example:

.scrollingpostbar {
height:350px;
width:450px;
border:0;
overflow:auto;
}

<div class="scrollingpostbar">TEXTARTICLE</div>

To make a scrollbar in page element. Our Text or HTML/Javascript Code can be inserted directly into the template via Layout -> Page Elements -> Add a Gadget >> Text or HTML/JavaScript. Similarly, if we have typed it in the rich editor mode, we can click the “Edit HTML” link at the top right corner and insert the above tags.

After publishing the post or saving the page element, you will be able to see the text or HTML/JavaScript gadget within a box and the scrollbars automatically inserted.
Note : this trick only works on Text or HTML/JavaScript gadget.

How To Make A Scrollbar In Your Blogger Widgets III : Each Widget Scrollbar

2010-04-16T22:19:00.000-07:00

T his article is the end of my "trilogy" How To Make A Scrollbar In Your Blogger Widget I, II, and III.

As I mention in HTMS II The best result of the "scrollbar mode" is when applied to each widget, because we can full-controlled which of our widget that we want to make it in "scrollbar mode" and which one is not.. This method is a bit complicated but give us the best results.

The technique of "how to make it scrollbar mode" is the same as HTMS I and II. But the secret of this method is "to find the name of each of our widget".

The following are some examples of the widget "name":

Adsense
Blog
BlogArchive
Followers
Header
HTML
Label
Linklist
Text

Those "name" represents the widget, so in the application, we can estimate the widget (location) by their name. Actually those "name" are following by the number as an complete "Id" eg. Adsense1, HTML4. If we only have one widget in our template than the following number is 1 eg. Adsense1, if we add a second same widget eg. we put another adsense into our template than the widget name will be Adsense2 and so on. Note : Blog means the blog post.

If you not sure with which one is? Take it easy, just try it and preview it, if you find it wrong than you can delete the script and try the other, you just make sure to remember what you have done before to corrected it later.

To be more easily understood, I will use my HTML Template for the explaination.

I want to make my "BLOGGER TIPS ARCHIVE" in "scrollbar mode" From the "name" this widget must be the BlogArchive, because I don't have another archive widget, I can assure that the widget Name/Id in my template is BlogArchive1. So I Go to my Dashboard >> Layout >> Edit HTML.
To make it sure that I maybe forgot have been installed another blog archive and or have "wrong script blog archive"then I try to find BlogArchive (I use Ctrl+F in my FF Browser).
After sure that I've only got BlogArchive1. Next... I find /* Sidebar Content */ (in some case, may be you'll found like mine, with ----- ) and add the script right after it:

/* Sidebar Content */
#BlogArchive1{
height:200px;
overflow:auto;
}

This is before:

And this is after:

How To Overcome The Third-Party Display Rules Widget.

As we've discussed in HTMS I, when installing third-party widgets eg Google Adsense, we are forbidden to cut display or display them truncated.
By knowing the name of our widget, then we can set the height and weight for each of our widget. We can also set the scrollbar to all of our widget (like HTMS I) or by sidebar (like HTMS II) and make exceptions to certain widget.
For example, if our AdSense unit is a 160x600 Vertical Wide Banner, then we must set the height of the widget as 600px. Because the contents fit nicely into this size, then the scrollbars should not appear. So it will not break the Third Paty rules.

/* Sidebar Content */
#AdSense1{
height:600px;
}

That's All.. You have another trick about scrollbar ? Please share with us..

How To Make A Scrollbar In Your Blogger Widgets II

2010-04-14T08:56:00.000-07:00

In How To Make A Scrollbar I, we have discussed about making the scrollbar on the whole widget (Sidebar), unfortunately this situation will be a problem if we install a third-party widgets that forbids us to change / cut their display widget (eg Google Adsense).

To overcome that problem we need advanced trick.

One Sidebar "Scrollbar Mode"

If your template has been modified to have 2 sidebar (like this blog), then we only need to put the third-party widgets on the first sidebar along with other widgets to apply non "scrollbar mode" sidebar, and to place the other widgets on the second sidebar to be made "scrollbar mode". In the other words, we classify the widgets into 2 groups and put into the separate sidebar, non "scrollbar mode" sidebar and "scrollbar mode" sidebar.
This method is the same as we do in How To Make A Scrollbar I, but we have to insert the script below one of the "sidebar-id's" that we will create a "scrollbar mode" sidebar.

The most important is you must know and find your "modification (add) sidebar name", cause this is the key of this method, so you can put the script below it. Let us use my blog as a sample, I make 3 modification sidebar, named #sidebar-wrapper, #second-sidebar1-wrapper, and #second-sidebar2-wrapper (please look at the position..!).

So, depend of my choice to make a scrollbar mode on one of my sidebar, than The script that can be inserted into my template will be like this (Go to your Dashboard >> Layout >> Edit HTML and find /* Sidebar Content */ in some case, may be you'll found like mine, with ----- and add this script right after it) :

/* Sidebar Content */
#sidebar-wrapper{
height:200px;
overflow:auto;
}

The display will be like this:

Or this,

/* Sidebar Content */
#second-sidebar1-wrapper{
height:200px;
overflow:auto;
}

Or this,

/* Sidebar Content */
#second-sidebar2-wrapper{
height:200px;
overflow:auto;
}

Unfortunately, all of your widget in your "scrollbar mode" sidebar become only "one scrollbar".

Actually, the best result of the "scrollbar mode" is when applied to each widget, this method is a bit complicated but give us the best results.
We will discuss it in the next post...

How To Make A Scrollbar In Your Blogger Widgets I : In Second

2010-04-07T23:00:00.000-07:00

There are several ways to customize the look of widgets that are too long in our blog pages. Two of them have been discussed in How To Make A Dropdown List I and II.

If in How To Make A Dropdown List I and II. we abbreviate the display of labels and other widgets with a dropdown list, then in this article we will discuss how to adjust our widget display in the form of scrollbar.

According to Wikipedia, a scrollbar (Also known as a handle in the very first GUIs) is a graphical object in a graphical user interface (GUI) with which continuous text, pictures or anything else can be scrolled including time in video applications, i.e., viewed even if it does not fit into the space in a computer display, window, or viewport.

With scrollbarr method, we can set how long the display of our widgets, so that the view from our blog pages will become more neatly arranged.

Actually, it's very easy to make a scrollbar in our widget. Log in to your Blogger Blog, Go to your Dashboard >> Layout >> Edit HTML and find /* Sidebar Content */ (in some case, may be you'll found like mine, with ----- ), we only need to add this simple script code. just below /* Sidebar Content */

/* Sidebar Content
----------------------------------------------- */
.sidebar .widget{
height:250px;
overflow:auto;
}

This is my blog page views before :

And this is after :

We can set the height of the scrollbar to fit our blog page by change the value 250 (px), Please try to change into 200px or 300px, you'll know the differences and will be found your match lenght...

When there is a sentence in the widget contents that exceed the sidebar limit, like in my NEW BLOGGER TIPS LABELS, then there will be a horisontal scrollbar automatically show up.

If you want to (I personally do not need it because there is already wide settings sidebar), you can also add Horisontal Scrollbar deliberately to set the width of the widget, by copy this script code width: 200px; (change the number 200 as you want) and paste right under height:250px;, so it will look like,

/* Sidebar Content
----------------------------------------------- */
.sidebar .widget{
height:250px;
width:200px;
overflow:auto;
}

ATTENTION : This trick will set all of our widget in sidebar being a scrollbar mode, So please make sure if you have installed widgets from third parties (like Google Adsense), this scrollbar tricks does not violate their Term Of Service or their rules. I am not responsible if you get in trouble because of this trick...!!!

To overcome those problems, we can make a scrollbar in our blogger widget separately one by one... We will discuss it soon in my next post.. How To Make A Scrollbar In Your Blogger Widgets II and III.

Blogger Team made millions of tutorials blog looks like a "foolish tutorial"

2010-04-06T09:11:00.000-07:00

I am too late knowing a great news, because just today I know that 11 days ago I got an email from Blogger Team, whose contents are as follows:

We’re excited to announce that the Blogger Template Designer is now available on Blogger in draft, Blogger’s experimental playground.

The Blogger Template Designer makes it easy to customize the look and feel of your blog without knowing any HTML or CSS. Here are a few of the new features available in the Blogger Template Designer :

    * Beautiful new templates to start from
    * Custom blog layouts with one, two and three columns
    * Hundreds of background images
    * Customizable colors, fonts, and more...

What are you waiting for? Express yourself in style with the Blogger Template Designer. Learn more at www.blogger.com/templates.

The Blogger Team

With great enthusiasm I hurried to follow the link provided in the email ..

Wow .. If prior to the date 03-27-2010 Blogger only offers standard templates as we already know (rather boring) since last few days, the Blogger add facilities to enhance your display settings templates.

There are quite a lot of facilities added to the Blogger settings, ranging from the addition of templates with different variations, a variety of background images, to the layout settings, and other settings such as the division of the column footer into 2 or 3 columns.

Everything we can do with an easy step in a few clicks, yes .. exactly like the contents of an email from the blogger team, we can modify our templates without needing to know HTML or CSS code.

This could be a "big punch" to many "tutorial blogs" that so far has a busy traffic because of the many novice bloggers who are looking for information about the articles that contain how to modify the blogspot template (by modifying the template CSS and HTML code).
Blogger Team made millions of tutorials blog looks like a "foolish tutorial", killing mosquitoes with a shotgun.

Although not apply yet to my personal blog because of my limited time to explore, but this is really great news, additional facilities have been long-awaited by millions of users Blogspot.

I hope I could write my experience in using of these Blogger latest facilities as soon as possible

How To Change Dofollow Attribute Comments in Blogger

2010-03-24T22:03:00.000-07:00

Dofollow is a term given to web page or sites / blog which provides (outbound) links to the comments. whereas Nofollow is the opposite.

Here are the advantages and disadvantages of each, Dofollow and Nofollow..

Dofollow
The advantages of the dofollow blogs (sites) is able to increase the blog traffic, as will a lot of visitors who leave their "link traces", that will attract more advertisers who are interested in displaying their ads
The risk of dofollow blogs is that you should be ready to receive comments from spammers who comment without reading the contents of your article or put not relevant link.

Nofollow
The advantages of nofollow blogs is able to filter out spam comments from visitors, The comments obtained truly reflects what the visitors (readers) opinion and not just a "polite" comments and wanted to leave a link.
The disadvantages is the visitors and advertisers will be reduced from your blog, because usually they will find DoFollow blogs to enhance their position in search engines.

Actually default setting attribute comments from blogger is Nofollow. To tun it into Dofollow, here are the steps we have to do.

Log in to your Blogger >> Dashboard >> Layout >> Edit HTML >> and check the Expand Widget Templates.
Find this script

href='data:comment.authorUrl' rel='nofollow'

and deleted rel='nofollow', and save template. simply as that...

Note:
To determine whether a blog, is DoFollow or Nofollow. just View their page source, right click on a web page, and select page source, find the href code, if followed by the code rel = 'nofollow' it means that the blog is nofollow, if not there is DoFollow. For an easier way just find rel = 'nofollow' if we do not find then that blog is dofollow.

How To Delete Spam Comments In Blogger

2010-03-23T02:02:00.000-07:00

A couple days ago, I found a comment contain with 10 links that not relevant with the article that I have post (spam comment). Since this incident, I want to give brief tips for New Blogger about How To Delete Spam Comments In Blogger Blog.

Log in to Blogger. In your Dashboard >> choose your blog that you want to delete the comments (if you have more than one blog) >> and click View Blog.

Click the Title of the article that contain the comment that you want to delete >> and look at the "spam" comments.

Just Click the trash image and we will brought to the confirmation page.

Make sure to check the Remove forever? box if you want to delete that comment forever, but remember that this action can not be undone. After you have decided tu check or uncheck... Simply click the DELETE COMMENT.

Done.. the comment will be vanished and leaving the comments name / id and a notice that "This post has been removed by a blog administrator."

How To Make "Back To Top" Navigation Link

2010-03-21T21:59:00.000-07:00

Back to Top is a Navigation link at the bottom of the web page. Provide by site owner to jump back to the top of the page.
Sometime when we visited a Website or Blog, In addition to interested in the main article, we are also interested in some "information" that (intentionally placed by the owner to attract visitors) is located at the top of a web page. After finished reading the main article, it would be very helpful if there is a navigation link to the top of the page, so we only need a single click to navigated away to the top page to continue explored another "information" that attracted us.

To make this widget, we must declare the CSS Code of the widget first (declare the name and parameters that set the display widget in browser) then write / put the widget code itself (div id="widget-name") in its position (bottom)

In your HTML Template (Dashboard > Layout > Edit HTML) insert this CSS above ]]></b:skin>

/* Credit
----------------------------------------------- */
#credit {
margin: 0px 0px 0px 0px;
padding: 2px 0px 0px 0px;
width: 100%;
height: 26px;
clear: both;
font-family: verdana, helvetica;
font-size: 70%;
color: #444444;
font-weight: normal;
background: #777777;
}

#creditleft {
margin: 0px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 26px;
position: relative;
float: left;
text-align: left;
display: inline;
width: 71%;
background: #ffffff;
}

#creditright {
margin: -33px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 26px;
position: relative;
float: right;
text-align:right;
display: inline;
width: 30%;
background: #ffffff;
}

#creditleft p {
margin: 0;
padding: 0
}

#creditright p {
margin: 0;
padding: 0
}

#creditleft a, .creditleft a:hover, .creditleft a:visited {
color: #444444;
text-decoration: underline;
}

#creditright a, .creditright a:hover, .creditright a:visited {
color: #444444;
text-decoration: underline;
}

We are not going to discuss the CSS Code above, but if we read line by line you will get the "picture" of this widget display settings (please look at the bottom of this page to see the result of the setting...!!!). You can replace the parameters to match with your template. ex: backgrounds or fonts color.

Next, Copy this Widget Script and Paste at the bottom of your HTML Code above the closing tag </body>

<div id='credit'>

<div id='creditleft'>
<p><b>  © <a href='http://doit2us.blogspot.com/'>New Blogger Tips For Us</a> <i>Free Blogger Template</i> by <a href='http://doit2us.blogspot.com/'>Mc</a> 2010</b></p>
</div>

<div id='creditright'>
<p><b>Back to <a href='#outer-wrapper'>TOP</a>  </b></p>
</div>

</div>

The final position will be like this :

Widget Script
</body>
</html>

That's all, If you want to... You can replace the Blue with Your Link and Text... And last, do not forget to save your template, view your blog and... enjoy your new "Back to Top" widget

JavaScript - Small Tips I

2010-03-19T21:57:00.000-07:00

How To Make a JavaScript Externally

As I mentioned in How To Make Recent Comment II and How To Make a Related Posts Widgets in Blogger.. One of the problems with the JavaScript code in our template, is to make our web loading page become slower relatively or even could not see if there is something wrong with Script Js itself or the browser used.

To overcome this problem, we can put this Script (JS) externally.
So when the visitors browse our Site or Blog, their browser will reading our template Script first and then Script external JS after.
With this method our visitors still can see our page with more faster, although maybe there is a problem with JavaScript or compatibility of Browser used. (This is why some site owner write "warning text" on their web page "This Site Will Look Perfect In X, Y and Z browser".)

To make an external JavaScript, the first step of course, we must have a server / web host to store our JS file. If you do not have and want to have a web storage for free please read "Using Google Group and Google Sites as Web Storage".

After we have a host sever then the next step is to make your script as a JS file. Just simply find your JavaScript code, Cut it and Paste in your Notepad and save it as a JS file (.js), Store your JS file into your host server and put some "calling" code into your HTML template.

Please take look at How To Make a Blogger Related Post. cause I will use this article to make an explanation.

To make the Related Post JavaScript externally, Just Cut..! the Related Post JavaScript (the green code) and paste in your Notepad, then Save it as yourkodescript.js.
Next ..Upload / store this file into your web host and remember the URL link.

Write this folowwing script exactly on the place where the Related Post JavaScript was before.

<script src='http://Yourwebhost.com/yourkodescript.js' type='text/javascript'/>

The final position will look like this,

]]></b:skin>
The Display Setting Script
<script src='http://Yourwebhost.com/yourkodescript.js' type='text/javascript'/>
</head>

Note : The rest of the step to make related post widget are still the same...

Inform About The Existence Of JavaScript In Our Template

Because afraid of there are malicious script contained in JavaScript files, especially external JavaScript. Many users decided to configured their browser to disable the script, so that the script will not be able to see/read, and this means that your visitor couldn't be able to view all of your JavaScript build widget.

To anticipated this situation, we can inform to our visitors about the existence of JavaScript in our template / widget and maybe giving an explanation or guarantee that there is no malicious script inside it or no harm or it's safe.

To do this, we can simply add a small script at the end of your JavaScript Code.

JavaScript
<noscript>You need to enable JavaScript to read this.</noscript>

Just like what I have done in How To Make Recent Comments. If the visitor disabled the JavaScripts browser, There will be warning text below my "recent comments title" that's says "You Need to enable JavaScript to read this"

You can edit the 'explanation text' as you want.. how about add "Guarantee 100% no harm"..!!

Please, Write your comments.. and maybe you want to share your secret JS tips..., will be nice...

Blogger Related Post I- The Naked Script

2010-03-16T10:48:00.000-07:00

Actually I had long enough to discuss about how to make a related posts widgets in blogger because of it's very useful function.

According to the name - related post - this widget provides information to visitors who are reading our articles that there are other articles that discuss the similar or related topic that maybe they will be interested with. The main goal is to make our guess visiting times become longer, this means making our blogs become more populair and for those who put some ad on their site / blog, it will give more chance that the ad will get attention from the visitors.

After a long search from internet about how to make it, I found quite a lot of tutorial on "blogger related posts". Almost all of them use external JavaScript, some working and some did not. Most of Not Working related posts widget because of it's server and the other because of it's wrong Script, it seems to be a little miss code when posting the article. ( please read How To Posting Source Code in Blogger Post / Articles ).

Both long and/or short script related post widget that we find in the "blogger related post widget" Tutor, actually consist of two major parts. JavaScript Codes that serves to showing related post itself, and HTML / CSS Codes that used to set the display of related post.

In this article I will not discuss about setting the display of related post widget, because we can find a lot of ways out there even displaying the related post with it's screenshot link.

As I ever mention in How To Make Recent Comment II. The use of external JavaScript (File JS stored on outside server) can speed up our web pages loading times. The problem is we often can not see directly the contents of those Java Script, because the server restrictions or by the owners file setting. This will lead us to fear of the presence of malicious script inside those "invisible" JavaScript.

So in accordance with the title Blogger Related Post - The Naked Script, I will give a Related Post JavaScript -Naked- So you do not feel worry anymore cause you can see it's contents.

//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i ) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k ) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum ;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i ) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length = 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length = 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j ) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' relatedUrls[r] '">' relatedTitles[r] '</a></li>');
if (r < relatedTitles.length - 1) {
r ;
} else {
r = 0;
}
i ;
}
document.write('</ul>');
document.write('<a rel="dofollow" href="http://doit2us.blogspot.com">Learn How To Make This Related Posts Widget [?]</a></font>');
}
//]]>

We can simply created Related Post Widget by putting this JS directly inside our HTML template codes...

Go to your Dashboard >> Layout >> Edit HTML and check Expand Widget Templates.
Find this codes

]]></b:skin>
</head>

and Put this simple display setting Script between it,

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://1.bp.blogspot.com/_cNpXRtRph18/SpbSRYurg2I/AAAAAAAAD7Q/GbYNm2feyIQ/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style>

Next put the JavaScript right after (below) it. So the final Script will look like :

]]></b:skin>
The Display Setting Script
Related Post JavaScript
</head>

Next search for <data:'post.body/>. In some templates this code may look like:

<div class='post-body>
Add this folowing script just below <data:'post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" data:label.name "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

After finished all, Save Your Template and click View Blog.. there you go.. You have new related post widget in your blog.

Note :

To make this related post widget works.. then you must have more than one article with the same label/tag/catagories.
This related post widget not work in your main page (home).

We will discuss more about this related post widget setting in the next artikel.

Blog Has Been Removed - How To Deal With In Seconds

2010-03-12T22:04:00.000-08:00

This morning I had experience that made me surprised and rather worried.. When I want to open this New Blogger Tips Blog, with intention to update it, I found this Blog could not be opened and get a warning that Blog has been removed.

I wonder why Blogger doing this to my Blog, because I am sure that I do not doing something that violetes Blogger TOS

My only worried is... if there is certain person or party who reported to Blogger that this New Blogger Tips Blog is doing something illegal or that can harms to them, (although I'm sure not doing it too). In such cases we will need plenty of time to deal with.
Because I'm certain not make violates to Blogger TOS or other parties, then my temporary conclusion is that "there is a little (technical) error on the part of Blogger" that would be easily solved with the verification process.

And this is what I did then..
I typed http://www.blogger.com/start in my browser, sign in with my account. I done it twice cause the first time there will be warn that Sorry your account has been disabled .

After click Sign in will be taken to the notification temporary disabled Google account page, which states that "We apologize for the inconvinience.. bla..bla..bla.. For the imediate assintance enter your mobile phone number and we will send you a verification code".

I prefer to chose Text Message Verification Option, because it's cheaper and faster.. This is the best part...Yup really fast response from Google. After chose my Country and type my phone number. As soon as Click "Send verification code to my mobile phone", Just in second (not more than 3 seconds) there are incoming Text Message from Google to my mobile phone.

The next step, I just put this verification code into Verification Page which appear after we pressed Send verification code to my mobile phone button (So sorry that I forgotten to take screenshoot to this last action.). and click Verify button.

That's it.. As simple and Quicly like that, I solve my "Blog Has Been Removed" just in second. Hope.. this works for you to...

How To Make A Recent Comments II (JavaScript)

2010-03-09T22:42:00.000-08:00

In previously post we have already discuss how to make a recent comments with Feed Widget. Because using the URL Feed facilities, the possibility problem that will be arrise is when the server of URL Feed that we used is going "Down". Although this was very rare.

In this article we will discuss how to make a recent comments with JavaScript.

Actually there are several reason why these method are usually avoided by the blog/site owner to use it.
The negative point's of using JavaScript, Beside can make a web page loading become slow, nearly most of the Recent Comments Tutorial using JavaScript, upload their scripts onto their external sites and provide you a code for insertion into your template, this makes the site/blog owner being worried about the possibility of inserted code that could endanger their site/blog or malicious script.

Usually, inside the code that they provide willl have the script that look like this :

<script src="http//externalsite.com/.....html/filename.js">
</script>

From the blog visitors, when the page loads, their browser will visited that external site to read and run the script of .js file. That is where the problems will come "if" the .js file contained with malicious script.
Because of this situation, many users decided to configured their browser to disable the script, so that the script will not be able to see/read, and this means that your visitor couldn't be able to view your recent comments.
So.. please be carefulll if you have an external JavaScript file link make sure that there is no malicious script inside, and regularly check the script from the initial script change. More better if you have your own Script on your own server.

To avoid the problem above, in this article, we are not going to upload the script to our site and makes you link to it. We'll let you have the full JavaScript code that we have used so that you know what goes into it.

Go to your Dashboard >> Layout >> Page Elements >> and Add a Gadget >> Choose and click HTML/JavaScript gadget.

Named your new gadget, write in title column ex: New Blogger Tips Recent Comments.

Copy the code below and Paste into the Content column.

<ul><script style="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < 5; i ) {
var entry = json.feed.entry[i];
var ctlink;

if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k ) {
if (entry.link[k].rel == 'alternate') {
ctlink = entry.link[k].href;
break;
}
}
ctlink = ctlink.replace("#", "#comment-");
var ptlink = ctlink.split("#");
ptlink = ptlink[0];
var txtlink = ptlink.split("/");
txtlink = txtlink[5];
txtlink = txtlink.split(".html");
txtlink = txtlink[0];
var pttitle = txtlink.replace(/-/g," ");
pttitle = pttitle.link(ptlink);
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");

document.write('<li>');
document.write('<a href="'   ctlink   '">'   entry.author[0].name.$t   '</a>');
document.write(' on '   pttitle);
document.write('<br/>');
if (comment.length < 100) {
document.write(comment);
}
else
{
comment = comment.substring(0, 100);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment   '...<a href="'   ctlink   '">(more)</a>');
}
}
document.write('</li>');
document.write('<div style="font-size:75%;text-align:center"><a href="http://doit2us.blogspot.com/2010/03/how-to-make-recent-comments-ii.html">Learn How To Make This Widgets</a></div>');
}
</script>
<script src="http://doit2us.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script></ul>
<noscript>You need to enable JavaScript to read this.</noscript>

You can set your "recent comments" display, by adjust these value..

The 5 value is the number of the last comment that will appear in your recent comments gadget.
The 100 value is the number of lenght characters comment in your recent comments gadget.
Don't forget to change http://doit2us.blogspot.com with your URL Site / Blog.

After finished configuring your HTML/JavaScript (setting the value and replace the URL) click save, and view your blog. You should have a Recent Comments widget showing the latest comments posted on your Blog.

This script has been added to the anticipation if our visitor disabled the JavaScripts browser, There will be warning text below our "recent comments title" that's says "You Need to enable JavaScript to read this"

That's all... Happy controlling your Recent Comments...

How To Make A Recent Comments I (Feed Widget)

2010-03-07T19:52:00.000-08:00

Two-way communication between the owners of a site, especially blogs, with their visitor are one of the most important thing for the development of the sites. In addition to ongoing the relationships with their visitors, the owners of the sites/blogs can digg up the information about strenghts and weaknesses of their sites, what are the visitors like and dislike, criticisms and suggestion and much more.

One of the way to building two-way communication within a site is to provide a visitors comments facilities. Almost all of the sites/blogs based on CMS like Blogger, Wordpress, Drupal, Joomla, Mambo. already have comments facilities for the visitors by defaults.

But the problem is... Along with increasing the number of articles made, it's rather difficult for the owner of sites to control (read and answer) because the location of the scattered comments in various articles that have been made.

The difficulty in controlling visitors comments that spread in various articles can be overcome by "Recent Comments" facilities. This Recent Comments will show up the last comments by the visitors in an article, hence the blog owner will soon find out that there are new comments in their articles, so that they can make a follow up.

In this article we will discuss how to make a recent comments with feed widget on Blogger.
Because we will use the Feed Widget, then first we must ensure that the Comment Feeds are enabled.

Go to your Dashboard >> click Settings of your Blog >> click Site Feed. You should set the “Blog Comment Feed” and “Per-Post Comment Feeds” to either “Short” or “Full”. Do not choose “None”. Then Save the Settings.

Next Go back to Layout >> Page Elements >> Add a Gadget in your sidebar, select “Feed”. You will be prompted to enter a Feed URL.

There are two Feed URL we can used by default, you can choose one of them.

Atom Feed for the blog commnets like this:

http://doit2us.blogspot.com/feeds/comments/default

or RSS Feed as Blog Comments as follows :

http://doit2us.blogspot.com/feeds/comments/default?alt=rss

Please replace http://doit2us.blogspot.com with yours. After finished click Continue

Next, You can set "how to display" your recent comment. You can named your Recent Comments by insert the Title column, Setting how much last comment you want to show up (5 by default). You can also choose to displayed the dates and name of the authors or not. When you are satisfied with the setting, click to Save the Changes.
You still can set the position of your recent comments by drag and drop the widget to the relevant part of your template and Save the Template.

In the next post we will discuss How To Make A Recent Comments With JavaScript

How To Make A Dropdown List Label Menu (II)

2010-03-05T20:02:00.000-08:00

In How To Make A Dropdown List Label Menu (I) we discuss about How To Make A Dropdown List Label Menu by modification The Label Gadget setting.
Although it was quite simple, this method could only make a dropdown list of Label and must have All list, we can not choose display exactly what we need.

In this article, we will discuss How To Make A Dropdown List Menu (II) that we can totally control what we want to display in the dropdown menu not just the label, although we must work a little hard than the first method.
How we can do it...? Yup.. by write the link one by one. Don't worry..., actualy this method is still simple but very usable, because with this method we could make a dropdown menu, whatever we want, not just a label list.

First.. we pick up the name or title of your dropdown menu, then you must note the URL address all of your link list.
The next step, we use our "Add a Gadget" facilities and add "HTML/JavaScript" to put the Code to make a dropdown menu.
Go to your Dashboard >> Layout >> Page Elements >> and click "Add a Gadget" >> than click HTML/JavaScript.

Copy this simple Script below, and Paste into the content column..

<form>
<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option value=0 selected> Your Menu Title </option>
<option value=" Your Link Address "> Your Link Title </option>

</select>
</form>

Please replace the Red, Blue and Purple with your menu title, link address that you've prepared before, and title to represented your link. After finished your work, don't forget to save it.

Here is an example:

<form>
<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option value=0 selected>-New Blogger Tips-</option>
<option value="http://doit2us.blogspot.com/2010/03/how-to-make-dropdown-list-label-menu.html">how to make a dropdown list</option>
<option value="http://doit2us.blogspot.com/2010/02/how-to-make-spoiler-in-second.html">how to make a spoiler</option>
<option value="http://doit2us.blogspot.com/2010/02/how-to-make-sticky-post-in-your-blogger.html">how to make a sticky post</option>
<option value="http://doit2us.blogspot.com/2010/02/how-to-make-drop-capital-letter-drop.html">how to make a dropcap</option>
<option value="http://doit2us.blogspot.com/2010/01/how-to-make-navigation-menu-bar-on.html">how to make a navigation menu</option>
<option value="http://doit2us.blogspot.com/2009/12/how-to-change-blogger-favicon-ico.html">how to change blogger favico</option>
<option value="http://doit2us.blogspot.com/2009/11/add-add-gadget-on-header-and-blog-posts.html">how to add the add a gadget facilities</option>

</select>
</form>

And the Dropdown menu will look like this:

You can change Your Menu Title with instruction sentence like "click here to show", and put your menu title into HTML/JavaScript Title column.

We could also make a dropdown menu not only in a sidebar. but in the blog post too, exactly like in this article.. Simply.. Just write your code inside your blog post and tara... you,ve got your dropdown menu in your post.

How To Make A Dropdown List Label Menu (I)

2010-03-02T16:46:00.000-08:00

A drop-down list is a user interface control GUI element, similar to a list box, which allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value. When activated, it displays (drops down) a list of values, from which the user may select one. When the user selects a new value, the control reverts to its inactive state, displaying the selected value (Wikipedia). In this case we will make a Label List.

This simple tricks is based on changing the Label Gadget settings. So the first step of course, you must already have to use or instal the Label Gadget in your blog.
If you have not install yet, then: Go to your Dashboard >> Layout >> Add a Gadget >> Choose Label and name it, ex: Blogger New Tips Label.
Note: Please choose/click the List Display

The next step is to change the display setting of our Label, by modidying the HTML Label Code.
Go to Layout >> Edit HTML >> and check your Expand Widget Template (Don't forget to backup your template first).
Search and find your Label codes, the easiest way is to find your "Label name", use ctrl+F to find it (Blogger New Tips Label).
You will find similar code like this:

<b:widget id='Label1' locked='false' title='New Blogger Tips Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
    <h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content "   data:display   "-label-widget-content"'>
    <b:if cond='data:display == "list"'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='"label-size label-size-"   data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

To make a drop-down list label, just replace the red script with this blue one

<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Choose The Label</option>
<b:loop values='data:labels' var='label'>

<option expr:value='data:label.url'><data:label.name/></option>
</b:loop>
</select>

So the final script will be like this:

<b:widget id='Label1' locked='false' title='New Blogger Tips Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
    <h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content "   data:display   "-label-widget-content"'>
    <b:if cond='data:display == "list"'>

<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Choose The Label</option>
<b:loop values='data:labels' var='label'>

<option expr:value='data:label.url'><data:label.name/></option>
</b:loop>
</select>

    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='"label-size label-size-"   data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>

And will be displayed like this:

That's all... Enjoy to make a dropdown list label menu...

How To Make Spoiler In Second

2010-02-28T20:28:00.000-08:00

Spoiler is a facility installed in a post (articles, blogs, forums, or in the comments) that serves to hide pictures or text/writing. Visitors can click on the button that provided, if they want to see the hiding picture or text. The spoiler works similar as a scroll bar.

The main function of the spoiler is a space-saving, especially if you have lots of large image display on your posts. and the most important is to save your web page loading time.

We can easily make a spoiler into our post, just add this simple Script right on the place where you want to put your spoiler images or text.

<div style="margin-bottom: 2px;">Your Spoiler Title
<div style="margin-top: 5px; text-align: center;"><input value="Show" style="margin-top: 5px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"> </div>
<div style="border: 1px inset ; margi : 0px; padding: 6px;"><div style="display: none;">YOU CAN PUT YOUR SPOILER IMAGES OR TEXTS IN HERE</div></div></div>

Just copy and paste the Script above into your post, replace the Your Spoiler Title with your title, and your images or text into YOU CAN PUT YOUR SPOILER IMAGES OR TEXTS IN HERE .

Here is the display of the Script above

Your Spoiler Title

You can also set the spoiler display as you like by changing the "Display Setting"

It's quite easy isn't it...??? Well... happy spoiler..

How To Make a Sticky Post in Your Blogger With a Simple Trick.

2010-02-26T21:13:00.000-08:00

Because of the specific goals, sometimes we want every guest who visited our blog, read or see: pictures, messages, or a particular post on all of our blog pages they were visited, it's call a sticky post.
Usually we put the sticky post above the blog post.

In blogger post rule, a new post will be shown on the top, while the older one place below/after it or become archive (depending on your post setting), but with this very simple trick you can remain your post sticky at the top.

Actually this trick is very simple, The key is add the "Add a Gadget" widget above Blog Post in Page Element

By default this widget isn't there, we must doing a little trick first to get that widget. If you do not have Add a Gadget Widget yet, please follow this link http://doit2us.blogspot.com/2009/11/add-add-gadget-on-header-and-blog-posts.html

The rest step is just to add our Sticky Post (or you can put picture, message, HTML/JavaScript ) by Add a Gadget Widget above the blog post.

If you want to add a "post form" exactly like your post, then you can add a "Text" gadget.
Please not to write your post title in Title Column because it will show up as a "Gadget Title" not as a Post Title, you better write it in Content. and set the display as a Post Title.

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.

Open your Blogger Dashboard >> New Post. Write your sticky post.

Use Preview to check your final displal, Block your Sticky Post text.

Open your Dashboard in a new Tab >> Layout >> Page Element >> Add a Gadget (above your blogpost) >> Click Text >> Paste your Sticky Post into content column. and Save it.

And this is the final example...

How To Make Image Link Menu Navigation Bars (Navigation Menu Bar on Blogspot III)

2010-02-19T04:42:00.000-08:00

In a previous posts, we have discuss about "How To Make The Navigation Menu Bar I" as a simple HTML script and "How To Make The Navigation Menu Bar II" for make it more attractive with CSS..
In this post we will discuss How To Make Image Link Menu Navigation Bars so that we can change the Menu Navigation Bar with images or buttons.

Images Link Menu Navigation Bars.

Of course our first step is to have some images that each picture will represent each link of our menu navigation bar. You can search from the net for "free downloadable images/picture" , edit and resize it or even create a new ones for your own with image editor like Picasa
After finished these images/pictures, keep/host on the server and note the URL of your files images. There are so many free server that allowed us to keep our images on them, just search "free image server". or you can look at Using Google Group or Google Site as Web Storage.

The basic methode is similar to the way of making a Simple Navigation Bar . the differences is Simple Navigation Bar base on text link, while this one base on image link.

In your HTML Template (Dashboard > Layout > Edit HTML) insert this CSS between ..., I suggest to put in under /*Header*/ or ]]> to make it easy to remember.

#navbarmenu ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

The next step is create the menu links list (as we did in How To Make The Navigation Menu Bar on Blogspot (I) but in a LIST form).

On your Dashboard >> Layout >> Page Elements, and click Add a Gadget on Header. and choose to add HTML/JavaScript.

(Note : If you want to add "Add a Gadget" Widget on your Page Elements Please visit http://doit2us.blogspot.com/2009/11/add-add-gadget-on-header-and-blog-posts.html .)

If the previous steps are very similar with making a Simple Navigation Bar . The next following steps is to distinguish between text and images navigation bars. The key is the Script below

Next step leave the Title Column empty, Copy the Script below and insert in the column content

<div id='navbarmenu'>
<ul>
<li><a href="URL of Home page"><img src="URL of Home image"></a></li>
<li><a href="URL of Music page"><img src="URL of Music image"></a></li>
<li><a href="URL of Books page"><img src="URL of Books image"></a></li>
<li><a href="URL of Video page"><img src="URL of Links image"></a></li>
<li><a href="URL of Profile page"><img src="URL of Profile image"></a></li>
<li><a href="mailto:EMAIL ADDRESS"><img src="URL of Email image"></a></li>
</ul></div>

Change the URL Link Page with the address where you want your guess directed to, and URL Link Image.with the address of your URL images from your server.

To make the display of your NavBar more attractive, You can combine with Hover effect, and Visited Link by CSS.
The following CSS Script is a sample of it.

#navbarmenu ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}

#navbarmenu li a img{
height:30px;
width:30px;
}

#navbarmenu li a:hover img{
height:40px;
width:40px;
background: #ff0000;
}

#navbarmenu li a:visited img{
height:40px;
width:40px;
background: #0000ff;
}

While text link Nav Bar change the color text display after visited or hover mouse on it. In this sample Image Link Nav Bar, The skenario is : The navigation bar image link was set to 30 x 30 px and there is no border surround it, when the mouse cursor hover on it, the image size will raise to 40 x 40 px.with a red background. Any visited link will have a blue background behind.image.

You can also create reverse effect, that the images became smaller when mouse hover on it and for the visited link.
Please change the setting of the script according to your creatifity, just play for a while, explore and found your best setting...

In the next post we will discuss how to make Button Menu Navigation Bar.

How To Make Drop Capital Letter (Drop Cap) In Blogger Post

2010-02-16T07:33:00.000-08:00

I n MS Word, there are facilities that can be used to create Drop Cap "formats the first character in the first paragraph as a drop capital letter", we often seen at the beginning of the novels, where the top of the first letter of the first word lines up with the top of the first sentence and drops down to the four or fifth sentence.

In this post we will learn how to create a drop cap in blogger post. exactly like the first sentence of this post.

1. Go to Dashboard >> Layout >> Edit HTML and ensure you have checked the "Expand widget templates" box..
2. Then using your browser's search fuction, locate this CSS Code

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

3. Add this CSS code right after it

.dropcaps {
float: left;
color: #000000;
font-size: 100px;
line-height: 80px;
padding-top: 1px;
padding-right: 5px;
}

So it will look like :

4. Don't forget to SAVE TEMPLATE

5. If you want to create a drop cap in your post, then in the beginning word of your post, you must type

<span class="dropcaps">Your First Letter</span>...second letter and so on

The following example is what I do on this post.

And you can see for yourself the Drop Cap display of this post.

6. We can easily set/adjust the display of our Drop Cap by change the setting of .dropcaps.

You can change the color by change value #000000 (Black) with "yours". You can also change the setting of the font (size, height, weight, padding etc).

If you confuse about your HTML color code, then you can visit

http://doit2us.blogspot.com/search/label/change header color

Hope works for you and.. Good luck..!!

Technorati Verify Claim Code RTT5DY6YKYZX (How To Get Technorati Indexing)

2010-02-09T08:58:00.000-08:00

RTT5DY6YKYZX

RTT5DY6YKYZX is a sample of my unique code, that I must put on my new Blog Posts and Publish it to get index by Technorati

As my moto Learning By Doing.. I'll write again after get claimed.

How To Get Rid Of "Read More..." In Blogger Post

2010-02-07T20:57:00.000-08:00

Unlike the other articles that discuss how to add or create Read more.. in blogger posts, I just have a problem to get rid of.it.
After change my template and try to make modification on it (look at http://doit2us.blogspot.com/2010/02/why-my-google-adsense-suddenly.html), All of my posts have "Read more..." facilities at the end of the posts, although I don't break the page. This became odd because almost all of my articles finished in one page, no need "Read more.." anymore.

Eventually, I've found that this technique works for me...

1. Go to Dashboard >> Layout >> Edit HTML and ensure you have checked the "Expand widget templates" box.
2. Then using your browser's search function, locate the following line of code:

<data:post.body/>

3. Depending on your individual template, you may find this enclosed between <p> or <div> tags. We need to leave these tags intact.
4. If you've added any other "Read more" hacks to your template (or have added other conditional statements to the Blog Posts section), you may discover more than one instance of . If this is the case, you need to edit the section which has <b:if cond='data.blog.url != data:blog.homepageUrl> a line or two above this.
The following example is on my HTML Template...

5. Delete script line below this (or similar <div class='post-body'...> on yours)

<div class='post-body' expr:id='"post-" data:post.id'>

and leave one of <data:post.body/>. This is finally modification script on my mine:

6. Click Save Template and preview your changes. If this has worked properly, your test post should display normally and clear without Read more... at the end of posts.

Why My Google Adsense Suddenly Disappear / Doesn't Show Up..??

2010-02-06T21:11:00.000-08:00

A few days ago my Google Adsense suddenly disappered from My Blog, after checked on My Adsense, I am sure that the problem did not come from "My Adsense", everthing it's ok, it wasn't disabled..

Later, I did "Googling" to get my problem solved, Although not exactly the same as my problem I founded alot of similar cases (loses their adsense). After read some forum with the same/similar problem, finnally followed the suggestion on Google Support Forum, I try to checked My HTML Script and ended so bad...

Because of my careless, I forgot to backup my HTML Template when trying to tampered it. Yup.. I made a lots of "try and error" there, and for sure always end with ERROR... So after spend 4 hour to fixed my problem (I had 2 problem now my adsense and my template) and getting worst and worst, I decided to refresh my template from beginning and then made a modification (still work on it..).

I had my template problem solved but not with my adsense. After rest for a while, I had second though "why I am not trying to opened it with another browser, maybe the problem was my Mozilla Firefox conflicted with my adsense" And it's true, when I used Opera and Internet Explorer My Adsense did Show up there on my new template normally as it was. After comparing My Blog displayed from theese three browser, I finnally concluded that the problem is my Mozilla Firefox browser.

The conclusions of my adsense problem because of FF browser, take me to made a second mistake (fortunately just a little mistake). With full of confidently I reinstalling my Mozilla Firefox browser. Once finished reinstall Firefox and try to see My New Blogger Tips Blog, I was so surprised because My Google Adsense still didn't appear.

Full of confusion, I tied to find the problem solving with Google (AGAIN) but with new adding information. I put the phrase "Adsense not show up in firefox" and "firefox blocked my adsense". And so I finnally discovered that the real problem is not in firefox itself but the used of Adblock Plus Suddenly I remember that before the problem came, I let my Firefox update the Add-ons, and one of the Add-ons was Adblock Plus Up date into 1.13 version. and I didn't realized that this Adblock Plus 1.1.3 was blocked My Google Adsense.

After knowing the source of the problem, then I could easily show up My Google Adsense in my browser. Just disable the Adblock Plus.

Some people suggested to use the filters in Adblock Plus to manage the Ads, which one to be blocked and which one being passed.
But I have my own thoughts, Considering that the firefox is the most populer browser right now, I wondered how many person are visiting my blog using Firefox and installing Adblock Plus...???.

There is a fact that is really absurd about the condition above. Google suggest and support the use of Firefox Browser, but Firefox responded by suggesting it users to install/use Adblock Plus to blocked Google Adsense... Ironic isn't it...???. This is the dilemma between us as a surfer or advertisers.

How To Make The Navigation Menu Bar On Blogspot (II)

2010-01-31T09:17:00.000-08:00

In How To Make The Navigation Menu Bar on Blogspot (I) we have discuss how to make the navigation links menu with simple HTML script. In this article we will learn how to make it more attractive with CSS.
To do so, besides displaying the menu links with the facilities of HTML/JavaScript Widget, first we must declare the CSS code for these links to set the appereance, than put this CSS in our HTML Template.

1. Simple Navigation Bar Menu.
Besides as we did in How To Make The Navigation Menu Bar on Blogspot (I) , we can create a simple navigation bar menu in the way below, although a bit busy because we have to declared the CSS Code first, but we can easily set the appereance later.

In your HTML Template (Dashboard > Layout > Edit HTML) insert this CSS between <head>...</head>, I suggest to put in under /*Header*/ or ]]></b:skin> to make it easy to remember.

#navbarmenu ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

You can set the font size larger or smaller, you can also set the padding and the margin to set the space in between the word. If you want add a border around the word then you can set the border value at least 1 px. Don't forget to click Save Template.

The next step is create the menu links list (as we did in How To Make The Navigation Menu Bar on Blogspot (I) but in a LIST form).
On your Dashboard > Layout > Page Elements, and click Add a Gadget on Header. and choose to add HTML/JavaScript.

Note : If you want to add "Add a Gadget" Widget on your Page Elements Please visit http://doit2us.blogspot.com/2009/11/add-add-gadget-on-header-and-blog-posts.html .

Leave the Title Column empty, Copy the Script below and insert in the column content

<div id='navbarmenu'>
<ul>
<li><a href="URL of Your Home page">Home</a></li>
<li><a href="URL of Your Music page">Music</a></li>
<li><a href="URL of Your Books page">Books</a></li>
<li><a href="URL of Your Video page">Video</a></li>
<li><a href="URL of Your Profile page">About Me</a></li>
<li><a href="mailto:YOUR EMAIL ADDRESS">Contact</a></li>
</ul></div>

Change the URL Link and relevant words with yours. If you want to make link for your "Label" or "About Me", you can simply click your "Label" or "About Me" in the sidebar and look at your browser navigation bar, just copy and paste into the URL Link

The following example are "Home", "About Me" and "Contact" of this blog..

<a href="doit2us.blogspot.com">Home</a>
<a href="http://www.blogger.com/profile/07471629071890951823">About Me</a>
<a href="mailto:mc4tur@gmail.com">Contact</a>

After Save it, you can move this link widget, try to put it under the header or above the blog posts than try to preview the template. Click SAVE after you make sure the location of your menu link widget.

2. Add a different setting of each link menu (03/02/2010)

If we want to make the different setting of each link menu (eg background color) than we must declare the setting by each link. After we made the links than we give a "class" on each.

Exactly the same steps as above, but we declare CSS for each link (so not longer in a list form). For example we call it by the numbers: newnavbar1, newnavbar2, newnavbar3 and so on.

a.newnavbar1{
font-size:100%;
list-style-type: none;
display:inline;
background:#333399;
padding:3px;
color:#ffffff;
border:0px solid;
}

a.newnavbar2{
font-size:100%;
list-style-type: none;
display:inline;
background:#ff0000;
padding:3px;
color:#ffffff;
border:0px solid;
}

a.newnavbar3{
font-size:100%;
list-style-type: none;
display:inline;
background:#339966;
padding:3px;
color:#ffffff;
border:0px solid;
}

a.newnavbar4{
font-size:100%;
list-style-type: none;
display:inline;
background:#ff6600;
padding:3px;
color:#ffffff;
border:0px solid;
}

a.newnavbar5{
font-size:100%;
list-style-type: none;
display:inline;
background:#cc99ff;
padding:3px;
color:#ffffff;
border:0px solid;
}

And in the Column Content Configure HTML/JavaScript we make a modification by add script class="newnavbar1" for the first link (eg Home), Please match with the link you created.
And in accordance with the setting in the CSS, then we should also write the link one by one just like in the simple HTML Links How To Make The Navigation Menu Bar on Blogspot (I)

<a href="URL of Your Home page" class="newnavbar1">Home</a>
<a href="URL of Your Music page" class="newnavbar2">Music</a>
<a href="URL of Your Video page" class="newnavbar3">Video</a>
<a href="URL of Your Profile page" class="newnavbar4">About Me</a>
<a href="mailto:YOUR EMAIL ADDRESS" class="newnavbar5">Contact</a>

To make it more attractive, you can add a visited link and hover effect, for that you must add the following script below your CSS.

a.newnavbar1:hover, a.newnavbar2:hover, a.newnavbar3:hover, a.newnavbar4:hover, a.newnavbar5:hover {
background:#41a317;
color:#ffffff;
}
a.newnavbar1:visited, a.newnavbar2:visited, a.newnavbar3:visited, a.newnavbar4:visited, a.newnavbar5:visited {
color:#57e964;
}

Click Save and try to view your colourful link..

Some people tend to choose a simple display. If you want to display your menu navigation bar background in one color only or even the same color with your background page, then you can use the CSS code in a list form like in the no. 1 above.
Here is an example of CSS script if we use the same background and just add a visited and hover effects.

#navbarmenu ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

#navbarmenu li a{
color:#dfffed;
}

#navbarmenu li a:visited {
color: #57E964;
}

#newnavbar li a:hover {
color: #F88017;
background: #ffff66;
}

And we use the same step and the same HTML/JavaScript as in no.1. Simple Navigation Bar Menu.

Search Box on Blogspot (HTML Code Search Box)

2010-01-25T20:23:00.000-08:00

In a previous post we discussed how to add search box into blogger, by blogger default and use Google Adsense Search. In this post we will discuss several types of search box that can be installed in our blog in addition to the two of search box that we have mentioned earlier.

1. Common type of search box

HTML Code :

<p align="left">
<form id="searchthis" action="http://doit2us.blogspot.com/search" style="display:inline;" method="get">
<strong>SEARCH IN THIS BLOG<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>

Remember to change http://doit2us.blogspot.com to the URL or web addres of your blog. You can also change the name of your search blog "SEARCH IN THIS BLOG" with whatever you want
You can also set the width of the search box by change size="20" and change the "Search" text with "Hit" or "Go" or whatever by change value="Search".maxlenght="255" indicates that the user may enter up to 255 characters in the search box, you can change the lenght but 255 is quite enough.

If we change align="left" with "center", SEARCH IN THIS BLOG with SEARCH HERE, size="20" with "30", and "Search" with "Hit" the search box display will look like this :

2. Type of Expert Search Box

HTML Code :

<form action="/search" id="searchform" method="get" style=" text-align:center;">
<input class="inpsearch" id="s" name="q" onblur="if (this.value == "") {this.value = "SEARCH HERE";}" onfocus="if (this.value == "SEARCH HERE") {this.value = "";}" type="text" value="SEARCH HERE">
<input id="searchsubmit" type="submit" value="Search">
</form>

In Expert type, we can provide the Words or Phrases inside the search box (SEARCH HERE) that will disappear when we click on it. You can change SEARC HERE with your words, just change those "three" of SEARCH HERE

3. Google Type Search Box

HTML Code:

<form method="GET" action="http://www.google.com/search">
<input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="oe" value="UTF-8">
<table bgcolor="#FFFFFF"><tbody><tr><td>
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" /></a>
</td><td>
<input type="text" name="q" maxlength="255" value="" >
<input type="submit" name="btnG" value="Search">
<span >
<input type="hidden" name="domains" value="http://doit2us.blogspot.com">
<input type="radio" name="sitesearch" value=""> Google Page <input type="radio" name="sitesearch" value="http://doit2us.blogspot.com" checked=""> doit2us.blogspot.com
</span>
</td></tr></tbody></table>
</form>

Change http://doit2us.blogspot.com to the URL or web addres of your blog. You can modify Logo, by change http://www.google.com/logos/Logo_40wht.gif with your Logo/picture web addres. You can also change the word "Search" in the search box by change Search.(ex. with Hit), "Google Page" and "doit2us.blogspot.com" in radio button by change Google Page and doit2us.blogspot.com with whatever you like, but the searching target still inside the Google and Your blog, unless You change the URL of http://www.google.com/search and http://doit2us.blogspot.com too.

Note that I intentionally let the display of google search box above is in a white background, to make a contrast. You can set it to match your web page background by change #FFFFFF in table bgcolor="#FFFFFF" (#FFFFFF=White) with your HTML code of your background color.
You don't know the HTML Code of your background color? Just see it in How to change the blogger header color, you can also download a small, smart and useful tool for free in there.

Happy search... and Good Luck...!!!

How to Add a Search Box into Blogger.(Include Google Adsense Search)

2010-01-24T22:08:00.000-08:00

By default blogger already has a google search box facility, which can be installed by the following way:

Login to your Blogger.
On your dashboard choose (click) Layout and then Page Elements.
Make a new gadget by clicking "Add a Gadget". Adjust selection of "Add a Gadget" in accordance with the "Search Box" placement as your plan. On this blog I put it in the top of my "Blog Posts". If you still don't have "Add a Gadget" facilities on Blog Posts and Header of Blogger Page Elements, Please visit Add the "Add a Gadget" facilities of Blogspot Gadget
In the "Add a Gadget" windows pop up that appears, choose/click Search Box (New!).

In the "Configure Search Box" Enter the title as you like on the Title column to make a name of it, and choose the Tabs as you want by checking the box (we can choose all). .

Do not forget to saving....

We can also install the Google Search Box facilities from Google Adsense, but you must sign up first to use this facilities.

Sig in to Google Adsense.
Click Adsense Setup then on the "Get Ads" tab, click "Adsense for Search Improved!."

Fill/Choose the search box type. If you want to search just from your site, than fill your site addres into the "selected sites" box,you can also choose search from entire web. You can manage your search result more spesifically by adjust setting in "more option". Than click Continue >>.
The next step is choose the search box option, you can choose the look and feel of your search box, and determine how many characters from your Text Box Lenght, click Continue >>
Next, we must determine the "Search Result Type", Opening of search result page, where you can choose wether you would like your search result to open on Google or within your site. Ad Location, specified where you want the ads to be placed in relation to search results. and The display of search results, by setting/editing the palletes. Note: If you choose open your search results in the same window or in a new window, than the Ad Location will not be displayed/appear, instead you are allowed to enter your logo. Click Continue >>
The last of these step is Get Search Code, check the google additional terms agreed box, Name Your Search Engine in the box, then click Submit and Get Code.
Just copy the script on the box. That's it, now we have a Google Adsense Search Script code so that we can display it on our blog.

1. Please login to your Blogger.

2. On your Dashboard choose (click) Layout, and then click Page Elements

3. Make a new gadget by click "Add a Gadget". Adjust selection of "Add a Gadget" in accordance with the Google Adsense Search Box's placement as your plan.

4. In the "Add a Gadget" window pop up that appears, click HTML/JavaScript.

5. Enter the title as you like on the title column. or just leave it blank.

6. Copy the Script code you have previously obtained (above) and insert in the column content. then save.

In the next post we will discuss more spesific about search box and how to customized,, includes some examples of search box script that you can use it.

Lists of (English) Country Names and Code Elements + Download Flag Icons

2010-01-15T00:07:00.000-08:00

This list states the country names (official short names in English) in alphabetical order as given in ISO 3166-1 and the corresponding ISO 3166-1-alpha-2 code elements.
It lists 246 official short names and code elements

Country Names ISO 3166-1-alpha-2 Code elements

A
AFGHANISTAN	AF
ÅLAND ISLANDS	AX
ALBANIA	AL
ALGERIA	DZ
AMERICAN SAMOA	AS
ANDORRA	AD
ANGOLA	AO
ANGUILLA	AI
ANTARCTICA	AQ
ANTIGUA AND BARBUDA	AG
ARGENTINA	AR
ARMENIA	AM
ARUBA	AW
AUSTRALIA	AU
AUSTRIA	AT
AZERBAIJAN	AZ
B
BAHAMAS	BS
BAHRAIN	BH
BANGLADESH	BD
BARBADOS	BB
BELARUS	BY
BELGIUM	BE
BELIZE	BZ
BENIN	BJ
BERMUDA	BM
BHUTAN	BT
BOLIVIA, PLURINATIONAL STATE OF	BO
BOSNIA AND HERZEGOVINA	BA
BOTSWANA	BW
BOUVET ISLAND	BV
BRAZIL	BR
BRITISH INDIAN OCEAN TERRITORY	IO
BRUNEI DARUSSALAM	BN
BULGARIA	BG
BURKINA FASO	BF
BURUNDI	BI
C
CAMBODIA	KH
CAMEROON	CM
CANADA	CA
CAPE VERDE	CV
CAYMAN ISLANDS	KY
CENTRAL AFRICAN REPUBLIC	CF
CHAD	TD
CHILE	CL
CHINA	CN
CHRISTMAS ISLAND	CX
COCOS (KEELING) ISLANDS	CC
COLOMBIA	CO
COMOROS	KM
CONGO	CG
CONGO, THE DEMOCRATIC REPUBLIC OF THE	CD
COOK ISLANDS	CK
COSTA RICA	CR
CÔTE D'IVOIRE	CI
CROATIA	HR
CUBA	CU
CYPRUS	CY
CZECH REPUBLIC	CZ
D
DENMARK	DK
DJIBOUTI	DJ
DOMINICA	DM
DOMINICAN REPUBLIC	DO
E
ECUADOR	EC
EGYPT	EG
EL SALVADOR	SV
EQUATORIAL GUINEA	GQ
ERITREA	ER
ESTONIA	EE
ETHIOPIA	ET
F
FALKLAND ISLANDS (MALVINAS)	FK
FAROE ISLANDS	FO
FIJI	FJ
FINLAND	FI
FRANCE	FR
FRENCH GUIANA	GF
FRENCH POLYNESIA	PF
FRENCH SOUTHERN TERRITORIES	TF
G
GABON	GA
GAMBIA	GM
GEORGIA	GE
GERMANY	DE
GHANA	GH
GIBRALTAR	GI
GREECE	GR
GREENLAND	GL
GRENADA	GD
GUADELOUPE	GP
GUAM	GU
GUATEMALA	GT
GUERNSEY	GG
GUINEA	GN
GUINEA-BISSAU	GW
GUYANA	GY
H
HAITI	HT
HEARD ISLAND AND MCDONALD ISLANDS	HM
HOLY SEE (VATICAN CITY STATE)	VA
HONDURAS	HN
HONG KONG	HK
HUNGARY	HU
I
ICELAND	IS
INDIA	IN
INDONESIA	ID
IRAN, ISLAMIC REPUBLIC OF	IR
IRAQ	IQ
IRELAND	IE
ISLE OF MAN	IM
ISRAEL	IL
ITALY	IT
J
JAMAICA	JM
JAPAN	JP
JERSEY	JE
JORDAN	JO
K
KAZAKHSTAN	KZ
KENYA	KE
KIRIBATI	KI
KOREA, DEMOCRATIC PEOPLE'S REPUBLIC OF	KP
KOREA, REPUBLIC OF	KR
KUWAIT	KW
KYRGYZSTAN	KG
L
LAO PEOPLE'S DEMOCRATIC REPUBLIC	LA
LATVIA	LV
LEBANON	LB
LESOTHO	LS
LIBERIA	LR
LIBYAN ARAB JAMAHIRIYA	LY
LIECHTENSTEIN	LI
LITHUANIA	LT
LUXEMBOURG	LU
M
MACAO	MO
MACEDONIA, THE FORMER YUGOSLAV REPUBLIC OF	MK
MADAGASCAR	MG
MALAWI	MW
MALAYSIA	MY
MALDIVES	MV
MALI	ML
MALTA	MT
MARSHALL ISLANDS	MH
MARTINIQUE	MQ
MAURITANIA	MR
MAURITIUS	MU
MAYOTTE	YT
MEXICO	MX
MICRONESIA, FEDERATED STATES OF	FM
MOLDOVA, REPUBLIC OF	MD
MONACO	MC
MONGOLIA	MN
MONTENEGRO	ME
MONTSERRAT	MS
MOROCCO	MA
MOZAMBIQUE	MZ
MYANMAR	MM
N
NAMIBIA	NA
NAURU	NR
NEPAL	NP
NETHERLANDS	NL
NETHERLANDS ANTILLES	AN
NEW CALEDONIA	NC
NEW ZEALAND	NZ
NICARAGUA	NI
NIGER	NE
NIGERIA	NG
NIUE	NU
NORFOLK ISLAND	NF
NORTHERN MARIANA ISLANDS	MP
NORWAY	NO
O
OMAN	OM
P
PAKISTAN	PK
PALAU	PW
PALESTINIAN TERRITORY, OCCUPIED	PS
PANAMA	PA
PAPUA NEW GUINEA	PG
PARAGUAY	PY
PERU	PE
PHILIPPINES	PH
PITCAIRN	PN
POLAND	PL
PORTUGAL	PT
PUERTO RICO	PR
Q
QATAR	QA
R
RÉUNION	RE
ROMANIA	RO
RUSSIAN FEDERATION	RU
RWANDA	RW
S
SAINT BARTHÉLEMY	BL
SAINT HELENA	SH
SAINT KITTS AND NEVIS	KN
SAINT LUCIA	LC
SAINT MARTIN	MF
SAINT PIERRE AND MIQUELON	PM
SAINT VINCENT AND THE GRENADINES	VC
SAMOA	WS
SAN MARINO	SM
SAO TOME AND PRINCIPE	ST
SAUDI ARABIA	SA
SENEGAL	SN
SERBIA	RS
SEYCHELLES	SC
SIERRA LEONE	SL
SINGAPORE	SG
SLOVAKIA	SK
SLOVENIA	SI
SOLOMON ISLANDS	SB
SOMALIA	SO
SOUTH AFRICA	ZA
SOUTH GEORGIA AND THE SOUTH SANDWICH ISLANDS	GS
SPAIN	ES
SRI LANKA	LK
SUDAN	SD
SURINAME	SR
SVALBARD AND JAN MAYEN	SJ
SWAZILAND	SZ
SWEDEN	SE
SWITZERLAND	CH
SYRIAN ARAB REPUBLIC	SY
T
TAIWAN, PROVINCE OF CHINA	TW
TAJIKISTAN	TJ
TANZANIA, UNITED REPUBLIC OF	TZ
THAILAND	TH
TIMOR-LESTE	TL
TOGO	TG
TOKELAU	TK
TONGA	TO
TRINIDAD AND TOBAGO	TT
TUNISIA	TN
TURKEY	TR
TURKMENISTAN	TM
TURKS AND CAICOS ISLANDS	TC
TUVALU	TV
U
UGANDA	UG
UKRAINE	UA
UNITED ARAB EMIRATES	AE
UNITED KINGDOM	GB
UNITED STATES	US
UNITED STATES MINOR OUTLYING ISLANDS	UM
URUGUAY	UY
UZBEKISTAN	UZ
V
VANUATU	VU
VATICAN CITY STATE	see HOLY SEE
VENEZUELA, BOLIVARIAN REPUBLIC OF	VE
VIET NAM	VN
VIRGIN ISLANDS, BRITISH	VG
VIRGIN ISLANDS, U.S.	VI
W
WALLIS AND FUTUNA	WF
WESTERN SAHARA	EH
Y
YEMEN	YE
Z
ZAMBIA	ZM
ZIMBABWE	ZW

Source : http://www.iso.org

Icon Flags

You can see / get the icon flags of all countries in the world include the name by downloading it for free at http://sites.google.com/site/blogforstorage/blog-for-us-f/famfamfam_flag_icons.zip

As has been described in a previous posts, the country code and icon flags are two main things, if we want to add a language translator into Google Language Translator Gadget.

How to add my language translator into Google Language Translator Gadget (JavaScript)

2010-01-14T23:04:00.000-08:00

In previous posts we've discussed How to install Google Language Translator. In this post, we will discuss How to add a language translator into Google Language Translator.
To add a translation into another language (other than those already there), First we should have a country flag icon in accordance with the laguage to be added..So that our blog visitors can easily choose according to the desired language.
You can easily find the flag icon in internet and download it, just enter the keyword "download icon flag" into Google search box and you'll find so many sites that provide free flag icons.
After finish downloading, you should keep it on the server which can be accessed later. There are so many sites offering free hosting for storing our files, You can learn about it in Using Google Groups and Google Sites as web storage.
The next step, we will learn a Google Language Translation JavaScript Codes. Well, please look at the JavaScript below that I copy from " How to install Google Language Translator." the last paragraph before </form>

<input onclick="this.form.langpair.value=this.value" title="Español/Spanish" value="en|es" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/998398/gse_multipart12407.png" width="30" name="langpair"/>

Español/Spanish ..... This title will apear when we put our mouse cursor above the Flag Icon.
en|es                          ..... This script is meant to translate command from English to Espanol /Spanish (country code)
20                                       ..... Height of the Flag Icon

30                                       ..... Weight of the Flag Icon.
http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/998398/gse_multipart12407.png   ..... Flag Icon Image address

So if you want to add a new translater into Google Language Translator (Indonesia for Example):
1. Log in to Blogger .
2. On your Dashboard, select the Layout menu, and click the Page Element.
3. Click Edit link your Google Language Translator Gadget.
4. Copy the last paragraph of your JavaScipt before </form> and paste right after it.

5. Replace Español/Spanish with Indonesian/Indonesia, en|es with en|id and http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/998398/gse_multipart12407.png with Indonesian's flag icon image address that we've stored before. In this case I change the image addres with http://sites.google.com/site/blogforstorage/blog-for-us-f/id.png
6. If you feel your image flags are to small or to large, you can set it by changing the value of 20 and 30.
7. Don't forget to Save it...

You can find / get the "(english) country code" and "icon flags" of all countries in the world in http://doit2us.blogspot.com/2010/01/lists-of-english-country-names-and-code.html

How to Install Google Language Translation along with The Flag Icon on Blogger

2010-01-04T20:15:00.000-08:00

It would be nice if we put translation facilities into various language on our blog, so that our blog/site can be accessed by entire population of the word.
There are several popular tools online intepreter that's pretty good and free too... Altavista Bable Fish's Translator and Google Language Translator for example.
In this discussion we will learn how to install Google Language Translator along with the flag icon on blogger blog. Google Language Translator is able to translate content into English, Arabic, Chinese, French, Germany, Italian, Japanese, Korean, Portuguese, Russian and Spanish.

Google Language Translator using JavaScript that can be applied to most of blog sites like Blogspot and Wordpress. The core of this tool is a JS Script it self. So for anyone who want to use it, just copy the script below.

If You are Blogger then do as follows:
1. Please login to your Blogger.
2. On your Dashboard choose (click) Layout, and then click Page Elements
3. Make a new gadget by click "Add a Gadget". Adjust selection of "Add a Gadget" in accordance with the Google Language Translator's placement as your plan, (on this blog I put it in the right sidebar on the top).
4. In the windows "Add a Gadget" that appears later, click HTML/JavaScript.
5. Enter the title as you like on the title column. example : Google Language Translation
6. Copy the JavaScript code below and insert in the column content.

<form action="http://www.google.com/translate">

<script language="javascript" type="text/javascript">



</script>

<noscript><input value="http://doit2us.blogspot.com/" name="u" type="hidden"/></noscript>

<input value="id" name="hl" type="hidden"/>

<input value="UTF8" name="ie" type="hidden"/>

<input value="" name="langpair" type="hidden"/>

<input onclick="this.form.langpair.value=this.value" title="Arabic" value="id|ar" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/358406/gse_multipart12399.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="中%u6587%uFF08%u7B80%u4F53%uFF09/Chinese (Simplified)" value="id|zh-CN" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/546049/gse_multipart12397.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="中%u6587%uFF08%u7E41%u4F53%uFF09/Chinese (Traditional)" value="id|zh-TW" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/208681/gse_multipart12398.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Français/French" value="id|fr" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/327620/gse_multipart12413.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Deutsch/German" value="id|de" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/734899/gse_multipart12400.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Italiano/Italian" value="id|it" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/306145/gse_multipart12401.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="日%u672C%u8A9E/Japanese" value="id|ja" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/443122/gse_multipart12402.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="한%uAD6D%uC5B4/Korean" value="id|ko" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/581031/gse_multipart12403.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Português/Portuguese" value="id|pt" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/670301/gse_multipart12404.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Р%u0443%u0441%u0441%u043A%u0438%u0439/Russian" value="id|ru" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/111692/gse_multipart12405.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Español/Spanish" value="id|es" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/998398/gse_multipart12407.png" width="30" name="langpair"/>

</form>

7. After finished, change blog addres http://doit2us.blogspot.com into yours. And don't forget to save it.

Congratulations, You have your blog intepreter facilities now...!!! To add translation into another language (eg English) along with the flag icons than we must have a little knowledge about the JavaScript codes that used, Do not imagine a complex code, it is very simple and we will discuss further in How to add a Language Translator into Google Language Translator.

List of Blogger bX-Error Codes

2009-12-28T20:21:00.000-08:00

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

bX-ssciez
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.

bX-1x36wx

Post Page comment error

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

bX-q8mnbv

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.

bX-lhziiw

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:
http://knownissues.blogspot.com/2009/09/2137567.html

bX-u01hr1

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.

bX-xovb7t

Invalid Post Template

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

bX-pu7aaj

Known Issue

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

bX-r1ezpk

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.

bX-bce8517c

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.

bX-e441ek

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.

bX-uxu3fu

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.

bX-tgu0qs

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.

bX-i54acw

Error uploading your photo

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

bX-9pjt6o

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.

bX-2f00qm
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...

bX-dw5843

Unable to Update Profile

We are aware of this issue and working on a fix.

bX-dalets
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.

bX-gfz536
There was an error
Please try again later.

bX-6gfpx3
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)."

bX-w0b81c
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.

bX-kewlk9

Video Processing Error

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

bX-2bdp09

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:
google_ad_host="pub-1556223355139109";
Thank you for your patience.

bX-hqxd1g

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.

bX-mq2of1

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.

bX-7auoq8

Photo uploading is temporarily not working

This should be fixed in half an hour. Please try again later.

bX-resilr

Secret error for clever people

Move along. Nothing to see here.

bX-1zu2vy

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.

bX-gcdngf

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.

bX-sp4hmm

Template Tag Error

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

bX-aw21o0

Blog Cannot be Displayed

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

bX-rfg2oe

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.

bX-h94xv

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.

bX-ot8any

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.

bX-gi5hu8

Error Saving editor preferences

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

bX-68tbuv, bX-yvtdin
Error uploading to beta.blogger.com
This error comes from uploading an image to beta.blogger.com.
Please login through www.blogger.com and update any bookmarks you have to change beta.blogger.com to www.blogger.com.

bX-rr85sd

Test Error

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

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

2009-12-28T00:22:00.000-08:00

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="doit2us.blogspot.com">Home</a> | <a href="http://www.blogger.com/profile/07471629071890951823">About Me</a> | <a href="mailto:mc4tur@gmail.com">Contact</a>

and the result will look as follows:

Home | About Me | Contact

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)

2009-12-16T22:36:00.000-08:00

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

2009-12-03T23:53:00.000-08:00

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/vnd.microsoft.icon'/>

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

2009-11-25T23:37:00.000-08:00

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"

2009-11-24T21:53:00.000-08:00

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 * http://download.cnet.com/XHeader/3000-2191_4-10900367.html : 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 {
width:660px;
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

2009-11-21T02:10:00.000-08:00

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. "http://sites.google.com/site/blogforstorage/blog-for-us-f" (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 http://sites.google.com/site/blogforstorage/blog-for-us-f/rainbow.js

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

<head>

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='http://sites.google.com/site/blogforstorage/blog-for-us-f/rainbow.js'></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

2009-11-21T00:12:00.000-08:00

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.

Google Groups

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

2009-11-17T18:18:00.000-08:00

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

2009-11-12T23:51:00.000-08:00

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 :

http://www.iconico.com/download.aspx?app=ColorPic&type=free

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 {
width:660px;
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 {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;

background:#FF0000;
}

Save Template and view your blog..

This is before

After

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

2009-11-12T09:01:00.000-08:00

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

Header
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'/>
</b:section>
</div>

And Script CSS below:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
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;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

Sidebar
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'/>
</b:section>
</div>

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 {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

.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'/>
</b:section>
</div>

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 */
}

Footer
Blogger setting Footer from these lines code, below...

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

And

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
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

2009-11-11T20:42:00.000-08:00

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

Use Your Blogger for Autoblog

2009-11-10T09:47:00.000-08:00

Do you know what autoblog is? Autoblog is a term that used on the blog that works automatically. Well .. actually it's only automatically referred to the articles. But that's the point...!!! We all know, how important to write articles regularly on our blog (though not necessarily every day). Do you know what's the name of a blog that does not have new content for a long time..? Yup.. it's a Dead Blog...

The simple word about Autoblog is...You initially create a blog, and set your template display as you like, then do automation and... finished. You only need occasionally visiting to ensure everything goes normally. How.. sweet it's sound...

Unfortunetly, the truth is not as sweet as that. The blog that filled with content automatically. unreliable in terms of quality articles, vulnerable from advertisement, Google hate it and most of your visitors too (if they know it) ... Imagine that you had communication with the machine, it was not interesting at all.

But... still very useful for your Dummy Blogs , your Dead Blog and off course our free and powerful Backup Blog

Ok.. it's enough with the preamble...
1. First we must create a blogger blog to be an autoblog. Let's name it Blog Tester (you can name it whatever you like).
2. After finish it, Look at your Dashboard and Click Settings. Under Settings Menu, Click Email & Mobile. Now let's look at Posting Option...

3. Replace your secretWords with whatever you desire, just remember it.. and select the Publish emails immediately , than Click SAVE SETTING.
In my case it's look like this :

Ok.. we're finish Step 1.
4. Before we do the automation of writing the article, first..we must have URL of the blog that will become the source of the article. You can do a little research later, to make it easy, let's use your other blogger blog address. As an example, I use my blog that contains about free articles at http://peter-freearticles.blogspot.com.
5. Open Feed My Inbox and insert the URL address of the site that we will "use" they articles, and the email address that we'd already make (#3) and then click submit. Oh.. Ya.. don't forget to put "/" at the end of URL. ie. http://peter-freearticles.blogspot.com/

Than we will get the confirmation..

6. Because an email address that we used before was the email bloggers, and we had already arranged that any incoming email to that address will be publish immediately in to the blog, So if everything works properly, then a confirmation email from this FeedMyInbox will immediately appear as an article in our new blog.
7. Let's take a look at the blog, and this is mine..

8. To confirm our subscribtion, than we must Click the First Link.. After click to confirm the subscribtion, you will receive notification from Feed My Inbox (pop up) that you have successfully done the subscribtion.
9. Sometimes we have to wait for a few hours before our Autoblog's working noormally (instant delivery process). Because the FMI requires to make a synchronization first. But after that it will run charming .. Picture below show my "ghost writer".. nice and clever isn't it...??

That's all folk... Every time your "host blog" publish their article, your "ghost writer" will do exactly the same.
So...don't worry, Enjoy your holiday.. and hapy Autoblog...

Solution For Error bX-ob6b7r and Bloger Blog Post (Please correct the error of this form)

2009-11-09T01:11:00.000-08:00

After being confused for several day by Error of bX-ob6b7r and Bloger Blog Post (Please correct the error of this form), finally I found the way to make it clear...
Actually the problem of bX-ob6b7r and Bloger Blog Post (Please correct the error of this form) because of bloggers blog post widget does not working properly.
Like other widgets, blogger blog post widgets should be able to edit as long as we know it, what and where is the position is.. By deleted the widget and replaced with new ones, we hope everything will function normally again.

So here we go..
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. First we must find the Blog Post Widget inside our blog HTMLL,, that represent with this script code below :

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

4. Replace the number of 1 in Blog1 with 2, we can replace the number with 3, 4 or whatever you like, This number figure (Blog1) is not the number of Blog Post Widget but the name of it.
So if we want to make two Blog Post Widget in our template, we can ad another green script code with different name Blog ,.. Example:

<b:widget id='Blog2' locked='true' title='Blog Posts' type='Blog'>
<b:widget id='Blog3' locked='true' title='Blog Posts' type='Blog'>

5. Back to the topic, after replace the the number than click the save button..
6. If we done it correctly, than we will get a warning message like this (couse we replace Blog Post Widget "Blog1" with Blog Post Widget "Blog2") :

Just click the "CONFIRM & SAVE".button.
7. That's all.. We can edit our Blogger Blog Post again and seting our adsense without Error of bX-ob6b7r and Bloger Blog Post (Please correct the error of this form)...

Update : If you got another bX-error codes, then you can find "what's wrong?" at List of Blogger bX-error codes.