Money tutorial | Make money online

Showing posts with label Site Crafting. Show all posts

Build Your CSS and HTML List

Date： 11/30/2009 | Author： David | 0 comment

|
Labels： Site Crafting

Its important to build your own css list if you are planning to design your website by yourself in the future. It might take few months or a year, as you can never do it within a day.

What if you are a total newbie？
If you want to set part in web design,you have to start right now as this has nothing to do about experience.
You do to learn, but not learn to do.

How to do?
Create a parent folder and inside of it contain HTML files and css folder — Here's my folder and you may take a look how i do it.
Note: The HTML file is made from nodepad(.txt file) then rename it to .html

\inside parent_folder/

\inside css folder/

What .html file contain?
html file contain <html><head><body></body></head></html>

Linking html file to css file.
css file is linked with html file by the following code(view my html file)
<link type="text/css" rel="stylesheet" href="css/wrapper.txt">

Thats all for it. To know more about serious web design you can try w3schools. Thanks for reading, enjoy site crafting to let your readers feel comfortable and trustable to your website.

read more...

Rearranging post footer elements (Blogger)

Date： 11/28/2009 | Author： David | 1 comment

|
Labels： Site Crafting

Today I'm gonna teach you how to rearrange your post footer element such as—Labels, author .It is intimate if you are able to make reader read Label or post-date information comfortably.Thus helpful to make money online.

How to do it?
As usual, go to Layout > Edit HTML —— click on expand widget templates
search for <div class="post-footer"> and you'll see something like that


<div class="post-footer">
<div class="post-footer-line post-footer-line-1">
<span class="post-author vcard">
<b:if cond="data:top.showAuthor">
<data:top.authorlabel>
<span class="fn"><data:post.author></data:post.author></span>
</data:top.authorlabel></b:if>
</span>

<span class="post-timestamp">
<b:if cond="data:top.showTimestamp">
<data:top.timestamplabel>
<b:if cond="data:post.url">
<a class="timestamp-link" href="data:post.url" rel="bookmark" title="permanent link"><abbr class="published" title="data:post.timestampISO8601"><data:post.timestamp></data:post.timestamp></abbr>
</b:if>
</data:top.timestamplabel></b:if>
</span>

<span class="reaction-buttons">
<b:if cond="data:top.showReactions">


<table border="0" cellpadding="0" cellspacing="0" width="100%">            <td class="reactions-label-cell" nowrap="nowrap" valign="top" width="1%">
  <span class="reactions-label">
  <data:top.reactionslabel></data:top.reactionslabel></span> </td>            <td><iframe allowtransparency="true" class="reactions-iframe" src="data:post.reactionsUrl" frameborder="0" name="reactions" scrolling="no"></iframe></td></tr></tbody></table></b:if></span></div></div>

span class='post-author vcard' - Posted By
span class='post-timestamp' - Timestamp
span class='post-labels' - Labels
span class='post-comment-link' - Comment link
span class='post-backlinks - Links to this post
span class='post-icons' - Email this post icon and Quickedit icon
span class='reaction-buttons' - Reactions
span class='star-ratings' - Star ratings
span class='post-location' - Post location

You may find most of them by click the “Edit” link for the Blog Posts page element
Note: you might see that some option are not available, just go to draft.blogger.com and click the “Edit” link for the Blog Posts page element then all of them will show up.

So, how to moving or rearrange it? Just cut the whole span class ( from <span> to </span>) and paste it to the place you want.

*I assume that you know how to find the correct place by repeating cut and paste*
In my case, I want it to be in post-header section. What I'm gonna do it to paste it below my title tag. However to edit your label text-font and etc you need to specified a class. We currently have no post-header class defined.Therefore you have to add it:


.post-header {
margin: 0 0 10px 0;
color:#000000;
text-transform:uppercase;
letter-spacing:0px;
font-family:arial;
font-size:10px;
}

Now you have to paste your code similar to this way —— For each new line in post-header, you have to wrap the <span> with <div class='post-header'> and </div>.


<div class='post-header'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if></span>
</div>

Lastly and not to forget, edit your relative css in order to fit your taste.

Thanks for reading, enjoy designing your blog!

