Blogger Widget and Tips-Tricks

2007-11-22T20:17:00.000-08:00

this is test for bloggar tools
This is test for write and post foto through the wbloggar toos. This line is paraghraph example line 1
And this is example for line sentence when enter keyboard is pressed.

This is sample for li line 1

This is sample for li line 2

This is sample for li line 3

This is sample for ol line 1

This is sample for ol line 2

This is sample for ol line 3

Incredibly easy step to Remove the Blogger Navbar

2007-06-25T06:44:00.000-07:00

This step is incredibly easy. Simply copy and paste the following piece of code directly above the #header-wrapper line in the ‘Edit HTML’ view of your blog:

#navbar-iframe {

height: 0px;

visibility: hidden;

display: none;

}

Save the template and you’re done!

Note: Removing the Navbar is possibly against the Blogger Terms of Service. On their site, they state that the Navbar may be removed for those publishing via FTP to their own server. They do not explicitly state that other users can not do it too. Furthermore, the fact that they allow you to edit the HTML of your blog gives the impression that you can display your blog as you wish. But there is no definitive answer. You’ve been warned!

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>

<b:widget id='Header1' locked='false' title='blogtitle (Header)' type='Header'/>

</b:section>

</div>

Save it and you’re done! You should now be able to add a picture to the header. Be careful with the size of your picture. I’ve found that if the picture is too big, it won’t display. If your picture doesn’t display, try reducing the size.

That’s how easy it is!

Guide to HTML - HTML TAGS (part 1)

2007-06-23T07:53:00.000-07:00

This Tutorial will explain any details about how to use the various tags in your blog. You can use the HTML script here in your blog with make standard step.

It is try to design to be as concise as possible. Nevertheless in order to make you comfort read them, I divide this tutorial into 5 parts.

HTML script will you need if you want to make some creation in your post or to modify your template

NOTE: Use the link within HTML Guide Tag in the left-side bar in this page. Use following navigator tag to go to the link preferred by you

BASIC ELEMENTS

Document Type	<HTML></HTML>	(beginning and end of file)
Title	<TITLE></TITLE>	(must be in header)
Header	<HEAD></HEAD>	(descriptive info, such as title)
Body	<BODY></BODY>	(bulk of the page)

STRUCTURAL DEFINITION

	Heading	<H?></H?>	(the spec. defines 6 levels)
	Align Heading	<H? ALIGN=LEFT\|CENTER\|RIGHT></H?>
	Division	<DIV></DIV>
	Align Division	<DIV ALIGN=LEFT\|RIGHT\|CENTER\|JUSTIFY></DIV>
4.0	Defined Content	<SPAN></SPAN>
	Block Quote	<BLOCKQUOTE></BLOCKQUOTE>	(usually indented)
4.0	Quote	<Q></Q>	(for short quotations)
4.0	Citation	<Q CITE="URL"></Q>
	Emphasis	<EM></EM>	(usually displayed as italic)
	Strong Emphasis	<STRONG></STRONG>	(usually displayed as bold)
	Citation	<CITE></CITE>	(usually italics)
	Code	<CODE></CODE>	(for source code listings)
	Sample Output	<SAMP></SAMP>
	Keyboard Input	<KBD></KBD>
	Variable	<VAR></VAR>
	Definition	<DFN></DFN>	(not widely implemented)
	Author's Address	<ADDRESS></ADDRESS>
	Large Font Size	<BIG></BIG>
	Small Font Size	<SMALL></SMALL>
4.0	Insert	<INS></INS>	(marks additions in a new version)
4.0	Time of Change	<INS DATETIME=":::"></INS>
4.0	Comments	<INS CITE="URL"></INS>
4.0	Delete	<DEL></DEL>	(marks deletions in a new version)
4.0	Time of Change	<DEL DATETIME=":::"></DEL>
4.0	Comments	<DEL CITE="URL"></DEL>
4.0	Acronym	<ACRONYM></ACRONYM>
4.0	Abbreviation	<ABBR></ABBR>

Guide to HTML : INTRODUCTORY MATERIAL

2007-06-23T06:45:00.000-07:00

Several people have created excellent HTML guides and made them available on the Web -- who needs another one?

The Guide is designed to be as concise as possible, and therefore it doesn't go into any detail about how to use the various tags. A few tags link to notes that address frequently-asked questions. If you're looking for more detailed step-by-step information

What is unique about this guide

Which HTML tags are included

How this document is formatted (including a description of symbols and abbreviations)

XML Beginner's Guide : Where I can find XML FAQ, Tutorials, and Articles?

2007-06-23T06:27:00.000-07:00

These following links contain XML Beginner's Guide, including XML FAQ, XML Tutorials, and XML Article.

XML FAQ, Tutorials, and Articles

XML FAQ

XML Specifications

XML Schema Part 0: Primer

XML Schema Part 1: Structures

XML Schema Part 2: Datatypes

Blogger Widget : Page Elements Tags for Layouts

2007-06-23T05:12:00.000-07:00

The <body> section of a Layouts template will be made up primarily of sections and widgets. Sections mark out areas of your page, such as the sidebar, the footer, etc. A widget is an individual page element such as a picture, a blogroll, or anything else you can add from the Page Elements tab. You can include any HTML you like around the sections in your template.

Each section in your template will have an opening and a closing tag, looking something like this:

<b:section id='header' class='header' maxwidgets="1" showaddelement="no"> </b:section>

A <b:section> tag can have the following attributes:

id - (Required) A unique name, with letters and numbers only.

class - (Optional) Common class names are "navbar," "header," "main," "sidebar," and "footer." If you switch templates later, these names help Blogger determine how best to transfer over your content. However, you can use different names, if you like.

maxwidgets - (Optional) The maximum number of widgets to allow in this section. If not specified, then there is no limit.

showaddelement - (Optional) Can be "yes" or "no," with "yes" as the default. This determines whether the Page Elements tab will show the "Add a Page Element" link in this section.

growth - (Optional) Can be "horizontal" or "vertical," with "vertical" as the default. This determines whether widgets within this section are arranged side-by-side or stacked.

In your published blog, all <b:section> tags will be replaced with <div> tags, which will have the specified ID. So you are welcome to refer to, for example, div.header in your CSS if you want to.

A section can only contain widgets; it cannot contain other sections or other code. If you need to insert extra code between or around certain widgets within a section, you'll need to split the section into two or more new sections.

In its simplest form, a widget is represented by a single tag, which is basically just a placeholder indicating how the widget should be handled in the Page Elements tab. The actual data for any given widget is stored in the Blogger database and only accessed when the widget needs to be displayed. Some examples of widgets (one for a page header and one for a list) are the following:

<b:widget id="header" type='HeaderView' locked="yes"/> <b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>

A widget may have the following attributes:

id - (Required) This may contain letters and numbers only, and each widget ID in your template should be unique. A widget's ID cannot be changed without deleting the widget and creating a new one.

type - (Required) This indicates what kind of a widget it is, and should be one of the valid widget types listed below.

locked - (Optional) Can be "yes" or "no," with "no" as the default. A locked widget cannot be moved or deleted from the Page Elements tab.

title - (Optional) A display title for the widget. If none is specified, a default title such as "List1" will be used.

pageType - (Optional) Can be "all," "archive," "main," or "item," with "all" as the default. The widget will only display on the designated pages of your blog. (All widgets display on the Page Elements tab, regardless of their pageType.)

The types of widgets you can specify are:

BlogArchive
Blog
Feed
Header
HTML
SingleImage
LinkList
List
Logo
BlogProfile
Navbar
VideoBar
NewsBar

Each widget can also be written out in an expanded form, detailing the complete layout and contents for that widget. This is what you'll see, for instance, if you download your template from the Edit HTML tab to make a backup. Usually, you won't need to work with widgets in this mode, since it's simpler to just modify them from the Page Elements tab. However, if you want to know more, you can read about the detailed widget tags.

Note: In your published blog, all <b:section> and <b:widget> tags will be replaced with <div> tags, which will have the specified ID. So you are welcome to refer to, for example, div#header or div#myList in your CSS if you want to.

Layouts Data Tags

2007-06-23T04:22:00.000-07:00

As mentioned in the Widget Tags for Layouts article, there are many different tags you can use to include specific pieces of data in your template. They will all be formatted as <data:name/> or <data:name1.name2/>, where name is the name of the particular piece of data you want to use. In the name1.name2 example, name2 is a particular item within a set of data called name1, e.g. photo.url.

This is a master list of all such available data. It is divided into sections by page element, because different types of widgets use different data.

Globally Available Data

Page Header

Blog Posts

Blog Archives

Profile

Text / HTML / JavaScript

Feed

Picture

Labels

List

Link List

Logo

Globally Available Data

This information applies to the entire page, so you can use it anywhere, unlike other data which can only be used in a specific widget. These should be referenced as part of the overall "blog" data, e.g. as <data:blog.title/>, etc.

title: The blog's title.

pageType: The type of the current page. One of 'item', 'archive', or 'index'.

url: The URL of the current page.

homepageUrl: The homepage of the blog.

pageTitle: The title of the current page. This is often the blog title, but may contain additional information on archive or post pages.

encoding: The encoding to use for the blog, e.g. UTF-8.

feedLinks: The autodiscovery feed links for the page header.

Back to the top.

Page Header

This is a simple widget with just two pieces of data. They can be referenced simply as <data:title/> and <data:description/>.

title: The blog's title.

description: The blog's description.

Back to the top.

Blog Posts

This is the central part of any blog, and the most complex. You should definitely consider simply making modifications to one of the default templates before writing a blog posts widget from scratch. But however you want to do it, here's all the data available in this widget.

feedLinks: A list of feeds for this page. On the main page, this will contain the main blog feeds; on item pages, this will also contain comments feeds. Each item in this list contains the following:
- url: The feed URL.
- name: The feed name (i.e. 'Posts' or 'Comments').
- feedType: The type of feed (Atom or RSS).
- mimeType: The mime type of the feed.
olderPageUrl: If there are older posts than the ones on the current page, this is a URL to those posts. Context-sensitive for page type. (Not all pages will have this link.)

olderPageTitle: Title of the link to the older page of posts.

newerPageUrl: The newer equivalent of olderPageUrl.

newerPageTitle: The newer equivalent of olderPageTitle.

commentLabel: The phrase to use to show the number of comments, e.g. "comments."

authorLabel: The phrase to use to indicate who wrote the post, e.g. "posted by."

timestampLabel: The phrase to use to indicate when the post was written, e.g. "posted at."

