Welcome to my personal blog. You are surfing a simple blog tutorial for html coding. Feel free to ask to ask anything about coding here. UPDATE regularly!

Put the flash file on blog

Need your blog seem cool? Flash application is very important for web nowaday.

this is sample of flash, pretty cool huh, compare to .gif file

first of all, you need to create your own flash. a ton of software you can search on google that help you make a flash file in flash.

then, you need to save for flash file to web storage, also a lot of website offer the file storage for free, for my case, i choose www.filen.com. dont ask me why, because it is the best storage i found this time.

Now, i got my flash link, http://www.fileden.com/files/2008/3/12/1810036/Header.swf

and the code is

<.embed height="100" type="application/x-shockwave-flash" pluginspage=" http://www.macromedia.com/go/getflashplayer" width="500" src="http://www.fileden.com/files/2008/3/12/1810036/Header.swf"><./embed>

change my link to yours.

Please note there is hidden dot "." in this code (white colour) to prevent it show the flash. if you copy and paste it, make sure you remove the dot just after "<" in begining and ending of code

Please ask me if you need more assistance

Link to New Window

This feature is important to not lost your visitor to othher linking page. Default, when you click a url in blogspot, the web will open in new page. With simple coding added, you can open a webpage to a new window.

let see this coding you put in blog (you can view it via edit HTML section)

google search engine <---- Click this will open the search engine in same browser the code is like this <.a http://www.google.com/">google search engine<./a>

now just add- target="new" to your coding just after .com/" and before >

and now your coding will be like this
<.a http://www.google.com/"target="new">google search engine<./a>

Now, with same word, but the link now open in new browser

google search engine

Hope this help you a lot guys

<< BACK and NEXT >> Html code

This is one of my favorite oode. although it no need in a website (you can access BACK and NEXT by clicking to tp top left explorer). Sometime, this code can be very important to give a direct direction to your users.

so here the code is

<.div align="center"> <.a href='#' onclick="history.go(-1);">[back]<./a> <.a href='#' onclick="history.go(+1);">[next]<./a><./div>

Please notice that i put some dot (.) after the "<" symbol to prevent this code detect by blogger html editor. "-1" and "+1" is the page number that you want to access

Now you can put in your blog or site. it come handy to your user to review your item/product.


Slow Down Moving Text

Marquee that slows down when the mouse is over

Source Code:

<.marquee onMouseover="this.scrollAmount=3" onMouseout="this.scrollAmount=6">Put your text here. Scrolling text here. Point Your Mouse here. Put your text here. Scrolling text here. Point Your Mouse here. Put your text here. Scrolling text here. Point Your Mouse here. Put your text here. Scrolling text here. Point Your Mouse here. Put your text here. Scrolling text here. Point Your Mouse here<./marquee>

Put your text here. Scrolling text here. Point Your Mouse here. Put your text here. Scrolling text here. Point Your Mouse here. Put your text here. Scrolling text here. Point Your Mouse here. Put your text here. Scrolling text here. Point Your Mouse here. Put your text here. Scrolling text here. Point Your Mouse here

Note that:
onMouseover="this.scrollAmount=3 - if you change the value 3 to 0, this text stop moving. 3 and 6 is speed of moving text


Marquee is one of powerful tools for website coding. Marquee means to some moving or scrolling of the contents. Here i show a simple guide for marquee. Still you can modified by put other code like hyperlinks, font type, color etc.

This is CCS code, can use in many type of web, but not in shoutbox

Marquee Right to Left


Marqee Left to Right


Alternates Back and Forth Marquee


Marquee Up


Marquee Down


Marquee Up and Down






You can specify you marquee size by adding size code witdh and height that i will explain later in next time. Marquee tool is fun, take a try combine with other html code

Add Blogger Search Box

The Google Navigation bar at the top of your Blogger blogs has an embedded search box. However, you may want to include a similar box in the main body of your blog (like what I have done), or the sidebar. Other than the convenience for users, the added advantage is that unlike Google search box, the search results of this Blogger.com search box appear in the main body of your Blog.

Under Template->Page Elements tab, click “Add a Page Element” at the place where you want your search box to appear. Select “HTML/JavaScript”.

There are several HTML codes posted on the net. I tried a few, and found the one that works as follows:-

Remember to change YOUR BLOG URL to the URL or web address of your Blog. Also, change the NAME OF YOUR BLOG to that which you want to call your site. For instance, if your Blog Name is long, you may want to write something like “Search Here” or “Search this site”.

You can also change the “Search” button to say, “Hit” or “Go”, by changing the Value.

Save the code and refresh your page. If you want a longer or shorter search box, you can play around with the size.

The above example of a width size="20" and value="Hit" will give you this:-

Whereas a width size="30" and value="Go" will give you this:-

The size of the search box is a matter of appearance. You may have noticed that the maxlength="255". This indicates that a user may enter up to 255 characters in the search box, which I think is sufficient and need not be altered.

Image instead of Search button

Just for the fun of it, if you want readers to click an image instead of a button, you will first need to do up a small picture. You can also resize a picture you already have with photo editing tools like Google's Picasa. After creating a picture, upload it onto a free server like GooglePages or Google Groups, or other free hosts that offer direct links to the image files. Take note of this IMAGE URL.

The HTML code to insert is this:-

Remember to insert into the code the IMAGE URL, where your picture is uploaded. You can align the image to the top, bottom or set a horizontal space between the bar and the image by using a hspace tag.

Add Yahoo! Messenger to Blog

One of cool widget that can put in your blog, Yahoo!! Mesengger. This widget can show to your website visitor that you available online to ask any question through Yahoo!! Mesengger. There is 10 of icon sytle that you can add on your blog.

To placed the yahoo! messenger icon just place this code at your blog, use this html code :

For example. If your yahoo ID is joel1234@yahoo.com, your ID is joel1234, So the code for yahoo! messenger icon with choice Style ID 9 is as follows :

Now, place the code to your blog by Click at Page Element and Choose HTML/JavaScript Code.

This widget is cool and you can get quick response from your visitor. It very suitable for live support method.

After trying a few experiment with this code, i get very nice thing to share.
Note that the code part ymsgr:addfriend? when someone click on the Ym icon that you choose, it will automaticly adding as friend (of course it still need approval by ID owner). But how to get into Chat Box instantly? just simply change the addfriend? to sendIM?
addfriend? ----> add as friend
sendIM? ----> Chat instantly

Now experience it your self. This is really cool blog widget!!

New icon have been added! Now you have variety Ym icon to put in your blog








Visit us later for more cool tip and html code