Reference article:http://www.blogbulk.com/2009/02/moving-elements-in-post-footer-labels.html

Drop Down Label (especially for blogger)

Date： 11/27/2009 | Author： David | 0 comment

|
Labels： Site Crafting

You might be losing valuable space to display other information if you have a long list of labels in your sidebar.Sometimes, its ugly too.

A better way is to use a drop-down menu: this takes up little space, and is useful for helping your readers find the information they need. Thus helping you to make money online. Here's a few steps easy tutorial on creating a drop-down menu for your blog labels.

Find the following line of code in your blog's template:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
Do not need to tick the expand widget templates box. Replace this line with the following section of code:


<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Save your template and its done!
Once installed, you can then move the label widget as any other widget.

Thanks for reading, enjoy site crafting to use site spaces effectively.

original hack developer:http://hackosphere.blogspot.com/
http://www.bloggerbuster.com/2007/11/drop-down-menu-for-your-labels.html

Auto drop down navigation bar

Date： 11/26/2009 | Author： David | 0 comment

|
Labels： Site Crafting

When your website grows larger,you might need a drop down navigation bar. As it will help you to make money online.

Why drop down menu?
1.Easier surfing
2.More professional

How to do it?
Paste this code into your css file.
For blogger,go to Layout>EDIT HTML and paste it into suitable place.


/*--------------- menu pro -------------------*/
#menuh-container
{
position: relative;
top: 0px;
left: 0px;
}

#menuh
{
font-size: small;
font-family: arial, helvetica, sans-serif;
width:100%;
float:left;
background:royalblue;
}

#menuh a
{
text-align: center;
display:block;
border: 1px solid royalblue;
white-space:nowrap;
margin:0;
padding: 0.3em;
}

#menuh a:link, #menuh a:visited, #menuh a:active /* menu at rest */
{
color: white;
background-color: royalblue;
text-decoration:none;
}

#menuh a:hover      /* menu on mouse-over  */
{
color: white;
background-color: cornflowerblue;
text-decoration:none;
}

#menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */
{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkWqyVEJ79z49cyPxeCsbRQBSTehSseWPI-Lj2E-J8Ugj0bVi3hZyqU-8GN_VExNn74m90DqjPxl0Exa8QIaKl-3TscWCArXr1LnC7i3Lowv32fkbxV26lhtuPmhRkAF9dUkIG858idTE/);
background-position: right center;
background-repeat: no-repeat;
}

#menuh a.parent, #menuh a.parent:hover  /* attaches side-arrow to all parents */
{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpwwtF_BsGHSHrFgPk4af_A4txgHuIGFXdUa3mOyZY78COV2VPoUv6MveNivdadofj7Vd-IEUGE4eRSCE9w3ZbniCnc6QawuT_cdbc0oN4Nfjs0nRt0R4fhWMwb3VvXtsX_nvQz_BuVBM/);
background-position: right center;
background-repeat: no-repeat;
}

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:9em; /* width of all menu boxes */
/* NOTE: For adjustable menu boxes you can comment out the above width rule.
However, you will have to add padding in the "#menh a" rule so that the menu boxes
will have space on either side of the text -- try it */
}

#menuh li
{
position:relative;
min-height: 1px;  /* Sophie Dennis contribution for IE7 */
vertical-align: bottom;  /* Sophie Dennis contribution for IE7 */
}

#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
}

#menuh ul ul ul
{
top:0;
left:100%;
}

