Welcome to my blog! This blogging is designed to help you start creating a professional blogging. All the blogging tips and tutorials will enable you to learn blogging in several weeks. If you think this blog is useful, please donate $1.00 via your paypal account.

Saturday, August 29, 2009


Create moving text/news gadget

This video is to show how the moving text/news can be created.


Free Tools for blogger

This article give you a summary of free tools to start blogging. It depends largely on how you want to present your posts to the visitors. For example, myself, I have many thoughts to make the posts exceptional. I would like to visitors view dynamic contents such as youtube videos, powerpoint like presentation... In order to minimize the cost, we tend to choose free but secure softwares. After careful try and selection, I recommend you try the following softwares. You may need to use google search engine to locate them.
Show Details
  • Graphics processing: Gimp
  • Screen capture: CamStudio
  • Gadget editor: iGoogle Google Gadget Editor
  • Pdf To swf tool: swftools
  • Powerpoint to swf tool: iSpring

Friday, August 28, 2009


Create collapsible blog posts

This video is to show how the collapsible post makes your blog compact and improve the user experience.

Tuesday, August 25, 2009


how to develop a gadget - collapsible panel

In this post, I will explain how to develop a gadget called collapible panel.

When you click the header region, the box will be collapsed or expanded. Here is how I develop this gadget.Collapible panel code
You might want to change the style yourself in order to make it suitable to your blogging. Another way is that you can make the style settings available to end users. For example, the header background color, header font, can be added to UserPref block.


how to add a separate line between blog posts

In order to make the reader/visitor view your posts easily, it is a good idea to separate your posts with a line, just like the way my blog goes. Here is how I make this work:

Whenever you create a new post or edit the existing posts, you can do that by adding <hr /> ahead of the post title. For example, I have a post with title "How to add a separate line between posts", you can simply change it as "<hr />How to add a separate line between posts".


How to add a logo on your blog?

Do you want to add a logo on your blog, for example, the logo on my blog.
There are many ways to do this job, but here is the simple way to do this.
Instead of putting the logo and description in the header widget, I put the logo as well as description in a HTML/Javascript gadget. Below is the code for the gadget.
<table><tr>
<td><br/>
<img src="$LOGO_Link" align="middle"/>
</td>
<td valign="top" align="left">
<h1>$TITLE</h1>
$DESCRIPTION
</td>
</tr></table>

Clear the Description text in the header gadget, Replace the $LOGO_Link, $TITLE, $DESCRIPTION in the HTML/Javascript gadget and Rearrange your layout such that the gadget is just under the header gadget.


how to place the adsense gadget on the left/right side of layout

By default, the Adsense gadget can be placed on the sidebar or footer or header or between posts as shown below(click the image to zoom in).

How about placing the adsense gadget at the left/right side of the main page? as shown below (click the image to zoom in). By doing this, the effect will be like the one shown on my blog homepage.

To do this, you need to change the layout in the HTML editing mode.

<table><tr>
<td valign='top'>LEFT Adsense gadget</td>
<td>Body Layout</td>
<td valign='top' >RIGHT Adsense gadget</td>
</tr></table>


Where the body layout is the code between body tag of the original HTML template file, and the left/right adsense gadget code is like this

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
</b:section>
</div>


and


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='AdSense2' locked='false' title='' type='AdSense'/>
</b:section>
</div>