postLabelsLabel: Phrase to introduce the list of post labels, e.g. "labels for this post."

backlinksLabel: Phrase to describe backlinks to this post, e.g. "links to this post."

posts: A list of all posts for this page. Each post contains the following:
- dateHeader: The date of this post, only present if this is the first post in the list that was posted on this day.
- id: The numeric post ID.
- title: The post's title.
- body: The content of the post.
- author: The display name of the post author.
- url: The permalink of this post.
- timestamp: The post's timestamp. Unlike dateHeader, this exists for every post.
- labels: The list of the post's labels. Each label contains the following:
  - name: The label text.
  - url: The URL of the page that lists all posts in this blog with this label.
  - isLast: True or false. Whether this label is the last one in the list (useful for placing commas).
- allowComments: 'True' if this post allows comments.
- numComments: The number of comments on this post.
- showBacklinks: Whether to show backlinks for this post.
- numBacklinks: Number of backlinks for this post.
- addCommentUrl: The URL of the 'add a comment' form for this post.
- emailPostUrl: The URL of the 'email this post' form for this post.
- editUrl: The URL of the edit form for this post.
- feedLinks: A list of feeds specific to this post. (This is different from the overall blog feedLinks, as it may contain a feed for the post's comments, for instance.) Each contains the following:
- - url: The feed URL.
  - name: The feed name (e.g. 'Posts' or 'Comments').
  - feedType: The type of feed (Atom or RSS).
  - mimeType: The mime type of the feed.
- comments: A list of all comments for this post (on item pages only). Each contains the following:
  - id: The numeric ID of the comment.
  - body: The body of the comment.
  - timestamp: The time the comment was created.
  - author: The display name of the comment's author, or 'Anonymous'.
  - authorUrl: URL of the comment author's profile, if the comment is not anonymous.
  - deleteUrl: The URL for deleting this comment.
  - isDeleted: Whether this comment has been deleted. (The text of deleted comments is replaced with a placeholder.)

Back to the top.

Blog Archives

The different styles provided here are for the different default options on the Page Elements tab. If you're designing a new version, it's easiest to use 'FLAT' as the style, and then manipulate the rest of the data as desired.

title: The title of the widget.

style: One of 'MENU', 'FLAT', or 'HIERARCHY'.

data: A list of each archive unit, each of which contains:
- name: The name of this archive interval, e.g. "August 2006."
- url: The link to the page containing posts from this interval.
- post-count: How many posts there are in this interval.

Back to the top.

Profile Widget

For a blog with a single author, the profile widget contains the following information. Note that to access different parts of the photo data, you'll use notation such as <data:photo.url/>.

title: The title of the widget.

userUrl: The author's profile URL.

location: The location from the author's profile.

aboutme: The "About Me" information from the profile.

displayname: The author's display name.

photo: The user's profile photo, made up of the following:
- url: The photo URL.
- width: The photo's width, in pixels.
- height: The photo's height, in pixels.
- alt: The "alt" text for the photo.

On team blogs, the profile widget contains less information about more authors, as follows.

title: The title of the widget.

authors: The list of all authors, each of which contains the following:
- displayname: The author's display name.
- userURL: The author's profile URL.

If you want to design your template to handle both single- and multiple-author blogs, you can use the data:team variable to distinguish between the two cases. E.g. <b:if cond='data:team=="true"'> (display multiple authors) </b:if>

Back to the top.

Text / HTML / JavaScript Widget

The Text widget and the HTML/JavaScript widget work the same way and have the same two pieces of data.

title: The widget's title.

content: The content of the widget.

Back to the top.

Feed Widget

A feed widget contains, in addition to its own information, a list called feedData, which contains all the items in the feed. Each of those items in turn contains various pieces of information about themselves. When referencing this kind of data, you'll need to loop through each item in the list, with something like <b:loop var="i" values="feedData.items">. Then use notation such as <data:i.title/> or <data:i.alternate.href/> to get the information for each item.

title: The widget's title.

feedUrl: The URL of the feed.

feedData: The items in the feed, each of which contains:
- title: the item title.
- str_published: When the item was published (nicely formatted in blog's timezone).
- published: When the item was published (in seconds since epoch).
- str_updated: When the item was last updated (nicely formatted in blog's timezone).
- updated: When the item was last updated (in seconds since epoch).
- author: The item's author.
- summary: A snippet from the item, if available.
- alternate: Where to get more information about this item, which contains:
  - href: The permalink of this item.
  - type: The content-type of this item.

Back to the top.

Picture Widget

A picture widget contains a single image, and provides all the relevant data for that image.

title: The title of the widget.

sourceUrl: The URL of the image.

width: The image's width, in pixels.

height: The image's height, in pixels.

caption: The image caption.

Back to the top.

Labels Widget

The labels widget includes a list of all labels that are in use on the blog.

title: The widget title.

labels: The list of labels, each of which contains:
- name: The text of the label.
- count: How many posts have this label.
- url: A link to a page displaying posts with this label.

Back to the top.

List Widget

The simplest form of a list. Each item is just a single piece of text, without any different types of data within it.

title: The widget title.

items: The list of items.

Back to the top.

Link List Widget

A slightly fancier list, where each item has two parts to it: the text and the link.

title: The widget title.

links: The list of links, each of which contains:
- name: The link's text.
- target: The link's URL.

Back to the top.

Logo Widget

It doesn't get any simpler than this one. Just one piece of data here.

fullButton: The URL of the Blogger button you've selected.

Back to the top.

Widget Tags for Layouts

2007-06-23T03:44:00.000-07:00

The basic tags for creating widgets are described in Page Element Tags for Layouts. If you just want to use the Page Elements tab to work with everything, then that's all you need to know. However, if you want more fine-grained control, this article describes what you can put inside a widget, if you're working in the "Expand Widget Templates" mode of the Edit HTML page.

The first thing to do is to add a closing tag. So this:

<b:widget [...attributes...] />

becomes this:

<b:widget [...attributes...]>

</b:widget>

Includes

Widget content is contained in "includable" sections, which have this format:

<b:includable id='main' var='thiswidget'>

[insert whatever content you want here]

  </b:includable>

The attributes are as follows:

id: (Required) A unique identifier made up of letters and numbers.
var: (Optional) An identifier made up of letters and numbers, for referencing data within this section. (See the data section below.)

Each widget must have one includable with id='main'. This will usually contain most or all of the content that will display for this widget, and in many cases it will be all you need. If you make more includables with different IDs, they will not be displayed automatically. However, if you make an includable with id='new',then you can reference it in your main includable with <b:include name='new' /> and it will display that way. The attributes for the b:include tag are as follows:

name: (Required) An identifier made up of letters and numbers. It must match the ID of an existing b:includable in the same widget.
data: (Optional) An expression or peice of data to pass on to the includable section. This will become the value of the var attribute in the includable.

Here is a simple example demonstrating the use of b:includable and b:include. Loops and data are described later in this article. The main thing to understand here is how the "main" section includes the "post" section within it. It passes along a post that it calls "i" and the included section references it as its var "p", then prints the title.

<b:includable id='main'>

 <b:loop var='i' values='posts'>

    <b:include name='post' data='i'/>

 </b:loop>

</b:includable>


<b:includable id='post' var='p'>


 Title: <data:p.title/>

</b:includable>

Includes are most useful if you have a section of code that you want to repeat multiple times in different places. You can just write the code once, put it inside a b:includable, then use b:include wherever you want it to appear. If you don't need to do that, then you can just stick with the single main includable and not worry about the rest. (Note that the main includable is included automically -- <b:include name='main'/> is unnecessary.)

Data

The data: tag is arguably one of the most important ones, since it's the avenue that brings in all of your actual content. Some examples of this tag are:

<data:title/>

or

<data:photo.url/>

The first example is simplest, and will work in most widgets, since most widgets have titles. All it does is print out the title of the widget. The second example shows a more complex variable, from which we select a particular component. A photo, say in the context of a profile widget, may have components such as url, height, and width. Using the "." notation indicates that we want the URL for this photo, rather than a URL from something else.

There is a great deal of data that you can access with the data: tag, and it varies depending on which widget you're working with. We've got a comprehensive list to help you find the data you need.

Loops

The b:loop tag lets you repeat a section of content multiple times. This is most commonly used for printing out each post in a list of posts for a given page, or each comment, or each label, etc. The general format for using loops is this:

<b:loop var='identifier' values='set-of-data'> [repeated content goes here] </b:loop>

The 'identifier' part can be any name you choose, and will be used to stand in for each new item in the list, each time through the loop. A common convention is to simply call this "i". The set of data you specify for the values can be any piece of data described in the data tags article as being a list of items. For instance, in the blog posts widget, posts is a list. Code like the following will loop through each post, printing out the title for each one, with header tags around it.

<b:loop var='i' values='data:posts'> <h2><data:i.title/></h2> </b:loop>

Notice how "i" takes on the value of each post in turn, so you can get the title from each one.

If / Else

You can use the b:if and b:else tags to display content in some places but not others. The general format is this:

<b:if cond='condition'> [content to display if condition is true] <b:else/> [content to display if condition is false] </b:if>

The b:else tag is optional. Without it, the result will be either the content listed in the b:if section or nothing. The closing </b:if> is required in each case, however.

For "condition" you can put in anything that evaluates to either true or false. Some data tags are simply true/false values on their own, e.g. allowComments on a post. With other pieces of data, you can compare them with specific values to get a true or false. Here are some examples:

<b:if cond='data:post.showBacklinks'> True if the current post is set to show backlinks.

<b:if cond='data:blog.pageType == "item"'> True if the current page is an item page (post page).

<b:if cond='data:displayname != "Fred"'> True if this is not Fred's display name.

<b:if cond='data:post.numComments > 1'> True if the current post has more than one comment.

How do I create new widgets for other people to add to their layouts?

2007-06-23T03:16:00.000-07:00

This is still from blogger support guiding about adding new widget in blogger template.

The Layouts feature of Blogger opens up all sorts of new possibilities for people to customize their blogs in interesting ways. And even better, you can design new widgets or modules for others to add to their own blogs.

Here's the general concept:

First, design your widget. Then, on your website, create a form that sends its results to Blogger. In that form you include the content of the widget you've created, and maybe some other optional information. When someone clicks the "submit" button on your form, they'll be taken to Blogger where they can add your widget into their blog's layout (like this).

Let's look at a simple example to start with. The following code provides the user with a single button, labeled "Add Blogger Buzz Widget." Clicking that will let them add a widget to their layout that links to the official Blogger Buzz blog.

<form method="POST" action="http://www.blogger.com/add-widget"> <input type="hidden" name="widget.title" value="Blogger Buzz"/> <input type="hidden" name="widget.content" value="<a href='http://buzz.blogger.com/'>Read the Latest Blogger News!</a>"/> <input type="hidden" name="widget.template" value="<data:content/>" /> <input type="hidden" name="infoUrl" value="http://buzz.blogger.com"/> <input type="hidden" name="logoUrl" value="http://www.blogger.com/img/icon_logo32.gif"/> <input type="submit" name="go" value="Add Blogger Buzz Widget"/> </form>

You'll notice that blogger used hidden input fields here, because blogger don't want the user to change any of the information; blogger want everyone to get the same widget. You could have easily used other kinds of form fields if, for instance, you wanted the user to enter a title for the widget themselves. It's the name attributes of the form fields that are important, rather than the type attributes.

The important parts of the form are the following:

form action="http://www.blogger.com/add-widget" - (Required) Your form must submit its information to this URL in order for it to be handled properly by Blogger. Blogger recommend using the POST method to submit, but GET also works, if you don't have too much data in your widget.
widget.title - (Optional) The title you specify will display in the user's Page Elements tab when they edit their layout. It will also be shown as part of the default widget template. The title can be up to 100 characters long, and may contain well-formed HTML.
widget.content - (Required) This is the actual content of your widget, which will be displayed on the user's blog. It can include almost any well-formed code that you want, except for <html> and <body> tags. Note, however, that you will need to escape the code, as in the example above (e.g. <a> becomes <a>)./ul>
widget.template - (Optional) This should follow the widget tag guidelines. You can also use any of the globally available data tags. If no template is specified, it uses as a default.
infoURL - (Optional) You can use this to specify a page on your site that describes your widget or gives other information about it. It will be used as a "more info" link on the setup page people see when adding your widget.
logoURL - (Optional) You can add an image URL here, and the image will be displayed next to the "more info" link. It should be thumbnail sized (i.e. less than 100x100 pixels).

Now that Blogger has got the basic idea, let's take a look at a more interesting example.

<form method="post" action="http://www.blogger.com/add-widget">    <input type="hidden" name="infoUrl"        value="http://flickr.com"/>           <input type="hidden" name="logoUrl"        value="http://www.flickr.com/images/flickr_logo_gamma.gif"/>           <input type="hidden" name="widget.title" value="Puppies!"/>        <textarea name="widget.content" style="display:none;">    &lt;/a><div id='flickr_badge_wrapper'>    <script type='text/javascript'     src='http://www.flickr.com/badge_code_v2.gne?show_name=1&    count=3&display=latest&size=t&layout=x&source=all_tag&amp;    tag=puppy'></script&gt;    <span id='flickr_badge_source_txt'&gt;More     <a href='http://www.flickr.com/photos/tags/puppy/'&gt;    Flickr photos tagged with puppy&lt;/a></span&gt;    <br clear='all' /></div>    </textarea>        <input type="hidden" name="widget.template"        value="&lt;data:content/> />      <input type="submit" name="go" value="Add Puppy Photos"/>  </form>

In this case, Blogger went to Flickr.com to browse photos tagged with "puppy." Then blogger made a Flickr Badge out of it so blogger could display a stream of recent photos in the collection on blogger blog. Ordinarily, blogger would just take the badge code and put it in an HTML/Javascript widget on blogger own blog and blogger should be done. However, here blogger decided to help out other people who might want to do the same thing. So blogger put the badge code into the widget.content section of this form, and added the Flickr logo and link. Now, anyone else can use this form to easily add puppy photos to their blog with the click of a button.

And that's just the tip of the iceberg. From here, you can design anything else you like. Just be creative, have fun, and see what you can come up with!

P.S. If you want a nice little button to use on your form, try one of these:

http://www.blogger.com/img/add/add2blogger_sm_w.gif

http://www.blogger.com/img/add/add2blogger_sm_b.gif

http://www.blogger.com/img/add/add2blogger_lg.gif

How do I add third-party page elements to my layout?

2007-06-23T03:07:00.000-07:00

This Guide about how to create new page element in layout that we want can share wiith other user. I have try to find this guide. Fortunately, thanks to Blogger support, they have ready this in blogger help. You can find also this guide if you write " layout" keyword in blogger support text box.

Blogger allows people to create new page elements for their layouts that they can then share with other users. So if you're on another site and enounter a button that says [+Blogger] or [Add to Your Blog] then that's what it's all about.

If you click on such a button, you should be prompted to log in to Blogger (if you aren't already logged in) and then you can select one of your blogs. You'll also see the title, content and template for the new page element, which you can edit if you want. A logo and "more info" link may also be present to tell you more about where this page element comes from, who created it, and what it does.

By clicking the [Add Page Element] button on this screen, you will be adding code to your blog. So it's important to make sure you either trust the source of this code, or have reviewed it to make sure it's something you're willing to have on your blog.

Once you've added the page element, it will appear on the Template | Page Elements tab for your blog, where you can edit, move, or delete it, just like the other parts of your page.

Relate Link:

How do I create new widgets for other people to add to their layouts?

Blogger Widget ; Installing the API Google Search types (video, text, and map) to your blog

2007-06-16T22:38:00.000-07:00

Looking for guide to installing Google API Search???. Loking for Blogging Widget???. Below is instruction on how to install the API Google Search types (video, text, and map) to your blog. This point instruction is provide by Hoctro's Place, one of Blogger Masterpieces.

Oke, this is the widget;

Step 1: Get the API key from http://code.google.com/apis/ajaxsearch/signup.html. It's quite simple to get one, really.

Step 2: Add the CSS and code to the header, right after the ] ] > tag.
Replace the text in bold in 2 places with you own API key.

To make your installation/test easier, download the template here, aftr download to your Pc, then upload it to your blog in Edit HTML->Upload, and safely skip step 2->4. (But you still have to replace the key to your own.) :

Step 3: Add these new 5 widgets to your blog, following instructions here, section B.4.

<b:widget id='HTML31' locked='false' title='Search Bar' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='searchform'>Loading...</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='HTML32' locked='false' title='Video Bar' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='videoBarDiv'>Loading...</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='HTML33' locked='false' title='Search Results' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='searchControl'>Loading...</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='HTML34' locked='false' title='Map Search' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='mapsc'>Loading...</div>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='HTML35' locked='false' title='Google Video Search' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='videosc'>Loading...</div>
<data:content/>
</div>

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

Step 4: Move around the widgets in Page Elements so that it looks like this. This is how we have a little freedom in moving the search widgets around if need be.

Notice sometimes you'll see this prompt, don't worry, just click OK.

To enhance our flexibilities in changing search items for the map and the video bars, two more steps are required.

Step 5: Adding contents to the Map Widget: cut and paste this code to the content of the Map Search widget :

<font color="brown">
<h3 class="sidebar-subtitle">A few great places</h3>
<div id="hotspots">
<ul class="hotspots">
<li id="hs01">Sushi</li>
<li id="hs02">Pho</li>
<li id="hs03">Book store</li>
<li id="hs04">Italian Food</li>
<li id="hs05">Jeannine's</li>
<li id="hs06">Cava</li>
<li id="hs07">SanYsidroRanch</li>
<li id="hs08">Sunstone</li>
<li id="hs09">Melville</li>
<li id="hs10">PhysicalFocus</li>
</ul>
</div>
<script type="text/javascript">
var hotspotsList = [
{ element : document.getElementById("hs01"), query : "Sushi" },
{ element : document.getElementById("hs02"), query : "Pho" },
{ element : document.getElementById("hs03"), query : "Book Stores" },
{ element : document.getElementById("hs04"), query : "Italian Food" },
{ element : document.getElementById("hs05"), query : "Jeannine's" },
{ element : document.getElementById("hs06"), query : "Cava Restaurant & Bar" },
{ element : document.getElementById("hs07"), query : "San Ysidro Ranch" },
{ element : document.getElementById("hs08"), query : "Sunstone Winery" },
{ element : document.getElementById("hs09"), query : "Melville Winery" },
{ element : document.getElementById("hs10"), query : "Physical Focus" }
];
</script>
</font>

Step 6: Adding contents to the Video Widget: cut and paste this code to the content of the Video Search widget

<font color="brown">
<script type="text/javascript">
var defaultTags = [
{query : "feed:top100",label : "itshot"},
{ query : "feed:top100new",label : "itsnew"},
{ query : "monkey boy ballmer", label : "steveb"},
{query : "mac pc ads",label : "mac"},
{query : "mtv"},
{ query : "big wave surfing",label : "waves"},
{query : "christina aguilera type:music_video",label : "christina"},
{ query : "jessica simpson",label : "jessica"},
{query : "vw gti"},
{query : "ferrari f1",label : "f1"},
{ query : "abba",label : "abba"},
{ query : "type:gpick",label : "picks"
}
];
</script>
</font>

That's it! We're done!

Here's the test site with the new search widgets: http://hoctro-stretchminima.blogspot.com/

Blogger beta hack :Creating A Three Column Template

2007-06-16T09:34:00.000-07:00

I'm one of hunter about the "Three Column Template" and "Blogger Hack" in many blog forum. From much experts (problogger) answers/guide, this following post is a synthesize incredible-trick how to "Creating A Three Column Template" (thank's to sencerely)

As usual, these instructions apply to the existing "Minima Templates in Blogger" Beta yet the same principles apply to all templates.

The first thing you want to do is enter the ’Edit HTML’ section for your blog through the Blogger admin area.

Next, find this portion of the HTML (a simple, ‘find text’ search will suffice):

#sidebar-wrapper {

width: 220px;

float: right;

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

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

}