div#menuh li:hover
{
cursor:pointer;
z-index:100;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

However this code will output an error on IE version less than 7.Therefore need to add below code just above your </head>. This code will add on csshover.htc to browser if the version is IE version which is less than 7.

This code has been tested to work in various websites. To add it you have to upload csshover.htc to your upper directory or file host, then paste the url in the coloured area(you can use mine if you cannot find a file host)


<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(http://sites.google.com/site/davidng777/files/csshover.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
</style>
<![endif]-->

Finally, add a HTML/Javascript with code below.


<div id="menuh-container">
<div id="menuh">
<ul>
<li><a href="#" class="top_parent">Item 1</a>
<ul>
<li><a href="#">Sub 1:1</a></li>
<li><a href="#" class="parent">Sub 1:2</a>
<ul>
<li><a href="#">Sub 1:2:1</a></li>
<li><a href="#">Sub 1:2:2</a></li>
<li><a href="#">Sub 1:2:3</a></li>
<li><a href="Sub 1:2:4</a></li>
</ul>
</li>
<li><a href="#">Sub 1:3</a></li>
<li><a href="#" class="parent">Sub 1:4</a>
<ul>
<li><a href="#">Sub 1:4:1</a></li>
<li><a href="#">Sub 1:4:2</a></li>
<li><a href="#">Sub 1:4:3</a></li>
<li><a href="#">Sub 1:4:4</a></li>
</ul>
</li>
<li><a href="#" class="parent">Sub 1:5</a>
<ul>
<li><a href="#">Sub 1:5:1</a></li>
<li><a href="#">Sub 1:5:2</a></li>
<li><a href="#">Sub 1:5:3</a></li>
<li><a href="#">Sub 1:5:</a></li>
<li><a href="#">Sub 1:5:5</a></li>
</ul>
</li>
</ul>
</li>
</ul>

<ul>
<li><a href="#">Item 2</a>
</li></ul>

... repeat and alter the list as needed

</div>  <!-- end the menuh-container div -->
</div> <!-- end the menuh div -->

Now you should be able to see something like that

Thanks for reading, happy site crafting to let your customers feels better surfing your website.

Reference article:http://sperling.com

Homepage with pages navigation

Date： 11/20/2009 | Author： David | 0 comment

|
Labels： Site Crafting

Tired of "Older post" link? With this hack you can get rid of it! Lets your reader easier to surf your website in order to make money online.

Go to Layout > Edit HTML
tick the expand widgets box,then locate this by CTRL+F:

<b:include name='nextprev'/>

replace it with the code below


<b:if cond='data:blog.pageType == "index"'>
<style type='text/css'>
.blogpager {
font-size:16px;
color: #060;
font-weight:bold;
padding:0px 4px;
}
</style>

<div align='center' style='margin:5px;'>
<form action='#' name='pager20'>
<span id='vwg-pager-first'/> <span id='vwg-pager-prev'/> <input name='showingpage' onfocus='this.select()' size='4' title='Enter page number that You want to go' type='text' value='init...'/>/<input disabled='disabled' name='pagestotal' size='4' type='text' value='init...'/> <input onclick='checkpager()' type='button' value='Go'/> <span id='vwg-pager-next'/> <span id='vwg-pager-last'/>
</form>
</div>

<script type='text/javascript'>
var blogID = "7627232024483753977";
var home_page = "http://moneytut.blogspot.com/";
var pager_max_main = 10;
var pager_first_text = "First";
var pager_last_text = "Last";
var pager_prev_text = "Prev";
var pager_next_text = "Next";
</script>

<script src='http://sites.google.com/site/davidng777/files/blogger_pager_script_v20.txt' type='text/javascript'/>

</b:if>

Edit the coloured words to fit your needs,if you have no place to upload the css style sheet,you may hotlinking my css style sheet.

At last,you should have a page navigation bar just below the original "older post" link.Thanks for reading,happy site crafting to keep your customer.

Reference Aritcle：http://www.xavierliu.com/2009/04/blogger-page-menu.html

Double sidebar in a sidebar

Date： 11/18/2009 | Author： David | 0 comment

|
Labels： Site Crafting

Recently I've seen many blogs have a double sidebar in a sidebar, however I cant find any of them teach how to make it, therefore I've read some source code from those blogs and developed tutorial here. Double sidebar sometimes is essential to make money online.

If you're looking for 3-column blog,go here
You may need to know how to make each widget in separate box.
You may need to know how to make each post in separate box too.

Back to the topic,double sidebar is really useful to save your space.
To do it, go to Layout >　Edit HTML

Copy your sidebar-wrapper code and multiply it by 3.


#sidebar-wrapper {
margin-top:-15px;
margin-left:615px;    /* somehow by all using margin-left will work properly */
width: 275px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float*/
}
#sidebar-wrapper2 {
margin-left:615px;     /* somehow by all using margin-left will work properly */
width: 275px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float*/
}
#sidebar-wrapper3 {
margin-left:615px;     /* somehow by all using margin-left will work properly */
width: 275px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float*/
}

