Tipbits

Embedding video

2008-12-01T20:28:00.000-08:00

Some very good websites to read:

http://www.jeroenwijering.com/?item=FLV_Video_Compression
http://stephenjungels.com/jungels.net/articles/flash-video-howto.html

<script type='text/javascript' src='swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','320','240','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=video.flv&autostart=false');
s1.write('preview');
</script>

how ro embed rtm live streaming (test)

2008-03-09T10:36:00.000-07:00

2008-03-09T00:01:00.000-08:00

2008-03-08T23:35:00.001-08:00

The browder doesn't support iframe.

Cross-browser compatibility

2008-01-03T23:15:00.002-08:00

After designing my blog in Mozilla, I realized that it doesn't look good in Internet Explorer. What I can do is to include the following code in my head section.



You can google with the search phrase "Cross-browser compatibility" for more help. One such good article can be found here.

2008-01-03T23:15:00.001-08:00

A good article can be found here.

Adding Amazon Product Link - Image Only

2007-12-31T19:11:00.000-08:00

Instead of putting the following product preview HTML code/script after the content and before <body> as suggested in Amazon website, you can insert it in the last blogger page element containing the product link code. That is, you may have a few Amazon product link page elements in your page. You only need to add the script in the last page element.

Tipbits - First Bite

2007-12-18T12:09:00.000-08:00

I decided to move my various posts on blogging tips and tricks to a new blog since it is cluttering my main blog.

I started blogging in August 2007 knowing nothing at all in the beginning. I learned from the Internet forums, blogs and other fantastic websites. As I went along, I learned a couple of new things in HTML and CSS codings and took some notes in my main blog - Susu Kacang Cafe.

I am fairly slow in progress because I have to babysit my daughter during the day and then catch up on my reading on Internet Marketing. So when I see my stats improving even a tiny little bit, I am very motivated already.

So today is the official opening ceremony and of course, you are welcomed to have susu kacang anytime.

How to display < and > tags in your post

2007-12-18T01:30:00.000-08:00

For example, you want to display the span tag:

<span> ... </span>

typing the lesser and greater signs directly in the blogger Edit Html mode results in this:

...

To fix this, you should type:

< span >...< /span >

without spaces in < or >

How to create a third column

2007-12-18T01:17:00.000-08:00

There are many good tutorials for this. One example is the dummies guide to google blogger beta (see link list). Anyway, for the purpose of my record, I am just writing this post. I omit other details in the CSS code to avoid clutter:

#outer-wrapper {
width: 1000px;
}

#main-wrapper{
float: left;
width: 55%;
}

#sidebar-wrapperR{
float:right;
width: 20%;
}

#sidebar-wrapperL{
float: left;
width: 20%;
}

In the HTML code:
<div id='outer-wrapper'>
.
<div id='main-wrapper'>
<div id='sidebar-wrapperR'>
<div id='sidebar-wrapperL'>
.
.
</div></div></div></div>

How to create rounded corner box

2007-12-18T00:38:00.000-08:00

Do you want a rounded corner box instead of the usual rectangular box to define the boundary of your column or section?

There appears to be several ways to do it. I am just not sure which is the best. Anyway, I got this method from spiffy box. Basically, the method uses an image file of the box for the purpose.

Since your column can be arbitrarily long, I decided to just insert a predefined box for the top and bottom part of the column. Then I defined a background color to similarly match the color of these boxes. Then you have to adjust the margin and padding values to place the box and content correctly.

In the CSS code:
/* define classes for the rounded corner boxes*/
.cssboxtop, .cssboxbot{
background: transparent url(your image file)no-repeat
padding:10px
}
.cssboxtop{
background-position:top;
margin-bottom:400px;
}
.cssboxbot{
background-position:bottom;
margin:0 -10px;
}
/* define a background color for the column*/
.sidebarL {
background-color:#9ECBFA;
margin:0 -10px;padding:0 10px
}

In the HTML code:
<div id="sidebar-wrapperL">
<div class="cssboxtop"><div class="cssboxbot">
<div class="sidebarL section" id="sidebarLL">
<h2>Susu Kacang Cafe</h2>
.
.
.
</div></div></div></div>

How to create superscript and subscript

2007-12-14T11:52:00.000-08:00

You can insert the following css code inside the head tag i.e. between <head> and </head>

<style type="text/css">
.subscript {vertical-align: sub; }
.superscript {vertical-align: super;}
</style>

and use the class defined above in your html code as follows:

<span class="subscript">2</span>
<span class="superscript">2</span>

for example,

CO2 and E=mc2

becomes

CO₂ and E=mc²

How to create a dropcap

2007-12-08T00:05:00.000-08:00

Found a few good sites that talk about how to make the first letter of the paragraph bigger and dropping to align with the rest of the line. Here's what is looks like before:

The first letter is ordinarily looking.

The first letter is bigger and lower.

Here's what you do:

Add the CSS code between your <head> and </head>.

<style type="text/css">
.firstletter:first-letter {
font-size:400%;
float:left;
line-height:.8em;
color:#D4D4C7;
}
</style>

and surround your paragraph with <p class="firstletter"> and </p>

for example,

<p class="firstletter">Enclose the line between the tags. </p>

For more details, please check this website which also points to the W3 website for reference.

How to hide the navigation bar

2007-12-02T02:28:00.000-08:00

You can insert this code in the head section (between the <head> and </head>) :

<style type='text/css'>
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
</style>

Stop! Don't click on your own Adsense.

2007-11-15T07:00:00.000-08:00

You can get into trouble with Google for that. If you need to check the contents of the advertisers (in case you find them objectionable or unrelated) , you should use adsense preview tool.

How to create sitemap for blogspot and wordpress

2007-11-08T00:23:00.000-08:00

Here's something useful:

1. Go to your Google Webmaster Tools
2. Add sitemap
3. Choose type > Add General Web Sitemap
4. Your sitemap URL should be
a. http://yourblog.blogspot.com/atom.xml for blogger.com
b. http://yourblog.wordpress.com/feed for wordpress.com
5. Click Add Web Sitemap

Thanks to Tigerfodo and Digitalpoints