This bit of code defines the format of the sidebar for your blog which in the Minima Template is on the right. What we want to do is make a new sidebar with a new name (eg ’new-sidebar’) and put it on the left hand side of the blog. Copy the code below and place it directly below the above code in your blog:

#newsidebar-wrapper {

width: 220px;

float: left;

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

}

The next part is a bit tricky. We’ve added a new column, but we haven’t changed the width of your blog. Look just above the code we just inserted in your blog to the #outer-wrapper section. Notice that the width is 660px. Yet what we have at this point is (left sidebar + main + right sidebar). Or (220px +410px +220px = 850px). Therefore, we need to change the width of the outer-wrapper so that it can fit our blog. You can vary the widths depending on the design of your blog, but in this example we’ll change the width to 850px so that the outer-wrapper section looks like this:

#outer-wrapper {

width: 850px;

margin:0 auto;

padding:10px;

text-align:left;

font: $bodyfont;

}

Now we’ve defined the columns in our blog but we still need to put them into the blog. Next, we want to find the div id=’sidebar-wrapper’ portion of the text. Once again, a simple ’find text’ will suffice. It should look like this:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<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>

This section adds the existing sidebar to the blog. We want to change it a little so that we are adding the newsidebar on the left. Also, Blogger won’t let us have the same two elements in both sidebars, so we want to remove the ’BlogArchive1’ and ’Profile1’ part of the code. Add the following newsidebar code directly above the div id=’main-wrapper’ part of the HTML:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>
</div>