You may need to change your float:$endSide to margin-left in your sidebar-wrapper
Note that:margin-left normally is the sum of your main-wrapper width + main-wrapper total padding width + sidebar padding-left width.

Now you need to add the new #id of left and right sidebar,
Here's an example code:


/* -------------double sidebar --------------*/
#lsidebar{float:left; width:120px;}
#rsidebar{float:right; width:150px;}


#lsidebar .widget{padding:0 0 0 0;}
#rsidebar .widget{padding:0 0 0 0;}

body#layout #lsidebar{width:50%; padding:0px 0px; float:left; margin-left:auto; margin-right:auto}
body#layout #rsidebar{width:50%; padding:0px 0px; float:right; margin-left:auto; margin-right:auto}
}

Edit it until it suit your need.
Note that #lsidebar .widget{padding:0 0 0 0;} adjust the padding of left-sidebar widget to 0 at allside(as I declare padding in my .sidebar .widget there)
Now,search code which is similar to this(near bottom) by CTRL+F


<div id='sidebar-wrapper'>
    ......
</div> <!-- end content-wrapper -->

Paste the following code to there


<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
</b:section>
</div>

<div id="sidebar-wrapper2">
<b:section class="sidebar" id="lsidebar" preferred="yes">
</b:section>
<b:section class="sidebar" id="rsidebar" preferred="yes">
<b:widget id="HTML6" locked="false" title="" type="HTML">
</b:widget></b:section>
</div>
<div id="sidebar-wrapper3">

</div>

Now you should be able to see the change at your page element.
WARNING:Do not delete your widget which is in code similar to

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Now you should have professional looking sidebar.
Enjoy web design to let your customer enjoy surfing your website! Ultimately make money online.

read more...

Multiple navigation bar

Date： 11/14/2009 | Author： David | 0 comment

|
Labels： Site Crafting

In the previous tutorial,I've showed how to create a navigation bar. However you may find that a navigation bar is not enough. Normally,a website consist at least two navigation bar, one at the top(or side), and the other one at the bottom.

Now,I'm gonna show a cleaner code on how to create multiple navigation bars. You will need this to make money online.

As usual,go to Layout > Edit HTML
Then paste the navbar class(.navbar) code where similar code is written.


.navbar li{
background: #00BFFF;
margin:0 65px 0 65px;
text-align:center;
font-size:100%;
font-style:italic;
font-family:Times;
font-weight:bold;
display:inline;
}

.navbar li a{color:#7E587E;}
.navbar li a:visited {color: #7E587E;}
.navbar li a:hover {color: #B93B8F;}

Then add on the unique id(#topnavbar,#footnavbar) to the code above,


#topnavbar{
text-align:center;
margin:0px;
background:#00BFFF;

}

#footnavbar{
text-align:center;
background:#FFFFFF;
}
#footnavbar li{
background:#FFFFFF;
font-size:10px;
font-style:normal;
}

Finally,You can now add 2 widget of HTML/Javascript to install these navbars.


<div id="topnavbar" class="navbar"><ul> <li><a href="http://moneytut.blogspot.com/2000/11/freebies-get-for-free.html">Freebies</a></li>
<li><a href="http://moneytut.blogspot.com/2009/10/list-of-money-program-you-might.html">money program</a></li>
</ul></div>


<div id="footnavbar" class="navbar"><ul> <li><a href="http://moneytut.blogspot.com/2009/11/exchange-links.html">Exchange Links</a></li><li><a href="mailto: davidng777@gmail.com">Contact US</a></li>
</ul></div>

Just in case you don't have the right place to place the widget,
I'll show you my code,use CTRL+F to find the right place,





             。
             。
             。

What you gonna do is changing showaddelement into 'yes', then you have the right place to add your widget! Happy designing to keep your fellow customer—in order to make money online.

How it works
The #topnavbar stands for unique id which can override class(.navbar);
if the data is declared twice, then the declaration of id will work. For example,background in "#footnavbar li" override background in ".navbar li".

While in the HTML/Javascript widget, in <div> id='topnavbar class='navbar', id should put the id of the navbar you declared with '#', while class should put the class of the navbar you declared with '.' .

read more...

Design your header

Date： 11/12/2009 | Author： David | 0 comment

|
Labels： Site Crafting

If you have read my previous tutorial, you should already have a header image, so now just left the header position and background colour to go! After finished reading this tutorial, you will have learnt another technique in web design which help you to make money online.

First of all,go to Layout>Edit HTML


#header-wrapper {
width:200px;
height:70px;
margin:0px auto 0px;
background:#FFFFFF;
}

