Monday, December 31, 2007
Adding Amazon Product Link - Image Only
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.
Tuesday, December 18, 2007
Tipbits - First Bite
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.
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
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 >
<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
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>
#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
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>
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>
Friday, December 14, 2007
How to create superscript and subscript
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
CO2 and E=mc2
Saturday, December 8, 2007
How to create a dropcap
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.
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.
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.
Sunday, December 2, 2007
How to hide the navigation bar
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>
<style type='text/css'>
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
</style>
Subscribe to:
Posts (Atom)