Save it and that’s it!! Go to the ’Page Elements’ tab and you should see three columns in your blog ready to be edited!

Drop Down Menu with CSS & xHTML only (no Javascript)

2007-06-15T21:45:00.000-07:00

It really is easy. Basically you have your ul with li's within and then ul and li's within that:

HTML Code:

<ul id="menu">
<li>A lovely Tab
<ul><li>sub tab #1</li>

<li>sub tab #2</li>
</ul>
</li>
<li>A lovely Tab#2
<ul><li>sub tab #21</li>

<li>sub tab #22</li>
</ul>
</li>

OK, that's pretty simple. Now you need to hide the extra ul's, make the primary tabs form horizontally. So we add this to the css:

Code:

ul { /*this applies to all ul tags*/
margin: 0; padding: 0; /*stops them moving around too much*/}
ul#menu li { list-style: none; float: left; padding: 5px; }
ul#menu li ul { display: none; /*hides the submenu clever bit now:*/
position: absolute; top: auto; left: auto; /*makes it appear below the item*/ }

/*now we need to show it on hover*/
ul#menu li:hover ul { display: block; }

/*now we style the sub menus li's*/
ul#menu li ul li { display: block; float: none; /*makes them appear on top of each other*/ }

Want proof it works or an example, the exact code is on this page:

http://kerplunc.com/projects/_css/drop_down_menu.php

[WARNING: do not copy that page directly, it has no <body> or <head> or <html> set up properly, it is just for testing]

Enjoy...

Which HTML Editor is your Favorite ?

2007-06-15T21:16:00.000-07:00

Dreamweaver

Frontpage

Adobe GoLive

HotMetal Pro

Other

Top 10 Ways to Peeve Your Website Visitors

2007-06-13T21:24:00.000-07:00

How did peeves become pets? Don't know. Don't really care. But all of us have our pet peeves when it comes to surfing the net for information.

Here are the top 10 according to many surveys:

1. Pop Ups
Pop ups come in many flavors: entry pop ups, exit pop ups, delayed, small, large, multiple, Flyin, scrolling, always on top, browser stopping, surf interrupting, must be cleared to move on, viagra, and the ever popular porn.

Except for an occasional squeeze page to get a free ebook or report, web surfers HATE pop ups.

So why do they continue to litter the Internet landscape? Simple. They work.

2. Extra Software Needed to View Site

Don't blame Canada. Blame Adobe.

Adobe made the Acrobat reader a must for viewing PDF files mainly because:

- It solved a need. Every page now printed out the same regardless of which printer or operating system was being used. It could even be made interactive for form completion.

