FEED Validator

for Atom and RSS and KML

Congratulations!

This is a valid Atom 1.0 feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

line 1, column 118: Use of unknown namespace: http://schemas.google.com/blogger/2008 [help]

... r.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2 ...
                                             ^

line 1, column 118: Unable to validate namespace: http://schemas.google.com/g/2005. See the Google Data specification at https://developers.google.com/gdata/docs/1.0/elements [help]

... r.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2 ...
                                             ^

line 1, column 1220: Self reference doesn't match document location [help]

... 50331379/posts/default?redirect=false'/><link rel='alternate' type='text ...
                                             ^

line 1, column 0: content should not contain onblur attribute (33 occurrences) [help]
```
<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blog ...
```
line 1, column 0: Invalid HTML: EOF in middle of construct, at line 1, column 306 (3 occurrences) [help]
```
<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blog ...
```

line 8, column 28391: style attribute contains potentially dangerous content: thin [help]

... t;See you then!&lt;br /&gt;&lt;/span&gt;</content><link rel='replies' ty ...
                                             ^

Source: http://onlinebiz-my.blogspot.com/feeds/posts/default

<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:blogger='http://schemas.google.com/blogger/2008' xmlns:georss='http://www.georss.org/georss' xmlns:gd="http://schemas.google.com/g/2005" xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-6215370811350331379</id><updated>2024-02-07T11:51:16.398+08:00</updated><category term="Blogging Tips"/><category term="Blogger Templates"/><category term="JavaScript"/><category term="Blogging Tools"/><category term="Q N A About Blogger"/><category term="Ajax"/><category term="Ported WordPress Themes"/><category term="Basic Html"/><category term="About"/><category term="Styling CSS"/><title type='text'>MY Version</title><subtitle type='html'>This site isn’t about how to make money blogging.</subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default?redirect=false'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><link rel='next' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default?start-index=26&max-results=25&redirect=false'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>178</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>25</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-3792880770828387447</id><published>2009-06-30T19:01:00.000+08:00</published><updated>2009-06-30T19:42:22.097+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="About"/><title type='text'>Google Page Creator Migration</title><content type='html'><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiV62lp5h7aRsKMMzbbNv2_t3SAtdZOwHXZsrrPOHcWNoVt9wU3AvtE_w0-IEOMg725Hq6EK2_Yl47fBuzfhep-M4HNQjRp7-7Lx9yW332zov32CNjSr-sdKfkb_sTR4aJ1qP_QAezJbo/s1600-h/CaptureWiz001.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 300px; height: 141px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiV62lp5h7aRsKMMzbbNv2_t3SAtdZOwHXZsrrPOHcWNoVt9wU3AvtE_w0-IEOMg725Hq6EK2_Yl47fBuzfhep-M4HNQjRp7-7Lx9yW332zov32CNjSr-sdKfkb_sTR4aJ1qP_QAezJbo/s400/CaptureWiz001.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5353084566000538386" /></a> Google will soon be discontinuing operation of the Google Page Creator product. Thus, all my js.files are no longer working at a later date. Please move them to a different hosting service. Failure to do so may break your source code displayed. </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/3792880770828387447/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2009/06/google-page-creator-migration.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/3792880770828387447'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/3792880770828387447'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2009/06/google-page-creator-migration.html' title='Google Page Creator Migration'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiV62lp5h7aRsKMMzbbNv2_t3SAtdZOwHXZsrrPOHcWNoVt9wU3AvtE_w0-IEOMg725Hq6EK2_Yl47fBuzfhep-M4HNQjRp7-7Lx9yW332zov32CNjSr-sdKfkb_sTR4aJ1qP_QAezJbo/s72-c/CaptureWiz001.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-4587289800315271481</id><published>2008-12-29T16:30:00.003+08:00</published><updated>2008-12-29T16:54:52.029+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Blogging Tips"/><title type='text'>How To Highlight Author Comments?</title><content type='html'><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i74.servimg.com/u/f74/11/94/91/73/screen27.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 309px; height: 219px;" src="http://i74.servimg.com/u/f74/11/94/91/73/screen27.jpg" alt="" border="0" /></a> When I do post a comment in my own blog, it doesn't look different from other comments. Having seen some people have implemented author comment highlighting on their sites, I wanted to do the same here. Login to your Dashboard> Layout> Edit Html. Check the Expand Widget Templates Check Box. Copy and paste the code below before the closing b:skin tag .comment-body-author { margin:0; padding:0 0 0 20px; } .comment-body-author p { font-size:100%; margin:0 0 .2em 0; color:#CC3300; text-decoration:bold; } Next, search for the following lines of code. <code>&lt;dl id='comments-block'&gt; &lt;b:loop values='data:post.comments' var='comment'&gt; &lt;dt class='comment-author' expr:id='"comment-" data:comment.id'&gt; &lt;a expr:name='"comment-" data:comment.id'/&gt; &lt;b:if cond='data:comment.authorUrl'&gt; &lt;a expr:href='data:comment.authorUrl' rel='nofollow'&gt;&lt;data:comment.author/&gt;&lt;/a&gt; &lt;b:else/&gt; &lt;data:comment.author/&gt; &lt;/b:if&gt; said... &lt;/dt&gt; </code> Place this code immediately right after it. <code>&lt;b:if cond='data:comment.author == data:post.author'&gt; &lt;dd class='comment-body-author'&gt; &lt;p&gt;&lt;data:comment.body/&gt;&lt;/p&gt; &lt;/dd&gt; &lt;b:else/&gt; </code> Then, search for:- <code>&lt;dd class='comment-body'&gt; &lt;b:if cond='data:comment.isDeleted'&gt; &lt;span class='deleted-comment'&gt;&lt;data:comment.body/&gt;&lt;/span&gt; &lt;b:else/&gt; &lt;p&gt;&lt;data:comment.body/&gt;&lt;/p&gt; &lt;/b:if&gt; &lt;/dd&gt; </code> And place the closing b:if tag <code>&lt;/b:if&gt;</code> as shown below:- <code>&lt;dd class='comment-body'&gt; &lt;b:if cond='data:comment.isDeleted'&gt; &lt;span class='deleted-comment'&gt;&lt;data:comment.body/&gt;&lt;/span&gt; &lt;b:else/&gt; &lt;p&gt;&lt;data:comment.body/&gt;&lt;/p&gt; &lt;/b:if&gt; &lt;/dd&gt; &lt;/b:if&gt; </code> Save the template and you're done! From now on, it’s a little easier to spot any comments made by me which is in red color. </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/4587289800315271481/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/12/how-to-highlight-author-comments.html#comment-form' title='5 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/4587289800315271481'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/4587289800315271481'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/12/how-to-highlight-author-comments.html' title='How To Highlight Author Comments?'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>5</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-2986814850841259275</id><published>2008-12-28T15:30:00.007+08:00</published><updated>2008-12-30T01:15:58.487+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Blogging Tips"/><title type='text'>Different Post Styles For Different Authors</title><content type='html'><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i74.servimg.com/u/f74/11/94/91/73/screen25.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 405px; height: 351px;" src="http://i74.servimg.com/u/f74/11/94/91/73/screen25.jpg" alt="" border="0" /></a> Today, I will show you how you can have different colors for team members as this will distinguish their posts among themselves as well to their readers. Let's say you have two users sharing a blog, and their names are Is and JoeBorg. Ordinarily when they post, their entries look the same. That's too boring. So I'm going to make all of Is's posts be in red and all of JoeBorg's posts will have a blue color. In other words, the style of the POST BODY will automatically change based on who wrote it. Login to your Dashboard> Layout> Edit Html. Check the Expand Widget Templates check box. Copy and paste these lines into your CSS section. The preferred place to add CSS code is right in front of the closing b:skin tag .post-body-is { color:#ff0000; } .post-body-joeborg { color:#0000ff; } Next, search for this lines of code. <code>&lt;div class='post-body entry-content'&gt; &lt;data:post.body/&gt; &lt;div style='clear: both;'/&gt; &lt;!-- clear for photos floats --&gt; &lt;/div&gt;</code> Remove those lines and replace with the following lines of code. <code>&lt;b:if cond='data:post.author == &amp;quot;Is&amp;quot;'&gt; &lt;div class='post-body-is'&gt;&lt;p&gt;&lt;data:post.body/&gt;&lt;/p&gt; &lt;div style='clear: both;'/&gt; &lt;!-- clear for photos floats --&gt; &lt;/div&gt; &lt;b:else/&gt; &lt;div class='post-body-joeborg'&gt; &lt;p&gt;&lt;data:post.body/&gt;&lt;/p&gt; &lt;div style='clear: both;'/&gt; &lt;!-- clear for photos floats --&gt; &lt;/div&gt; &lt;/b:if&gt;</code> That's it! Save the changes and you're done! When you look at the blog again, Is and JoeBorg will have their own formats. You can have team blogs on Blogger. Just set up your blog so that more than one person can write posts. The working principle is the same if you have more than two contributors. Alternatively, you may also set the background color for each author and their own image respectively as shown below:- <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i74.servimg.com/u/f74/11/94/91/73/screen28.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 407px; height: 410px;" src="http://i74.servimg.com/u/f74/11/94/91/73/screen28.jpg" alt="" border="0" /></a> </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/2986814850841259275/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/12/different-post-styles-for-different.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/2986814850841259275'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/2986814850841259275'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/12/different-post-styles-for-different.html' title='Different Post Styles For Different Authors'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-8125542685549602003</id><published>2008-12-13T03:15:00.003+08:00</published><updated>2008-12-13T03:51:32.326+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="JavaScript"/><title type='text'>To The Top Link</title><content type='html'><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i74.servimg.com/u/f74/11/94/91/73/top_li10.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 324px; height: 222px;" src="http://i74.servimg.com/u/f74/11/94/91/73/top_li10.gif" alt="" border="0" /></a> This script will provide a link to the top of the page as means to get back to the main navigation. In other words, this allows users to go back the main navigation from almost every scrolling position. It may also be convenient for disabled users who scrolling is difficult to do. Login to your Dashboard> Layout> Edit Html. Next, copy the script source code below and paste between the closing b:skin tag and the closing head tag. <code>&lt;script src='http://javascripthost.com/s1/bin/jumptop.js'/&gt; </code> That's all for now. Save the template and you're done! </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/8125542685549602003/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/12/to-top-link.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/8125542685549602003'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/8125542685549602003'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/12/to-top-link.html' title='To The Top Link'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-6626366039338264859</id><published>2008-12-12T20:52:00.003+08:00</published><updated>2008-12-12T21:52:31.635+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="JavaScript"/><title type='text'>Total Posts And Comments</title><content type='html'><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i74.servimg.com/u/f74/11/94/91/73/screen22.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 321px; height: 187px;" src="http://i74.servimg.com/u/f74/11/94/91/73/screen22.jpg" alt="" border="0" /></a> This script will add a total number of posts and comments to your blog. After you install this script, you will get to see your total number of posts and comments since you started blogging. To install this script, login to your Dashboard> Layout> Add A Gadget (preferably with a sidebar). Copy and paste the code below. <code>Total &lt;script style=""&gt; function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }&lt;/script&gt;&lt;script src="/feeds/posts/summary?max-results=0&amp;amp;alt=json-in-script&amp;amp;callback=showpostcount"&gt;&lt;/script&gt; posts &lt;br&gt; Total &lt;script src="/feeds/comments/summary?max-results=0&amp;amp;alt=json-in-script&amp;amp;callback=showpostcount"&gt;&lt;/script&gt; comments</code> That's all it takes to install and save your work. </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/6626366039338264859/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/12/total-posts-and-comments.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/6626366039338264859'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/6626366039338264859'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/12/total-posts-and-comments.html' title='Total Posts And Comments'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-844097002059142465</id><published>2008-12-11T13:54:00.005+08:00</published><updated>2008-12-11T15:10:02.595+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Blogging Tips"/><title type='text'>Add A Translation Widget</title><content type='html'><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i74.servimg.com/u/f74/11/94/91/73/screen21.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 325px; height: 189px;" src="http://i74.servimg.com/u/f74/11/94/91/73/screen21.jpg" alt="" border="0" /></a> This tutorial will show you how to add a translation widget to your page. It will take you to a translation of the current blog page. What's more it uses Google Translate and offer instant access to automatic translations of that page. Adding the gadget is quick and easy too. Login to your Dashboard> Layout> Add a Gadget (sidebar - just matter of your preference). Copy and paste the HTML below to include the gadget on your webpage. <code>&lt;center&gt;&lt;div style=&quot;padding:10px 10px 10px 10px;text-align:center;&quot;&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Car&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Arabic&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; alt=&quot;Translate English to Arabic&quot; width=&quot;24&quot; src=&quot;http://i263.photobucket.com/albums/ii150/mohamedrias/Arabic_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate English to Arabic&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Cbg&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Bulgarian&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Arabic&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Bulgarian_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate to Bulgarian&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Czh-TW&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Traditional Chinese&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Arabic&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Mandarin_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate to traditional Chinese&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Chr&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Croatian&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Croatian&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Croatian_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate to Croatian&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Ccs&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Czech&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Czech&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Czech_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate to Czech&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Cda&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Danish&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to danish&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Danish_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate to Danish&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Cnl&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Dutch&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Dutch&quot; src=&quot;http://i40.photobucket.com/albums/e208/winglord01/nederlands.gif&quot; height=&quot;18&quot; title=&quot;Translate to Dutch&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Cfi&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Finnish&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Finnish&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Finnish_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate to Finnish&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Cfr&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to French&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to French&quot; src=&quot;http://i18.photobucket.com/albums/b120/pdhinderlie/Web%20Stuff/Flags/flag_fr.gif&quot; height=&quot;18&quot; title=&quot;Translate to French&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Cde&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to German&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to German&quot; src=&quot;http://i263.photobucket.com/albums/ii150/mohamedrias/_german_s.png&quot; height=&quot;18&quot; title=&quot;Translate English to German&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Cel&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Greek&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Greek&quot; src=&quot;http://i18.photobucket.com/albums/b120/pdhinderlie/Web%20Stuff/Flags/flag_gr.gif&quot; height=&quot;18&quot; title=&quot;Translate to Greek&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Chi&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Hindi&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Hindi&quot; src=&quot;http://i323.photobucket.com/albums/nn467/techbookmark/hindi.png&quot; height=&quot;18&quot; title=&quot;Translate to Hindi&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Cit&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Google-Translate-English to Italian&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot; Translate English to Italian&quot; src=&quot;http://i263.photobucket.com/albums/ii150/mohamedrias/_italian_s.png&quot; height=&quot;18&quot; title=&quot; Translate English to Italian&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Cja&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Google-Translate-English to Japanese BETA&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Google-Translate-English to Japanese BETA&quot; src=&quot;http://i187.photobucket.com/albums/x307/Mafishioso/_japanese_s.png&quot; height=&quot;18&quot; title=&quot;Translate English to Japanese BETA&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Cko&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot; Translate English to Korean BETA&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Korean BETA&quot; src=&quot;http://i263.photobucket.com/albums/ii150/mohamedrias/_korean_s.png&quot; height=&quot;18&quot; title=&quot;Translate English to Korean BETA&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Cno&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Norwegian&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Norwegian&quot; src=&quot;http://i536.photobucket.com/albums/ff328/pmhrid/norway_flag.png&quot; height=&quot;18&quot; title=&quot;Translate to Norwegian&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Cpl&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Polish&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Polish&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Polish_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate to Polish&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Cpt&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Portuguese&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Portuguese&quot; src=&quot;http://i18.photobucket.com/albums/b120/pdhinderlie/Web%20Stuff/Flags/flag_pt.gif&quot; height=&quot;18&quot; title=&quot;Translate to Portuguese&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Cro&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Romanian&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Romanian&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Romansh_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate to Romanian&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Cru&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Russian&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Russian&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Russian_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate to Russian&quot;/&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39; encodeURIComponent(location.href) &#39;&amp;langpair=en%7Cru&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot; Translate English to Russian BETA &quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Russian BETA &quot; src=&quot;http://i263.photobucket.com/albums/ii150/mohamedrias/_russian_s.png&quot; height=&quot;18&quot; title=&quot; Translate English to Russian BETA &quot;/&gt;&lt;/a&gt; &lt;/div&gt;&lt;/center&gt;</code> Save the changes and you're done! You should see it on your sidebar now. It will show up on your site letting visitors know that they can "translate this site" in a variety of languages including German, Russian, Portuguese, and Chinese. </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/844097002059142465/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/12/add-translation-widget.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/844097002059142465'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/844097002059142465'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/12/add-translation-widget.html' title='Add A Translation Widget'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-5892158082230033675</id><published>2008-11-28T16:25:00.009+08:00</published><updated>2008-11-29T18:41:32.948+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Blogging Tips"/><title type='text'>Adding Comment Authors</title><content type='html'><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i74.servimg.com/u/f74/11/94/91/73/screen20.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 325px;" src="http://i74.servimg.com/u/f74/11/94/91/73/screen20.jpg" alt="" border="0" /></a> </div>By default, Blogger includes a comment author's display photo next to every comment in a blog. However, the comment author's photo isn't showing up in the new comment form and thus making the feature is no longer available! For today's tutorial, I'll show you step-by-step how to add comment authors next to their comments. Login to your Dashboard> Layout> Edit Html. Check the Expand Widget Templates Box. Copy and paste the code below before the closing b:skin tag .commentphoto img { margin: 2px; } Next, add the source code below between the b:skin tag and the closing head tag. <code>&lt;script src=&#39;http://javascripthost.com/s1/bin/blogger_comment_photos.js&#39; type=&#39;text/javascript&#39;/&gt; &lt;script type=&#39;text/javascript&#39;&gt; //&lt;![CDATA[ BloggerProfiles.noimage = &#39;http://i74.servimg.com/u/f74/11/94/91/73/blank10.jpg&#39;; BloggerProfiles.imageWidth = 40; BloggerProfiles.imageHeight = 40; addLoadEvent(function(){showCommentPhotos(&#39;commentphoto&#39;,&#39;comment-author&#39;, 1);}); //]]&gt; &lt;/script&gt;</code> Then, search for the following lines:- <code>&lt;dt expr:class=&#39;&amp;quot;comment-author &amp;quot; data:comment.authorClass&#39; expr:id=&#39;data:comment.anchorName&#39;&gt;</code> Place this code immediately right after it:- <code>&lt;div class=&#39;commentphoto&#39; style=&#39;float:left;&#39;/&gt;</code> Again, search for these lines:- <code>&lt;dd class=&#39;comment-footer&#39;&gt; &lt;span class=&#39;comment-timestamp&#39;&gt; &lt;a expr:href=&#39;data:comment.url&#39; title=&#39;comment permalink&#39;&gt; &lt;data:comment.timestamp/&gt; &lt;/a&gt; &lt;b:include data=&#39;comment&#39; name=&#39;commentDeleteIcon&#39;/&gt; &lt;/span&gt; &lt;/dd&gt;</code> And paste the following code right after the closing <code>&lt;/dd&gt;</code> tag. <code>&lt;div style=&#39;clear:both;&#39;/&gt;</code> That's it, save the changes. You can now view your comment author's photo provided he/she has set his/her profile to be shared. </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/5892158082230033675/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/11/adding-comment-authors.html#comment-form' title='5 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/5892158082230033675'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/5892158082230033675'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/11/adding-comment-authors.html' title='Adding Comment Authors'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>5</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-4134432577809454927</id><published>2008-11-22T15:53:00.020+08:00</published><updated>2011-12-17T13:20:19.138+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Blogging Tools"/><title type='text'>Embedded Blogger Smileys</title><content type='html'><a href="http://i74.servimg.com/u/f74/11/94/91/73/screen17.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 319px; height: 223px;" src="http://i74.servimg.com/u/f74/11/94/91/73/screen17.jpg" alt="" border="0" /></a> Smiley was first created by Harvey Bell. He was a freelance artist and his creation adds a more human element in today's blogging world. This simple script lets you add facial expressions along with your comment as Blogger itself doesn’t give us a way of doing such things. You can now add some Smileys to your comment form. Before I go into more detail, in order to make smileys work you must have a new comment form installed. If you don't have one yet, please read <a href="http://onlinebiz-my.blogspot.com/2008/07/blogging-tip-how-to-configure-new.html">this article</a>. Go back to Layout&gt; Edit Html. Look for Expand Widget Templates box and check the box. Search for the following lines:- <code>&lt;p class='comment-footer'&gt; &lt;b:if cond='data:post.embedCommentForm'&gt; &lt;b:include data='post' name='comment-form'/&gt; &lt;b:else/&gt; &lt;b:if cond='data:post.allowComments'&gt; &lt;h3&gt;&lt;a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'&gt; &lt;data:postCommentMsg/&gt;&lt;/a&gt;&lt;/h3&gt; &lt;/b:if&gt; &lt;/b:if&gt; &lt;/p&gt; &lt;/b:if&gt;</code> Remove and replace with these lines:- <code>&lt;p class='comment-footer'&gt; &lt;b:if cond='data:post.allowComments'&gt; &lt;/b:if&gt; &lt;b:if cond='data:post.embedCommentForm'&gt; &lt;h3&gt;Please don&amp;#39;t spam me!&lt;/h3&gt; &lt;div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 400; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #cccccc; height:80'&gt; &lt;b&gt; &lt;table&gt;&lt;tr&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/&gt; :)) &lt;/td&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/&gt; ;)) &lt;/td&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/&gt; ;;) &lt;/td&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/&gt; :D &lt;/td&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/&gt; ;) &lt;/td&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/&gt; :p &lt;/td&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/&gt; :(( &lt;/td&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/&gt; :) &lt;/td&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/&gt; :( &lt;/td&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/&gt; :X &lt;/td&gt;&lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/&gt; =(( &lt;/td&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/&gt; :-o &lt;/td&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/&gt; :-/ &lt;/td&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/&gt; :-* &lt;/td&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/&gt; :| &lt;/td&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/&gt; 8-} &lt;/td&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/&gt; :)] &lt;/td&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/&gt; :-t &lt;/td&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/&gt; b-( &lt;/td&gt; &lt;td&gt;&lt;img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/&gt; :-L &lt;/td&gt; &lt;/tr&gt;&lt;/table&gt; &lt;/b&gt; &lt;/div&gt; &lt;b:include data='post' name='comment-form'/&gt; &lt;b:else/&gt; &lt;/b:if&gt; &lt;/p&gt; &lt;/b:if&gt;</code> Move down to the bottom of your template, search for the closing body tag <code>&lt;/body&gt;</code>. Then, place this code immediately right before it. <code>&lt;script type=&#39;text/javascript&#39;&gt; a = document.getElementsByTagName(&amp;#39;LABEL&amp;#39;); if(a) { for(i=0; i &amp;lt; a.length; i++) { _str = a.item(i).innerHTML.replace(/:\)\)/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:d/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/\;\)/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:p/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:$\(/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:$/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:$/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:\|/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/\=$\)/ig,&amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif&#39;/&gt;&amp;quot;) a.item(i).innerHTML = _str; } } a = document.getElementById(&amp;#39;comments&amp;#39;); if(a) { b = a.getElementsByTagName(&amp;quot;DD&amp;quot;); for(i=0; i &amp;lt; b.length; i++) { if (b.item(i).getAttribute(&amp;#39;CLASS&amp;#39;) == &amp;#39;comment-body&amp;#39;) { _str = b.item(i).innerHTML.replace(/:\)\)/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:\)\]/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/;\)\)/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/;\;\)/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:d/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/\;\)/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:p/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:$\(/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:$/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:\(/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:x/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/=\(\(/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:\-\o/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:-\//gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:-\*/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:\|/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/8-\}/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/~x$/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:-t/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/b-\(/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:-\L/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/x\(/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/\=$\)/ig,&amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif&#39;/&gt;&amp;quot;) b.item(i).innerHTML = _str; } } } a = document.getElementById(&amp;#39;comments&amp;#39;); if(a) { c = a.getElementsByTagName(&amp;quot;DD&amp;quot;); for(i=0; i &amp;lt; c.length; i++) { if (c.item(i).getAttribute(&amp;#39;CLASS&amp;#39;) == &amp;#39;owner-Body&amp;#39;) { _str = c.item(i).innerHTML.replace(/:\)\)/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:\)\]/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/;\)\)/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/;\;\)/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:d/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/\;\)/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:p/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:$\(/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:$/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:\(/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:x/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/=\(\(/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:\-\o/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:-\//gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:-\*/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:\|/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/8-\}/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/~x$/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:-t/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/b-\(/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/:-\L/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/x\(/gi, &amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif&#39;/&gt;&amp;quot;); _str = _str.replace(/\=$\)/ig,&amp;quot;&lt;img alt=&#39;&#39; class=&#39;smiley&#39; src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif&#39;/&gt;&amp;quot;) c.item(i).innerHTML = _str; } } } &lt;/script&gt;</code> And you're done! You can now express your emotions and let all your feelings out :wink: Please spread the word if you value what you find in this site. Let me know if you find any errors and do leave some comments. Note - This tutorial is meant to explain how to add Smileys to your embedded comment form only. </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/4134432577809454927/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/11/embedded-blogger-smileys.html#comment-form' title='5 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/4134432577809454927'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/4134432577809454927'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/11/embedded-blogger-smileys.html' title='Embedded Blogger Smileys'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>5</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-9026691228381213043</id><published>2008-11-17T03:45:00.011+08:00</published><updated>2011-12-17T17:54:25.190+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Ajax"/><title type='text'>One Click Toggle</title><content type='html'><div style="text-align: center;"><img style="cursor: pointer; width: 250px; height: 196px;" src="http://i74.servimg.com/u/f74/11/94/91/73/toggle11.gif" alt="" border="0" /> </div>In this tutorial, we will create functions to slide <a href="http://testblog2-my.blogspot.com/">DIVs up and down</a> (Live Demo). It supports multiple animations happening simultaneously, as well as a variable animation length. And thus customize the animation speed (or to disable it entirely). Login to your Dashboard> Layout> Edit Html. Copy and paste the code below before the closing b:skin tag .ddpanel .ddpanelcontent{ /*CSS for "content" DIV of Drop Down Panel*/ color: white; background: black; /*background of Drop Down Panel*/ /*Do NOT add any "padding" or "margin" properties here! Any padding/margin should be added to your content's container within this DIV instead */ } .ddpanel .ddpaneltab{ /*CSS for "toggle" tab DIV of Drop Down Panel*/ margin-right: 20px; font: normal 12px Arial; } .ddpanel .ddpaneltab a{ /*"toggle" tab related CSS*/ float: right; color: white; background: black url(toggleleft.gif) no-repeat left bottom; /*background of toggle tab*/ text-decoration: none; letter-spacing: 1px; } .ddpanel .ddpaneltab a span{ /*"toggle" tab related CSS*/ float: left; display: block; background: transparent url(toggleright.gif) no-repeat right bottom; padding: 1px 12px 4px 13px; cursor: pointer; } .ddpanel .ddpaneltab a span img.pointerimage{ /*CSS for pointer image within toggle tab*/ margin-top: 2px; margin-left: 5px; } .ddpanel .ddpaneltab a:hover{ /*"toggle" tab related CSS*/ background-color: navy; /*background of toggle tab onMouseover*/ } .ddpanel .ddpaneltab a:active, .ddpanel .ddpaneltab a:focus{ /*"toggle" tab related CSS*/ outline: 0; } .ddpanel .ddpaneltab a:hover span{ /*"toggle" tab related CSS*/ background-color: transparent; } Next, add the source code below between the b:skin tag and the closing head tag. Now that page of your site has sliding abilities! <code>&lt;script src='http://onlinebiztutorials.googlepages.com/dddropdownpanel.js'/&gt;</code> Save the template. Then, click Page Elements> Add a Gadget (sidebar, header or footer -your choice)> Html/Javascript. Add these lines into the box. <code>&lt;div id="mypanel" class="ddpanel"&gt; &lt;div id="mypanelcontent" class="ddpanelcontent"&gt; &lt;p style="padding:10px"&gt; &lt;img src="http://i36.tinypic.com/kak1t0.jpg" class="closepanel" style="float:left; width:200px; height:172px; margin:0 10px 10px 0" /&gt;The Milky Way is a barred spiral galaxy that is part of the Local Group of galaxies. Although the Milky Way is one of billions of galaxies in the observable universe,[4] its special significance to humanity is that it is the home galaxy of our Solar System. The plane of the Milky Way galaxy is visible from Earth as a band of light in the night sky, and it is the appearance of this band of light which has inspired the name for our galaxy. It is extremely difficult to define the age at which the Milky Way formed, but the age of the oldest star in the Galaxy yet discovered, HE 1523-0901, is estimated to be about 13.2 billion years, nearly as old as the Universe itself. -Source: &lt;a href="http://en.wikipedia.org/wiki/Milky_way" style="color:white"&gt;Wikipedia&lt;/a&gt;. &lt;/p&gt; &lt;br style="clear: left" /&gt; &lt;p&gt;Note: Click on any link or the Milky Way Image auto closes the panel.&lt;/p&gt; &lt;/div&gt; &lt;div id="mypaneltab" class="ddpaneltab"&gt; &lt;a href="#"&gt;&lt;span&gt;Toggle&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt;</code> Save settings. Hope this helps! When defining the content to be shown inside the box, try and add explicit width/height attributes to images and other embedded elements that may affect the height of the content when they are done loading as shown above. </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/9026691228381213043/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/11/one-click-toggle.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/9026691228381213043'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/9026691228381213043'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/11/one-click-toggle.html' title='One Click Toggle'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-9167495228909043184</id><published>2008-11-10T18:33:00.005+08:00</published><updated>2011-12-18T10:00:02.290+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="JavaScript"/><title type='text'>Creating Image Reflections</title><content type='html'><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i74.servimg.com/u/f74/11/94/91/73/screen15.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 394px; height: 159px;" src="http://i74.servimg.com/u/f74/11/94/91/73/screen15.jpg" alt="" border="0" /></a> </div>Image reflections could be achieved with the help of Photoshopped elements or Internet Explorer gets the GIF while FireFox and Safari get the canvas tag. What if a person like me who has a little knowledge about Photoshop but wanted to create image reflections? I too can be making reflections with the best of them and I'll show you how. Login to your Dashboard> Layout> Edit Html. Next, copy the script source code below and paste between the closing b:skin tag and the closing head tag. <code>&lt;script src=&#39;http://onlinebiztutorials.googlepages.com/reflection.js&#39; type=&#39;text/javascript&#39;/&gt;</code> Save the template. Then, click Settings> Formatting> Post Template. Add this line into the post template box. <code>&lt;img src=&quot;URL of image&quot; class=&quot;reflect&quot;&gt;</code> Example: <code>&lt;img src=&quot;http://i74.servimg.com/u/f74/11/94/91/73/screen13.jpg&quot; class=&quot;reflect&quot;&gt;</code> Save settings. You'll notice that anything you type into the box of "Post Template" will appear in your new post. That's it for today. Enjoy :wink: </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/9167495228909043184/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/11/creating-image-reflections.html#comment-form' title='7 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/9167495228909043184'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/9167495228909043184'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/11/creating-image-reflections.html' title='Creating Image Reflections'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>7</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-9221073554353299872</id><published>2008-11-02T16:11:00.010+08:00</published><updated>2009-05-24T14:38:54.636+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Blogging Tips"/><title type='text'>A Link List Widget As A Horizontal Menu Bar</title><content type='html'><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i74.servimg.com/u/f74/11/94/91/73/screen14.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 384px; height: 80px;" src="http://i74.servimg.com/u/f74/11/94/91/73/screen14.jpg" alt="" border="0" /></a> </div><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i74.servimg.com/u/f74/11/94/91/73/screen13.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 384px; height: 80px;" src="http://i74.servimg.com/u/f74/11/94/91/73/screen13.jpg" alt="" border="0" /></a> </div>The two pictures above illustrate how to make your link list widget to turn into a horizontal menu bar. Here are two options to choose from:- a- A horizontal link list above the header. b- A horizontal link list below the header. Login to your Dashboard> Layout> Edit Html. Check the Expand Widget Templates check box. Copy and paste these lines into your CSS section. The preferred place to add CSS code is right in front of the closing b:skin tag /* ----- LINKBAR ----- */ #linkbar { margin: 6px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 100%; position: relative; background: #000000; border: 1px solid #000000; border-bottom: 0; } #linkbar ul { margin: 0px 0px 0px 0px; padding: 5px 5px 7px 5px; text-align: left; list-style-type:none; } #linkbar li { display: inline; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #linkbar h2 { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; display: none; visibility: hidden; } #linkbar a { clear: both; margin: 0px -4px 0px 0px; padding: 3px 20px 3px 20px; width:960px; text-decoration:none; font: arial; color: #FFCC00; border-right: 1px solid #000000; } #linkbar a:hover { color: #FFFFFF; background: #FFFFFF; } Next, search for this code <code>&lt;div id='header-wrapper'&gt; </code><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i74.servimg.com/u/f74/11/94/91/73/linkli10.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 452px; height: 256px;" src="http://i74.servimg.com/u/f74/11/94/91/73/linkli10.gif" alt="" border="0" /></a> </div>Place this code immediately right before where a line is highlighted as shown above. <code>&lt;div id='linkbar-wrapper'&gt; &lt;b:section class='linkbar' id='linkbar' showaddelement='no'&gt; &lt;b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'&gt; &lt;b:includable id='main'&gt; &lt;b:if cond='data:title'&gt;&lt;h2&gt;&lt;data:title/&gt;&lt;/h2&gt;&lt;/b:if&gt; &lt;div class='widget-content'&gt; &lt;ul&gt; &lt;b:loop values='data:links' var='link'&gt; &lt;li&gt;&lt;a expr:href='data:link.target'&gt;&lt;data:link.name/&gt;&lt;/a&gt;&lt;/li&gt; &lt;/b:loop&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/b:includable&gt; &lt;/b:widget&gt; &lt;/b:section&gt; &lt;/div&gt;</code> If you'd like to have a horizontal menu bar below the header, just add the above code right after the closing div tag where a line is highlighted. Save the template, click on 'Page Elements'. Choose "Edit" on the "Linkbar" box. And add things to your new link list widget for it to show up i.e add your links and their titles. <div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i74.servimg.com/u/f74/11/94/91/73/linkba10.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 450px; height: 34px;" src="http://i74.servimg.com/u/f74/11/94/91/73/linkba10.gif" alt="" border="0" /></a> </div> </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/9221073554353299872/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/11/link-list-widget-as-horizontal-menu-bar.html#comment-form' title='3 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/9221073554353299872'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/9221073554353299872'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/11/link-list-widget-as-horizontal-menu-bar.html' title='A Link List Widget As A Horizontal Menu Bar'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>3</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-6703898414649837023</id><published>2008-10-29T14:12:00.008+08:00</published><updated>2011-12-17T14:51:56.065+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Ajax"/><title type='text'>Tab Content Script</title><content type='html'><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i74.servimg.com/u/f74/11/94/91/73/screen12.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 239px;" src="http://i74.servimg.com/u/f74/11/94/91/73/screen12.jpg" alt="" border="0" /></a> </div>For today's tutorial, I'll show you how to display your recent comments,posts and your online users, thus lets you organize regular DIV contents on the page into a tab interface, with the desired content appearing when a tab is clicked on. The tabs are simply list based links, and the tab contents are regular DIV contents on the page or can simply be links to other pages. Login to your Dashboard> Layout> Edit Html. Check the Expand Widget Template check box. Copy <a href="http://www.fileden.com/files/2007/12/1/1619409/tabcontent.css">here</a> and paste before the closing b:skin tag Next, add the source code below between the b:skin tag and the closing head tag. <code>&lt;script src='http://onlinebiztutorials.googlepages.com/vt-tabcontent.js'/&gt; </code> I'd like to display on my right sidebar. So, I need to search for the right Html that governed my right sidebar. It may name differently in your template but the principle is still the same. In my case, an example is shown below:- <code>&lt;div id='sidebar-wrapper'&gt;</code> Finally, simply add the below HTML right after the opening div. <code>&lt;!-- ^^^^^^^^^^^^^^ tabbed content ^^^^^^^^^^^^^^ --&gt; &lt;ul class='tabs' id='tabs'&gt; &lt;li&gt;&lt;a class='selected' href='#' rel='tab1'&gt;Recent Posts&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='#' rel='tab2'&gt;Recent Comments&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='#' rel='tab3'&gt;Who&amp;#39;s Online&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div style='clear:both'/&gt; &lt;div class='tabcontent' id='tab1'&gt; &lt;!-- recent posts code start --&gt; &amp;lt;script language=&amp;quot;JavaScript&amp;quot; src=&amp;quot;http://feed2js.org//feed2js.php?src=http%3A%2F%2Fonlinebiz-my.blogspot.com%2Ffeeds%2Fposts%2Fdefault&amp;amp;amp;num=10&amp;amp;amp;tz= 8&amp;amp;amp;targ=y&amp;quot; type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;lt;/script&amp;gt; &lt;!-- recent posts code end --&gt; &lt;/div&gt; &lt;div class='tabcontent' id='tab2'&gt; &lt;!-- recent comments code start --&gt; &amp;lt;script language=&amp;quot;JavaScript&amp;quot; src=&amp;quot;http://feed2js.org//feed2js.php?src=http%3A%2F%2Fonlinebiz-my.blogspot.com%2Ffeeds%2Fcomments%2Fdefault&amp;amp;amp;num=10&amp;amp;amp;tz= 8&amp;amp;amp;targ=y&amp;quot; type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;lt;/script&amp;gt; &lt;!-- recent comments code end --&gt; &lt;/div&gt; &lt;div class='tabcontent' id='tab3'&gt; &amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;.readingtopics_text {font-weight:bold}&amp;lt;/style&amp;gt; &amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt; reader_text = &amp;quot;readers&amp;quot;; &amp;lt;/script&amp;gt; &amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;http://anhvo.info.googlepages.com/reading-num.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt; &lt;/div&gt; &lt;script type='text/javascript'&gt; var countries=new ddtabcontent(&amp;quot;tabs&amp;quot;) countries.setpersist(false) countries.setselectedClassTarget(&amp;quot;link&amp;quot;) countries.init() &lt;/script&gt; &lt;!-- ^^^^^^^^^^^^^^ tabbed content ^^^^^^^^^^^^^^ --&gt;</code> The above HTML contains 3 tab demos similar to what you see above. You're done with installation but you need to replace with your blog's url. Also, you need to specify your own container's width as the above example is having 420 pixels wide. </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/6703898414649837023/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/tab-content-script.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/6703898414649837023'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/6703898414649837023'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/tab-content-script.html' title='Tab Content Script'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-4995375327070640321</id><published>2008-10-27T14:17:00.008+08:00</published><updated>2008-10-27T17:07:34.105+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="About"/><title type='text'>Butterfly on a wheel award</title><content type='html'><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaoZS6zBNY9mjcwR0ia0sbKuChlESWzwG9CFClQcbIpMjVO19K6EXWWDsfvkfjQhxDdjpw_iCTdnwr0o0oH1kgRWL0Aq_xB8j1AU6imWSwapSbUHTiCI4H2rLf6s7QNNzMUjTPe3rVX_qs/s200/butterfly_award.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 166px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaoZS6zBNY9mjcwR0ia0sbKuChlESWzwG9CFClQcbIpMjVO19K6EXWWDsfvkfjQhxDdjpw_iCTdnwr0o0oH1kgRWL0Aq_xB8j1AU6imWSwapSbUHTiCI4H2rLf6s7QNNzMUjTPe3rVX_qs/s200/butterfly_award.png" alt="" border="0" /></a> </div>Well guys, just to let you know that I won't be able to develop a consistent posting rhytm due to my studyload. Also, I must say that I am flattered and honoured to be given for this award. Thanks <a href="http://www.alluricious.com/">Allure</a>. As I try not to mortify the creator of the award, I then shall pass this award to:- <center><table><tbody><tr><td><a href="http://pjtangel.blogspot.com/"><img src="http://entrecard.s3.amazonaws.com/eimage/71758.jpg"width="60" /></a></td><td><a href="http://banicmanic.blogspot.com/"><img src="http://entrecard.s3.amazonaws.com/eimage/28389.jpg"width="60" /></a></td><td><a href="http://impnerd.com/"><img src="http://entrecard.s3.amazonaws.com/eimage/66780.jpg"width="60" /></a></td><td><a href="http://www.smokey-n-tiger.com/"><img src="http://entrecard.s3.amazonaws.com/eimage/57257.jpg"width="60" /></a></td><td><a href="http://picturetopeople.blogspot.com/"><img src="http://entrecard.s3.amazonaws.com/eimage/67385.jpg"width="60" /></a></td></tr><tr><td><a href="http://www.whataboutblog.com/"><img src="http://entrecard.s3.amazonaws.com/eimage/51303.jpg"width="60" /></a></td><td><a href="http://crazyfamilyof9.blogspot.com/"><img src="http://entrecard.s3.amazonaws.com/eimage/86001.jpg"width="60" /></a></td><td><a href="http://blog.orangederange.com/"><img src="http://entrecard.s3.amazonaws.com/eimage/54208.jpg"width="60" /></a></td><td><a href="http://solophotogallery.blogspot.com/"><img src="http://entrecard.s3.amazonaws.com/eimage/60436.jpg"width="60" /></a></td><td><a href="http://beyondferon.com/"><img src="http://entrecard.s3.amazonaws.com/eimage/66771.jpg"width="60" /></a></td></tr></tbody></table></center> The Rules: 1. Put the logo on your blog. 2. Add a link to the person who awarded it to you. 3. Link 10 other bloggers of whom you want to give this award to. </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/4995375327070640321/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/butterfly-on-wheel-award.html#comment-form' title='6 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/4995375327070640321'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/4995375327070640321'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/butterfly-on-wheel-award.html' title='Butterfly on a wheel award'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaoZS6zBNY9mjcwR0ia0sbKuChlESWzwG9CFClQcbIpMjVO19K6EXWWDsfvkfjQhxDdjpw_iCTdnwr0o0oH1kgRWL0Aq_xB8j1AU6imWSwapSbUHTiCI4H2rLf6s7QNNzMUjTPe3rVX_qs/s72-c/butterfly_award.png" height="72" width="72"/><thr:total>6</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-6503504482124340353</id><published>2008-10-20T13:36:00.007+08:00</published><updated>2011-12-17T15:38:55.073+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Ajax"/><title type='text'>Featured Articles Display</title><content type='html'><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i74.servimg.com/u/f74/11/94/91/73/screen10.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px;height:200px;" src="http://i74.servimg.com/u/f74/11/94/91/73/screen10.gif" alt="" border="0" /></a> </div>If you want to draw attention to a few particular articles. And also want to display on the front page, then you are really going to like this script which just happens to be a perfect addition to any Blogspot template to display a gallery of featured articles. The featured articles can be retrieved from an external file on your server via Ajax but for today's tutorial, I'll only show you how to turn your ordinary Html content into an interactive content display. Login to your Dashboard> Layout> Edit Html. Check the Expand Widget Templates check box. Copy<a href="http://www.fileden.com/files/2007/12/1/1619409/glidecontent.css"> here</a> and paste these lines into your CSS section. The preferred place to add CSS code is right in front of the closing b:skin tag Next, copy the scripts source code below and paste between the closing b:skin tag and the closing head tag. <code>&lt;script src=' http://onlinebiztutorials.googlepages.com/jquery-1.2.2.pack.js' type='text/javascript'/&gt; &lt;script src='http://onlinebiztutorials.googlepages.com/featuredcontentglider.js' type='text/javascript'/&gt;</code> Then, search for these lines. (You can use CTRL F to search for words) <code>&lt;div id='main-wrapper'&gt; &lt;b:section class='main' id='main' showaddelement='yes'&gt;</code> (Note - As for the shadowelement, it might not matter very much if its a yes or no) Place this code immediately after it. <code>&lt;b:widget id='Text99' locked='false' title='Featured Articles' type='Text'&gt; &lt;b:includable id='main'&gt; &lt;b:if cond='data:blog.url == data:blog.homepageUrl'&gt; &lt;!-- only display title if it's non-empty --&gt; &lt;b:if cond='data:title != &amp;quot;&amp;quot;'&gt; &lt;h2 class='title'&gt;&lt;data:title/&gt;&lt;/h2&gt; &lt;/b:if&gt; &lt;div class='widget-content'&gt; &lt;data:content/&gt; &lt;/div&gt; &lt;/b:if&gt; &lt;/b:includable&gt; &lt;/b:widget&gt;</code> Scroll down to the bottom and paste this code before the closing body tag. <code>&lt;script type='text/javascript'&gt; featuredcontentglider.init({ gliderid: &amp;quot;canadaprovinces&amp;quot;, //ID of main glider container contentclass: &amp;quot;glidecontent&amp;quot;, //Shared CSS class name of each glider content togglerid: &amp;quot;p-select&amp;quot;, //ID of toggler container remotecontent: &amp;quot;&amp;quot;, //Get gliding contents from external file on server? &amp;quot;filename&amp;quot; or &amp;quot;&amp;quot; to disable selected: 0, //Default selected content index (0=1st) persiststate: true, //Remember last content shown within browser session (true/false)? speed: 500, //Glide animation duration (in milliseconds) direction: &amp;quot;downup&amp;quot;, //set direction of glide: &amp;quot;updown&amp;quot;, &amp;quot;downup&amp;quot;, &amp;quot;leftright&amp;quot;, or &amp;quot;rightleft&amp;quot; autorotate: false, //Auto rotate contents (true/false)? autorotateconfig: [3000, 1] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping] }) &lt;/script&gt;</code> Save the template. Then, click Page Elements. You will see that you just created a new page element with the title "Featured Articles". Add these lines into it. <code>&lt;div id="canadaprovinces" class="glidecontentwrapper"&gt; &lt;div class="glidecontent"&gt; &lt;img src="http://i11.tinypic.com/8efzmmf.jpg" style="float: left; padding: 5px" /&gt; British Columbia is the westernmost of Canada's provinces and is famed for its natural beauty. It's capital is Victoria, located at the southeastern tip of Vancouver Island. BC's most populous city is Vancouver, located in southwest corner of the BC mainland called the Lower Mainland. &lt;/div&gt; &lt;div class="glidecontent"&gt; &lt;img src="http://i15.tinypic.com/72vilba.jpg" style="float: right; padding: 5px"/&gt; Ontario is a province located in the central part of Canada, the largest by population and second largest, after Quebec in total area. Toronto, the capital of Ontario, is the centre of Canada's financial services and banking industry. &lt;/div&gt; &lt;div class="glidecontent"&gt; &lt;img src="http://i17.tinypic.com/8bg0lkx.jpg" style="float: left; padding: 5px"/&gt; Yukon, still commonly referred to as "The Yukon Territory", is the westernmost of Canada's three northern territories. The Yukon's major appeal is its nearly pristine nature. Tourism relies heavily on this and there are many organised outfitters and guides available to hunters and anglers and nature lovers of all sorts. &lt;/div&gt; &lt;/div&gt; &lt;div id="p-select" class="glidecontenttoggler"&gt; &lt;a href="#" class="prev"&gt;Prev&lt;/a&gt; &lt;a href="#" class="toc"&gt;Page 1&lt;/a&gt; &lt;a href="#" class="toc"&gt;Page 2&lt;/a&gt; &lt;a href="#" class="toc"&gt;Page 3&lt;/a&gt; &lt;a href="#" class="next"&gt;Next&lt;/a&gt; &lt;/div&gt;</code> (The above is an example. Please change to your own words/images) A main DIV (ie: "canadaprovinces") should surround all of the individual articles to be featured, with each featured article also wrapped in a DIV of its own and tied together with its peers using a shared CSS class name (ie: "glidecontent"). The script should be fairly easy to use, however if you find any problem while use it, please drop a line in the comments below or contact, and I try my best to support you. If you like it and used it, please do leave a comment with a link to your site, it would be good to know that other people have found it useful. :wink: </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/6503504482124340353/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/featured-articles-display.html#comment-form' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/6503504482124340353'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/6503504482124340353'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/featured-articles-display.html' title='Featured Articles Display'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-6914661251655465125</id><published>2008-10-16T12:02:00.005+08:00</published><updated>2008-10-16T12:33:11.476+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Blogger Templates"/><title type='text'>Theme name : Portal</title><content type='html'><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i64.servimg.com/u/f64/11/94/91/73/screen10.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px;" src="http://i64.servimg.com/u/f64/11/94/91/73/screen10.gif" alt="" border="0" /></a> </div><a href="http://muncet.blogspot.com/">Ien</a> has released a new template called 'Portal'. I'd say a simple yet attractive design and definitely one of the few good templates. Alternatively, you can also customize the template to any concept or idea of your liking with some basic CSS editing. Click <a href="http://www.fileden.com/files/2007/12/1/1619409/portal.txt">here</a> to copy the script. This is a free template released under Creative Commons Attribution-ShareAlike 2.5 License. This means that you can use this template for your personal or commercial blog, edit it according to your needs, and even re-distribute it as long as you keep the credit links at footer. </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/6914661251655465125/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/theme-name-portal.html#comment-form' title='2 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/6914661251655465125'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/6914661251655465125'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/theme-name-portal.html' title='Theme name : Portal'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>2</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-1902846865250928328</id><published>2008-10-14T10:39:00.007+08:00</published><updated>2008-11-29T16:29:38.894+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Blogging Tools"/><title type='text'>Wowzio Widgets</title><content type='html'><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.fileden.com/files/2007/12/1/1619409/expbg1.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 325px; height: 220px;" src="http://www.fileden.com/files/2007/12/1/1619409/expbg1.gif" border="0" alt="" /></a></div> Do you like to own widgets that provide an elegant and simple way for your blog readers? What's more these widgets are free, fast, completely customizable and no registration is required. Also, they give you 6 widget options. For example, Wowzio's Feed Content Widget displays the most recent 50 posts from your blog. With each post, the widget can also display an image, as well as a short snippet of the post body. Wowzio widgets are based on open standards ( javascript &amp; css ), and supports all blogging platforms that allow javascript to be embedded. By adding these widgets, it makes you more likely helping your readers to navigate and discover awesome content on your blog. Visit <a href="http://www.wowzio.com/">Wowzio</a> as you can get the code directly from their site. If you'd like to learn more about their widgets, you may also visit their <a href="http://blog.wowzio.com/2008/06/wowzio-widgets-platform-for-blogs.html">official Wowzio blog</a>. Truly amazing widgets and I must say they are excellently well done. This is exactly the kind of implementation any service should strive for and should be take in count for any widget. Hat off to Ashish Baldua and Manish Baldua plus their team for getting this gig. </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/1902846865250928328/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/wowzio-widgets.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/1902846865250928328'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/1902846865250928328'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/wowzio-widgets.html' title='Wowzio Widgets'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-7324010268526510018</id><published>2008-10-11T15:41:00.011+08:00</published><updated>2011-12-23T20:55:36.940+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Blogging Tools"/><title type='text'>The Real Top Posts Widget</title><content type='html'><div style="text-align: center;">
<a href="http://i44.servimg.com/u/f44/11/94/91/73/aiders10.gif"><img alt="" border="0" src="http://i44.servimg.com/u/f44/11/94/91/73/aiders10.gif" style="cursor: hand; cursor: pointer; display: block; height: 162px; margin: 0px auto 10px; text-align: center; width: 278px;" /></a></div>
 