Adjust the height and width until the image does not crash with your content.
The "margin:0px auto 0px;" set the header to be in middle of blog.
To set the margin to the left of your blog,just delete the "margin",
More info about margin visit w3schools.

After you have set the header wrapper,
usually you need to adjust the other wrapper until for cleanage.
For refering,you may take a glimpse on how I make it.
To find the wrapper position,use CTRL+F.


/* Outer-Wrapper
----------------------------------------------- */
#content-wrapper{
width:900px;
background:#fff1ff;
margin:0 auto;
}

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
background:#FFffff;
}

#main-wrapper {
width: 560px;
margin: 0px 10px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
background:#ffffff;
padding-left:20px;
padding-right:20px;
}
#sidebar-wrapper {
width: 230px;
margin-right:10px;
padding-left:20px;
padding-right:20px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float*/
background:#ffffff;
}

Padding means the extra space of the wrapper.
You have to change the width of those wrapper according to your needs,
Notice that: width of outer-wrapper > content-wrapper > the other 2 wrappers
(width + padding of sidebar-wrapper)+(width + padding of main-wrapper) should smaller or equal to the content wrapper.

Now you should already have a good looking header!
Enjoy designing your website to increase your customer return rate for SEO. I'm sure this have helped you to make money online.

read more...

Design your header image

Date： 11/11/2009 | Author： David | 0 comment

|
Labels： Site Crafting

You might have a professional content,navigation bar; However if you are not a graphic designer, how to create a comfortable header, to help us to make money online?
In fact,it's pretty easy!Even a primary school student can do it!

First of all,lets take a look on the successful website,

Do you see if they have used any amazing technique on designing the header?
They just use a very common technique,just as if its designed from Microsoft Words!

Back to topic,to design a header,you can just use Microsoft word to design it!
Go to microsoft word(or similar program)>insert>insert picture>art words
Then you can just change the word art's font,size,property there.

In case you're seeking for a cooler artistic word,
I'll introduce you a Word Art Generator,
you can create yourself a 3D word art through the website and is simple to use.
Here's an example :

However there is something you must beware of when designing your header:

Your header should not take off the light of your content,people read your content but not your header.
Your header should be beautiful yet simple and clean.
Try to follow the successive site's header,especially if similar to it.

Learn to make a nice header image(logo) to make money online.

read more...

Adding a sitemap

Date： 11/10/2009 | Author： David | 0 comment

|
Labels： Site Crafting

What is sitemap?
Sitemap is a txt file that list all your site's Url and give the search engine idea on how to crawl into your site. Therefore adding a sitemap means increasing your pagerank in search engine such as google. Thus helps a lot to make money online via SEO.

For Website owner:
Use sitemap generator to create your sitemap file(XML usually), upload the sitemap file to your root directory, then open your google webmaster tool, if you don't have one, sign up here:

Go to site configuration >　sitemaps >submit a sitemap
and then upload the files using your sitemap file's link in your website.
Then the sitemap will be added successfully.

For blog user:
Open your google webmaster tool,if you don't have one,sign up here, and use this sitemap generator to generate xml link for your blog.
You will find links such as atom.xml?redirect=false&start-index=1&max-results=500,
Copy all of it -> then paste it in the submit a sitemap blanket -> submit and its done!
This is an important way in order to make money online via SEO.

Reference article: http://www.labnol.org/internet/submit-blogger-sitemap-to-google/10149/

Redirecting user to other site

Date： 11/09/2009 | Author： David | 0 comment

|
Labels： Site Crafting

Go to layout > edit HTML,
paste this code in your website's HTML just before the </head> tag, then your website will redirect the user to the destination website.
If you don't wan the alert box,just use the code like this

Sometimes you may want to let the user in the old site for few sec before redirecting, then you can try this code