- Adobe gave away millions of the free readers before publishers adopted the new PDF format as a standard for ebooks.

Acrobat users now demand PDF files in most instances where ebooks used to have various formats including "exe". Hackers have made downloading exe files from unknown sources an unsafe activity.

As standard as Acrobat now is, the same is not true for Flash, Shockwave, Deja Vu, and a host of other add-ons with various degrees of support.

I don't need to sit through a 2 meg Flash intro when what I want is information. Apparently, many others agree. You can add Flashblock to your FireFox browser and decide for yourself when to allow the Flash to load.

3. Dead Dead Dead Links

Nothing hacks me off faster than finding a spot on anchor text link that goes nowhere.

It's like having you mouth water over a menu special only to have the kitchen say they have run out.

4. Registration Required to Visit Site

Some sites think their bytes don't stink. They think you should register and login to see anything beyond the home page.

What they are doing is asking me to get married before the first date.

What's in it for me?

In this Internet day and age, a company and site has to build trust before a random visitor is going to cough up a name and email address.

Show me a little leg first.

5. Slowwww Pages

If I have to wait more than 4 or 5 seconds to begin viewing your site, I am gone - never to return.

If your servers are slow, find a new ISP.

If you loaded your pages with Flash, MIDI, audio, video, or other files that load with the page, dump them. Put up links instead. Let the visitor choose if they want to read or watch the video.

6. Outdated Content

One huge advantage of the web is the ability of bloggers and other Drudge wannabes to bypass traditional media and post news online instantly.

If you have not updated your website in 14 months, what does that tell me about your company. Certainly, you are less than a cutting edge solution for my problem.

7. Bad Navigation

Web designers prefer dazzle over function. Function is boring. Who wants a simple text link when a pop up Javascript navigation bar impresses the client?

I do.

So do the search engines.

Every web page needs recognizable, underlined text links on every page, preferably top and bottom.

Don't make me waste time trying to find the internal page I am really looking for.

8. No Contact Information

