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.
<!--[if IE]>
<style type='text/css'>
#main-wrapper{
margin-left:20px;
}
#sidebar-wrapperR{
margin-right:20px;
}
#sidebar-wrapperL{
;
}
</style>
<![endif]-->
You can google with the search phrase "Cross-browser compatibility" for more help. One such good article can be found here.
Thursday, January 3, 2008
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>
Subscribe to:
Posts (Atom)