<meta http-equiv="refresh" content="5;url=http://domain.com/page.htm"/>

then your old website will transfer the person in 5 sec. If you want to show a notice, you can put a Text gadget and place it on the top of the page.

A nice redirecting can transfer your previous traffic to your new site. And in a longer view it can increase your SEO. However,note that having redirecting in your main site is bad for search engine.

Thanks for reading, enjoy learning in order to make money online.

Reference Article:techieblogger.com

Navigation bar

Date： 11/06/2009 | Author： David | 0 comment

|
Labels： Site Crafting

For a successful website, navigation bar cannot be excluded, you can easily go to the place you wanted in any website through its navbar. A successful website that can make money online should have navigation bar.

So,what does a navbar look like?

so how to add a navbar to your site?(I'll explain for blogger, .com is similar to)
I find it from http://www.reallifeblog.net ,
original post from 'Tips for New Bloggers' in Bizwhiz's post entitled ' Add Page Element to Blogger Header and Blog'.
so I'll just quote some and rearrange it for a better understanding,
go to layout > edit HTML(to get access to your blog's CSS code)


/* menubar */
#newnavbar ul li{
background: #FFFFFF;
}
#newnavbar ul li{
font-size:100%;
font-style:italic;
font-family:Times;
font-weight:bold;
list-style-type:none;
display:inline;
margin:50px;
}
#newnavbar li a{
color:#7E587E;
}
#newnavbar li a:visited {
color: #7E587E;
}
#newnavbar li a:hover {
color: #B93B8F;
background: #CAF99B;
}
body#layout #main,
body#layout #sidebar {
padding: 0;
}

paste the following code into there(someplace below the <body>;

Then go to Layout > page element > Add an HTML/JavaScript gadget


<div id="newnavbar"> <ul> <li><a href="http://www.blogger.com/URL%20of%20your%20Home%20page">Home</a></li> <li><a href="http://www.blogger.com/URL%20of%20your%20About%20page">About</a></li> <li><a href="mailto: Your Email Address">Contact</a></li> </ul></div>

substitute the " " in href with real address and its done!

In case you have no right place to put your gadget into,
go to layout > edit HTML
Find


<div id="header-wrapper"> <b:section class="header" id="header" maxwidgets="1" showaddelement=" no">
</b:section></div>

adjust maxwidgets yourself--its the maximum widgets can have around your header,
change showaddelement to 'yes'

similarly,find


<div id="main-wrapper"><b:section clas="main" id="main" showaddelement=" no">
</b:section></div>

change showaddelement to 'yes'


<div id="content-wrapper"> <div id="crosscol-wrapper" style="text-align:center"> <b:section class="crosscol" id="crosscol" showaddelement=" no"></b:section></div>
</div>

change showaddelement to 'yes'

Now you can have the navbar exactly the same as the picture above. You may also wanna learn how to create image based navbar:here

Enjoy site crafting in order to make money online.

read more...

Making your site cleaner

Date： 11/03/2009 | Author： David | 0 comment

|
Labels： Site Crafting

To anyone who want to success in making money online, he or she must have own a website, whether its free or is paid.

In either way,the key point for keeping a customer to revisit your site,is to keep your website clean. One of the way is to put important information on the top few paragraph, and let the rest be continued reading in a new link. At the end you will find that this technique does help to make money online.

For example,if you have 10 post in your site, and you tried to put them all in 1 page...
How do you feel when you looking other's homepage which is similar to this?
lazy to continue reading right?
Now if you are using blogger(website should be similar), you can use a technique of span class = 'fullpost' to add on read more.
If you are interested in this technique,follow this blog.
After you have used this technique, the result of your homepage will be like
read more trick

and this makes blog a lot cleaner.

read more...

Build Your CSS and HTML List

Rearranging post footer elements (Blogger)

Drop Down Label (especially for blogger)

Auto drop down navigation bar

Homepage with pages navigation

Double sidebar in a sidebar

Multiple navigation bar

Design your header

Design your header image

Adding a sitemap

Redirecting user to other site

Navigation bar

Making your site cleaner

Labels

My Site

Feel free to speak

Follow Me

Follow me!!

Blog Archive

License

About Me

Video

Webmaster's Desert