Poor contact information is a binary pair of bad navigation. How many sites have you been to where you cannot find a phone number, a street address, or even an email address? Plenty.

I think it's sweet that you put up an email contact form on your site, but I prefer to use my default email compose screen. Every web-based email form is different. I don't want to waste time learning to use your form when my email client works fine.

What are you hiding?

9. No Decent Site Search Tool

There is no excuse for this one. If you have a large website with dozens or hundreds of pages, give me an internal search box to find what I need.

Google and Yahoo! and many others will give you the tool - free - to put on your site. Use it.

10. Disabled "Back" Button

I don't want a website to dictate how I experience their site. I am a guest on your site. I don't need to come back to your page when I hit the back button. That's why I hit the back button in the first place. You don't have the information I am looking for.

In a similar vein, I don't like to see other right click functions like "view page source" disabled. I don't need to steal your HTML code, but if I want to, disabling right click will not stop me. I might want to see how you achieved a certain formatting effect. If I am impressed, you can bet I'll be back.

Pet peeves take many forms online. No list like this is complete, but any webmaster that can avoid these 10 major annoyances is a hero in my book.

I look forward to visiting your site.

About the Author: Charles Lamm is a retired attorney who can be reached via email at focus@clixforbrix.com. His articles are posted on his blog at: http://www.virtualjoefriday.com.

What Does Wordtracker Do?

2007-06-13T20:44:00.000-07:00

Essentially, Wordtracker does two things:

Helps you develop a list of likely keyword phrases. Wordtracker searches other Web site’s KEYWORDS tags and searches a thesaurus, to help you create a preliminary list of keyword phrases.
Based on these keyword phrases, it shows you what people using the Web’s search engines are actually typing into the search engines.

Here’s an example:

Step 1: Begin with your own keyword list—you need at least one keyword, or keyword phrase, though most users begin with a few dozen terms. Let’s say you start with nothing more than the term, golf.

Step 2: Ask Wordtracker to suggest similar and related keywords—Wordtracker will use your term to search two major search engines, then visit 200 related Web sites and pull a total of 300 keywords from those sites’ KEYWORDS and DESCRIPTION metatags. You started with golf, and Wordtracker now suggests pga, clubs, putter, irons, and hundreds of other terms.

At this stage, you don’t know if people actually search for these terms or not. Just because Wordtracker suggests a term at this point, doesn’t mean that the term is ever used. For instance, Wordtracker may suggest golf in europa ... but does anyone actually search on this term?

Step 3: Ask Wordtracker if people use a term, and if there are other terms that contain the same words. Wordtracker can search its database of over 300 million searches, and find out if anyone searches on the term you picked. Does anyone search on the term golf in europa? No; Wordtracker did find another term, though, europa go-carts and golf in bellevue but it’s very rarely used, too. (These are the results for the term golf in europa at the time of writing, though of course the situation could change.)

Do more on your website...

2007-06-13T20:38:00.000-07:00

Do more on your website...with one application

Manage content and documents online easily, securely and efficiently
Build your own online community with blogs, forums, wikis and geomapping
Track the life cycle of your website visitors with built in website analytics
Turn your website into a high-speed, two-way street with a powerful forms engine
Build portals with online personalization
Optimize your website for search engine ranking and support Web standards like CSS and XSLT
Categorize with fully integrated taxonomies

Ektron CMS400.NET, the industry’s leading Web Content Management Solution, let’s you do all you need to do on the web and everything you want to do on the web...

3 Column for Blogger

2007-06-08T00:22:00.000-07:00

In this space I wanna share about any links and infos about 3 column for blogger template. I've try to find them from any sites. What templates within here are the result of my tracking to find them. I'm aways add for new template every time. So just make bookmark this pages for your browser and check it every time. Enjoy it and try.. Don't forget to read the rule before you make any change to your template.

Here are some demonstration blogs of 3 column templates. Before you make any changes to your template, it is always wise to backup your current template.

New Blogger templates by Final Sense:
See the Final Sense 3 column Galleries : here

Three-Column Template Generator!

Three-Column Template Generator! I have blogged a couple of times recently about ways to create 3-column templates. These posts have provided free templates

Free CSS Website Templates

It's a three column template which fits together "pixel perfect". Actions: View | Image Preview | Download [ 6k] [ZIP]

Viewfinder Design - Templates

A simple three column template that has similar styling to the TrueBlue template. DOWNLOAD · DOWNLOAD FOR 1.5 · THREE COLUMN DARKNESS ...

Web Standards || Templates

This is a three-column template. Use this template for the site's home page and/or primary pages. View Template: Level 1, Version 1a Download Instructions ...

Three column template - Customizing ...

Please help me convince Blogger of adding a three column template. All I am asking for is a 'minima' template with an extra sidebar, one on ...

Hoctro's Place: Free Ready-to-Use Three-Column Minima Templates

Update: I also have a new template for Rounder style. Please take a look here: http://hoctro.blogspot.com/2007/02/free-ready-to-use-three-column.html ...

College of Business | Three Column Template

Academic Departments. Accounting · Finance · Dedman School of Hospitality · Management · Management Information Systems · Marketing · Risk Management ...

Free Website Design Template Preview

Three Column Template. By Templates Maker - Download - Back ...

Hacking Blogger Beta: Building a Three Column Template

Thanks for the excellent information that you have provided for three column template. I am a starter with blogs and my blog is at ...