<div style="text-align: center;">
<a href="http://i44.servimg.com/u/f44/11/94/91/73/aiders11.gif"><img alt="" border="0" src="http://i44.servimg.com/u/f44/11/94/91/73/aiders11.gif" style="cursor: hand; cursor: pointer; display: block; height: 62px; margin: 0px auto 10px; text-align: center; width: 441px;" /></a></div>
 
I'm not satisfied with the top post widgets made available on the net. Most of the widgets are purely based on the number of comments. To me, the right widget name should be called "The Most Commented" widget. This is quite frustrating, and I bet that's why it turned many users off using their widgets. 
While searching for other alternatives, I stumbled accross this site - <a href="http://labs.postrank.com/">AideRSS</a> and found it interesting. Their widget allows you to share and embed your top posts on your own blog. Their purpose is not only to add a fun and interactive element to your page but also it keeps your readers up to date on your list of top posts. Besides, you have the options to choose for the time period of 365 days, 30 days, 7 days and 1 day. Also, the number of records to be displayed. A scale of one to ten used for rating your top posts and I'd say their method is more reliable which in turn is derived from a total of number of comments, number of bookmarks, number of diggs, number of tweets etc. The upper end of the scale is represented by "ten" and is usually hold to mean 'excellent'. Type in the URL of the feed in AideRSS and hit analyze. Once the digest page is loaded, navigate to the “Sharing &amp; Widgets” tab, there you will find the HTML code for your web-page. Copy the JavaScript code into your page, and you’re all done! Get the widget and claim one for yourself :wink:</content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/7324010268526510018/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/real-top-posts-widget.html#comment-form' title='2 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/7324010268526510018'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/7324010268526510018'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/real-top-posts-widget.html' title='The Real Top Posts Widget'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>2</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-1395807196358046259</id><published>2008-10-09T20:51:00.006+08:00</published><updated>2011-12-17T15:48:46.277+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="JavaScript"/><title type='text'>How To Make A Pie Chart?</title><content type='html'><div style="text-align: center;"><a href="http://i44.servimg.com/u/f44/11/94/91/73/scree219.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px;" src="http://i44.servimg.com/u/f44/11/94/91/73/scree219.jpg" alt="" border="0" /></a> </div>As <a href="http://onlinebiz-my.blogspot.com/2008/09/plotting-line-graph.html">previously explained</a>, I did show you how to plot a line graph. Now, it's time to show you how to make a pie chart. Also we will look at how to represent data in terms of a pie chart. Hopefully, you will be able to view and make your own pie charts. It is very simple and extremely easy. To make this possible, you must have the point data and my point data I used to do a graph is shown below:- <div style="text-align: center;"><a href="http://i44.servimg.com/u/f44/11/94/91/73/data1110.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px;" src="http://i44.servimg.com/u/f44/11/94/91/73/data1110.gif" alt="" border="0" /></a> </div>Login to your Dashboard&gt; Layout&gt; Edit Html. Check the Expand Widget Template check box. Copy the scripts source code below and paste between the closing b:skin tag and the closing head tag. (Note - This script requires two external files to support it.) <code>&lt;script src='http://onlinebiztutorials.googlepages.com/wz_jsgraphics.js' type='text/javascript'/&gt; &lt;script src='http://onlinebiztutorials.googlepages.com/pie.js' type='text/javascript'/&gt;</code> Save the template. Now moving forward on your post editor which is under Edit Html mode. Copy and paste this script into your post editor as shown below:- <code>&lt;div id="pieCanvas" style="overflow: auto; position:relative;height:350px;width:380px;"&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt; var p = new pie(); p.add("Jan",100); p.add("Feb",200); p.add("Mar",150); p.add("Apr",120); p.add("May",315); p.add("Jun",415); p.add("Jul",315); p.render("pieCanvas", "Pie Graph") &lt;/script&gt;</code> <div style="text-align: center;"><a href="http://i44.servimg.com/u/f44/11/94/91/73/posted11.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px;" src="http://i44.servimg.com/u/f44/11/94/91/73/posted11.gif" alt="" border="0" /></a> </div>Continue with your post and don't forget to click on "Publish Post" button to complete the entry. That's it. Enjoy! (Note - red represents the month while blue indicates the revenue.) </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/1395807196358046259/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/how-to-make-pie-chart.html#comment-form' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/1395807196358046259'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/1395807196358046259'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/how-to-make-pie-chart.html' title='How To Make A Pie Chart?'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-7615641325972407124</id><published>2008-10-08T03:09:00.008+08:00</published><updated>2008-10-11T10:10:06.607+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="About"/><title type='text'>Announcement</title><content type='html'><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i44.servimg.com/u/f44/11/94/91/73/underc10.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px;" src="http://i44.servimg.com/u/f44/11/94/91/73/underc10.jpg" alt="" border="0" /></a> If you see this page, it means the site is currently under major construction as I think my current template is in need of some severe prunning :wink: As most of my regular readers know, I gave this blog a drastic redesign a few days ago. While many people liked the old design (AJAX driven template), I was beginning to feel a little boxed in. Here is the before: <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i44.servimg.com/u/f44/11/94/91/73/scree220.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px;" src="http://i44.servimg.com/u/f44/11/94/91/73/scree220.jpg" alt="" border="0" /></a> My latest design is not integrated with AJAX features except for a list of the most recent comments as I just want to have a normal template. </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/7615641325972407124/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/announcement.html#comment-form' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/7615641325972407124'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/7615641325972407124'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/announcement.html' title='Announcement'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-3916138096257001201</id><published>2008-10-06T05:05:00.008+08:00</published><updated>2008-11-29T13:56:20.009+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Blogging Tips"/><title type='text'>Create An Online Store Part 3</title><content type='html'><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i44.servimg.com/u/f44/11/94/91/73/ejunki10.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 495px; height: 290px;" src="http://i44.servimg.com/u/f44/11/94/91/73/ejunki10.jpg" border="0" alt="" /></a> </div>You read my <a href="http://feedproxy.google.com/%7Er/blogspot/RFAK/%7E3/MGEXkZr6p-g/create-online-store-part-2.html">previous article</a> about a script to display your products, thus allowing customers to make selections. Today, I'll show you how to accept payment by using <a href="http://www.fatfreecart.com/">FatFreeCart</a>. FatFreeCart is the free version of E-junkie shopping cart. This simpler method is a multiproduct order page, which lets customers enter quantities next to each item. What you need to do is to cut and paste the code in your blog. Cited from an article by E-Junkie.com:- <blockquote>If you are already using PayPal shopping cart, you will find the button code is similar. On top of being certified by PayPal and Google, it has been successfully tested on humans and they absolutely love it (which means higher conversion rates for you). FatFreeCart is also the only serious cart with a somewhat funny name.</blockquote> As mentioned above, there are two options for accepting payments online which is also known as Person to Person services:- a- PayPal b- Google Checkout Among top features are as follow:- # Handles shipping, handling, tax. # Handles up-to 3 option variables. # Can handle all currencies supported by PayPal (16) and Google Checkout (2). # Passed your site's Google Analytics data to Google Checkout # Simply set the product price to 0.00 to let buyer enter her own amount! Get the code <a href="http://www.fatfreecart.com/code.html">here</a>. You just need to modify the code to add your product details to the and paste it in your blog. For those who so eagerly want to start their online store, why wait? </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/3916138096257001201/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/create-online-store-part-3.html#comment-form' title='2 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/3916138096257001201'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/3916138096257001201'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/create-online-store-part-3.html' title='Create An Online Store Part 3'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>2</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-739484906012753378</id><published>2008-10-02T20:13:00.009+08:00</published><updated>2008-11-29T13:57:38.264+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Blogging Tips"/><title type='text'>Create An Online Store Part 2</title><content type='html'><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i44.servimg.com/u/f44/11/94/91/73/scree217.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 315px; height: 190px;" src="http://i44.servimg.com/u/f44/11/94/91/73/scree217.jpg" border="0" alt="" /></a> </div>The requirements for building a basic online shop are fairly straightforward. It allows you to sell a small range of products, providing photos, descriptions and prices as well as accept orders online. More importantly, it lets your users to access your products from the storefront. As described above, every online storefront needs two components: a catalog to display your products and to allow customers to make selections, and a method of accepting payment. There are numerous ways to present your products in a sellable manner. This article concentrates in a slideshow format. This script will scroll your containing products from right to left. Products can be set to click through to various URLs, and when the mouse moves over the "product", it pauses for the visitor to interact. I purposely choose to embed the above script into the sidebar. Using catalogue format to display product lines on your sidebar is not recommended due to space limitations. Login to your Dashoard> Layout> Page Elements. Copy <a href="http://www.fileden.com/files/2007/12/1/1619409/right-left-slide.txt">here</a> and paste this code into your Html/Javascript. Look for these lines and change to suit your own preferences:- <code>leftrightslide[0]='&lt;a href="http://"&gt;&lt;img src="dynamicbook1.gif" border=1&gt;&lt;/a&gt;' leftrightslide[1]='&lt;a href="http://"&gt;&lt;img src="dynamicbook2.gif" border=1&gt;&lt;/a&gt;' leftrightslide[2]='&lt;a href="http://"&gt;&lt;img src="dynamicbook3.gif" border=1&gt;&lt;/a&gt;' leftrightslide[3]='&lt;a href="http://"&gt;&lt;img src="dynamicbook4.gif" border=1&gt;&lt;/a&gt;' leftrightslide[4]='&lt;a href="http://"&gt;&lt;img src="dynamicbook5.gif" border=1&gt;&lt;/a&gt;'</code> Also, don't forget to add a page title as we all know a good page title is the most important page element to site users. Save settings and you're done! </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/739484906012753378/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/create-online-store-part-2.html#comment-form' title='2 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/739484906012753378'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/739484906012753378'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/10/create-online-store-part-2.html' title='Create An Online Store Part 2'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>2</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-2100601389346570970</id><published>2008-09-23T20:47:00.015+08:00</published><updated>2008-10-09T05:40:49.554+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Blogging Tips"/><title type='text'>Create An Online Store Part 1</title><content type='html'><center><table border="1" bordercolor="#000000" width="100%" bgcolor="#FFFFFF"> <tr> <td><a href="images/image-1.jpg" title="Part 1"><img src="http://www.fileden.com/files/2007/12/1/1619409/dynamicbook1.gif"/></a>Part 1</td><td><a href="images/image-1.jpg" title="Part 2"><img src="http://www.fileden.com/files/2007/12/1/1619409/dynamicbook2.gif"/></a>Part 2</td><td><a href="images/image-1.jpg" title="Part 3"><img src="http://www.fileden.com/files/2007/12/1/1619409/dynamicbook3.gif"/></a>Part 3</td><td><a href="images/image-1.jpg" title="Part 4"><img src="http://www.fileden.com/files/2007/12/1/1619409/dynamicbook4.gif"/></a>Part 4</td><td><a href="images/image-1.jpg" title="Part 5"><img src="http://www.fileden.com/files/2007/12/1/1619409/dynamicbook5.gif"/></a>Part 5</td></tr></table></center><center><table cellspacing="2" cellpadding="2" style="border: thin solid rgb(100,100,100);font-family: Verdana; font-size: 11px; color: rgb(0, 0, 0);" bgcolor="#ffffff"> <tr align="center"><th style="color: rgb(0, 0, 0);" bgcolor="#dddddd">Books For Sale</th></tr><tr><td align="center"><form action="https://www.e-junkie.com/ecom/fgb.php?c=cart&cl=1&ejc=2" target="ej_ejc" method="post"><div style="background:#eeeeee">Dynamic HTML <input value="Dynamic HTML" name="on0" type="hidden"/><select style="width:97%" name="os0"><option value="Part 1"/>Part 1<option value="Part 2"/>Part 2<option value="Part 3"/>Part 3<option value="Part 4"/>Part 4<option value="Part 5"/>Part 5</select></div><input value="" name="merchant_id" type="hidden"/><input value="pjtechno@gmail.com" name="business" type="hidden"/><input value="http://onlinebiz-my.blogspot.com/" name="site_url" type="hidden"/><input value="pjtechno@gmail.com" name="contact_email" type="hidden"/><input value="http://onlinebiz-my.blogspot.com/" name="return_url" type="hidden"/><input value="" name="custom" type="hidden"/><input value="USD" name="currency_code" type="hidden"/><input value="5.00" name="shipping" type="hidden"/><input value="2.00" name="shipping2" type="hidden"/><input value="2.00" name="handling" type="hidden"/><input value="1.00" name="tax" type="hidden"/><input value="Books For Sale" name="item_name" type="hidden"/><input value="1" name="item_number" type="hidden"/><input value="15.00" name="amount" type="hidden"/><input value="1" name="quantity" type="hidden"/> <input border="0" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif"onclick="javascript:return EJEJC_frm(this.parentNode);" type="image"/></form></td></tr></table><a href="https://www.e-junkie.com/ecom/fgb.php?c=cart&cl=1&ejc=2&merchant_id=&business=pjtechno@gmail.com" target="ej_ejc" class="ec_ejc_thkbx" onclick="javascript:return EJEJC_lc(this);"><img border="0" src="https://www.e-junkie.com/ej/ej_view_cart.gif"/></a><script language="javascript" type="text/javascript"></script><script src="https://www.e-junkie.com/ecom/box.js" type="text/javascript"></script></center> We all know that most of the existing storefronts that can be integrated in Blogspot are geared only for sales of affiliate items. Either you embed on Amazon aStore in your sidebar or else you place the Adsense code in your template, which is not a bad way to monetize your blog. While the third party like Etsy, allowed you to upload and sell your own products and then embed the store directly into your blog, it doesn't solve the problem of selling your other products. Until recently, I came across <a href="http://www.secludedhabitat.com/">Stuart's blog</a> while dropping my card. When you visit his gallery, you're presented with a dynamic catalog of items featuring a thumbnail image, a link for more info, a price and an Add Album To Cart button. It is a perfect example of what I'd like to be able to do on my Blogspot blogs. By the way, his blog runs on WordPress. <div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i536.photobucket.com/albums/ff324/onlinebusinessmy/ScreenHunter_06Sep232041.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px;" src="http://i536.photobucket.com/albums/ff324/onlinebusinessmy/ScreenHunter_06Sep232041.jpg" alt="" border="0" /></a> </div> This tutorial is divided into 3 parts:- a- Part 1 - An introduction to E-commerce b- Part 2 - <a href="http://feedproxy.google.com/%7Er/blogspot/RFAK/%7E3/MGEXkZr6p-g/create-online-store-part-2.html">Displaying your products</a> c- Part 3 - <a href="http://feedproxy.google.com/%7Er/blogspot/RFAK/%7E3/VDiIqg-WdQY/create-online-store-part-3.html">Adding items to your shopping cart</a> See you then! </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/2100601389346570970/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/09/create-online-store-part-1.html#comment-form' title='7 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/2100601389346570970'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/2100601389346570970'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/09/create-online-store-part-1.html' title='Create An Online Store Part 1'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>7</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-4545418579729749780</id><published>2008-09-22T01:36:00.008+08:00</published><updated>2008-11-29T14:01:46.011+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Blogging Tips"/><title type='text'>Avoid Tripping On An Ambiguity in JavaScript</title><content type='html'>Many bloggers are having problems with displaying two or more Javascripts on their blog. Either one will fail to load e.g if you have another script on your page that accesses the BODY onload event or (window.onload), one of them will not run. Eventually, you all get frustrated and left to wander what went wrong. The reason why is simple. It is called "Script Conflict". When you have two or more scripts that each contain Body onload or window.onload, either one or all the scripts will no longer work. How to make them to work simultaneously? Here are two scenarios:- <div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i34.servimg.com/u/f34/11/94/91/73/exampl12.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 484px; height: 49px;" src="http://i34.servimg.com/u/f34/11/94/91/73/exampl12.jpg" border="0" alt="" /></a></div> To solve the problem, remove both lines and call the scripts directly as shown below:- Examples <div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i34.servimg.com/u/f34/11/94/91/73/exampl13.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 484px; height: 49px;" src="http://i34.servimg.com/u/f34/11/94/91/73/exampl13.jpg" border="0" alt="" /></a> </div> <div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.fileden.com/files/2007/12/1/1619409/exampl14.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 484px; height: 49px;" src="http://www.fileden.com/files/2007/12/1/1619409/exampl14.jpg" border="0" alt="" /></a></div> Replace with:- <div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i34.servimg.com/u/f34/11/94/91/73/exampl15.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 484px; height: 49px;" src="http://i34.servimg.com/u/f34/11/94/91/73/exampl15.jpg" border="0" alt="" /></a> </div>And place it immediately before the closing BODY tag in your template. (Note - If you wish to combine three scripts, the procedure is the exact same.) Hope, this helps. </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/4545418579729749780/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/09/avoid-tripping-on-ambiguity-in.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/4545418579729749780'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/4545418579729749780'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/09/avoid-tripping-on-ambiguity-in.html' title='Avoid Tripping On An Ambiguity in JavaScript'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-1890765434177641269</id><published>2008-09-19T19:49:00.016+08:00</published><updated>2011-12-17T15:24:21.681+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Ajax"/><title type='text'>Slideshow Into Your Blog Post</title><content type='html'><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i44.servimg.com/u/f44/11/94/91/73/scree218.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 392px; height: 358px;" src="http://i44.servimg.com/u/f44/11/94/91/73/scree218.jpg" border="0" alt="" /></a>Artwork by <a href="http://www.studioaston.com/">asmady ahmad photography</a> </div>This script takes list of images and creates a smooth scrolling photo gallery into your blog post i.e instantly create an image gallery by writing just few lines of HTML. It will also create pagination to allow you to flow through your photos. This tutorial will help you quickly install and configure the script on your blog. Before we move on, I should highlight that all the images within a single gallery must have the same width/height ( 370x250 in pixels). But if you can't live without declaring your images size, this script will use your declared dimensions. Login to your Dashboard> Layout> Edit Html. Check the Expand Widget Template check box. Copy <a href="http://www.fileden.com/files/2007/12/1/1619409/slider%20wrapper.css">here</a> and paste these lines into your CSS section. The preferred place to add CSS code is right in front of the closing b:skin tag Next, copy the script source code below and paste between the closing b:skin tag and the closing head tag. <code>&lt;script type="text/javascript" src="http://onlinebiztutorials.googlepages.com/contentslider.js"&gt;&lt;/script&gt;</code> Scroll down to your closing Body tag, place this script immediately before it. <code>&lt;script type="text/javascript"&gt; featuredcontentslider.init({ id: "slider2", //id of main slider DIV contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc] nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide. revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover" enablefade: [true, 0.2], //[true/false, fadedegree] autorotate: [false, 3000], //[true/false, pausetime] onChange: function(previndex, curindex){ //event handler fired whenever script changes slide //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc) //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc) } }) &lt;/script&gt;</code> Save the template. Then, click on "Posting". Add these lines into your post editor. <code>&lt;div id="slider2" class="sliderwrapper"&gt; &lt;div class="contentdiv"&gt; &lt;img src="http://i34.servimg.com/u/f34/11/94/91/73/pic110.jpg"/&gt; &lt;/div&gt; &lt;div class="contentdiv"&gt; &lt;img src="http://i34.servimg.com/u/f34/11/94/91/73/pic213.jpg"/&gt; &lt;/div&gt; &lt;div class="contentdiv"&gt; &lt;img src="http://i34.servimg.com/u/f34/11/94/91/73/pic310.jpg"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="paginate-slider2" class="pagination"&gt; &lt;a href="#" class="toc"&gt;Page 1&lt;/a&gt; &lt;a href="#" class="toc anotherclass"&gt;Page 2&lt;/a&gt; &lt;a href="#" class="toc"&gt;Page 3&lt;/a&gt; &lt;a href="#" class="prev" style="margin-left: 10px"&gt;&lt;&lt;/a&gt; &lt;a href="#" class="next"&gt;&gt;&lt;/a&gt; &lt;/div&gt;</code> Publish your post and you're done! (Note - Change the image urls to yours. Add another Div tag if you want to add more photos but you also need to add this code <code>&lt;a href="#" class="toc"&gt;Page 4&lt;/a&gt;</code> into the pagination script.) </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/1890765434177641269/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/09/slideshow-into-your-blog-post.html#comment-form' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/1890765434177641269'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/1890765434177641269'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/09/slideshow-into-your-blog-post.html' title='Slideshow Into Your Blog Post'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-6215370811350331379.post-6933485146409357030</id><published>2008-09-15T22:14:00.012+08:00</published><updated>2008-12-27T12:41:25.046+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Ajax"/><title type='text'>Image Gallery Into Your Blog Post</title><content type='html'><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i34.servimg.com/u/f34/11/94/91/73/screen23.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 493px; height: 272px;" src="http://i34.servimg.com/u/f34/11/94/91/73/screen23.jpg" alt="image gallery" border="0" /></a> </div>If you'd like to showcase your image galleries in a slightly different way from what most lightbox scripts do, FrogJS Image Gallery is the answer. You view the images in sequence, by clicking on the previous and next images' thumbnail. Thumbnails are placed at the left and right edges of the FrogJS DIV and the main image is centered within that DIV. For this example, I've defined 3 images, the three thumbnails are 125px wide and the main image is 400px wide, my FrogJS DIV’s width to at least 700px Here's a step by step guide to installing the script. Login to your Dashboard> Layout> Edit Html. Copy and paste these lines into your CSS section. The preferred place to add CSS code is right in front of the closing b:skin tag #FrogJS{ width: 700px; height: 600px; margin: 0 auto; } #FrogJSCredit{ text-align: right; font-size: 80%; color: #999; padding: 1px; } #FrogJSCaption{ text-align: left; line-height: 140%; } Next, copy the scripts source code below and paste between the closing b:skin tag and the closing head tag. <code>&lt;script type="text/javascript" src="http://onlinebiztutorials.googlepages.com/prototype.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://onlinebiztutorials.googlepages.com/scriptaculous.js?load=effects"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://onlinebiztutorials.googlepages.com/frog.js"&gt;&lt;/script&gt;</code> Save the template. Then, click Settings> Formatting> Post Template. Add these lines into the post template box. <code> &lt;div id="FrogJS"&gt; &lt;a href="images/1.jpg" title="Your Image Title"&gt; &lt;img src="images/1_thumb.jpg" alt="Your Image Description" /&gt; &lt;/a&gt; &lt;a href="images/2.jpg" title="Your Image Title"&gt; &lt;img src="images/2_thumb.jpg" alt="Your Image Description" /&gt; &lt;/a&gt; &lt;a href="images/3.jpg" title="Your Image Title"&gt; &lt;img src="images/3_thumb.jpg" alt="Your Image Description" /&gt; &lt;/a&gt; &lt;/div&gt;</code> Example:- <div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i34.servimg.com/u/f34/11/94/91/73/postte12.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 300px; height: 100px;" src="http://i34.servimg.com/u/f34/11/94/91/73/postte12.jpg" alt="" border="0" /></a> </div> Save settings. You'll notice that anything you type into the box of "Post Template" will appear in your new post. (Note - All your images must go inside the DIV tag. Just add another DIV tag if you want to increase the number of images.) </content><link rel='replies' type='application/atom+xml' href='http://onlinebiz-my.blogspot.com/feeds/6933485146409357030/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/09/image-gallery-into-your-blog-post.html#comment-form' title='3 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/6933485146409357030'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6215370811350331379/posts/default/6933485146409357030'/><link rel='alternate' type='text/html' href='http://onlinebiz-my.blogspot.com/2008/09/image-gallery-into-your-blog-post.html' title='Image Gallery Into Your Blog Post'/><author><name>Is</name><uri>http://www.blogger.com/profile/00184908157927273832</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0gUkcCGfLx_i5JL-OvQPTRMWnNXX_yBWith_bB0R3Q7MasRvUvxJgxxo2SE-8Jz96paMtkidRf1LZAp7iWm_oxcGzHnoPzjAm4sa90dvEWwLSgTVUL-M-goSINLRow/s220/author1.jpg'/></author><thr:total>3</thr:total></entry></feed>

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

Download the "valid Atom 1.0" banner.
Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)
Add this HTML to your page (change the image src attribute if necessary):

<a href="http://www.feedvalidator.org/check.cgi?url=http%3A//onlinebiz-my.blogspot.com/feeds/posts/default"><img src="valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a>

If you would like to create a text link instead, here is the URL you can use:

http://www.feedvalidator.org/check.cgi?url=http%3A//onlinebiz-my.blogspot.com/feeds/posts/default

Home · About · News · Docs · Terms