Blog Tips | Sharing Knowledge

How to center the header in blogspot

2012-10-10T12:38:00.000+08:00

Your header image may not wide enough and you will see the image is placed on the left side.
Follow below steps to place your header image in the midlle..

1. Go to template

2. Click Customize

3. Paste below code into the highlighted in yellow below. You may adjust the number "110" below to adjust the image placement.

.header-outer {margin-left:110px;}

Add Language Translator

2011-12-31T01:10:00.002+08:00

Some blog having a lot a visitor from many countries. Your reader might more prefer if they can read with their preferred language. By copying below code and add into your page element, its will help you to solve this matter.
Make sure you change "YOUR BLOG ADDRESS" to your blog address.

<form action="http://www.google.com/translate"><script language="javascript" type="text/javascript">document.write ("<input name="u" value="+location.href+" type="hidden">")</script><input value="http:/YOUR BLOG ADDRESS" name="u" type="hidden" /><noscript>&amp;amp;amp;amp;lt;input value="http://YOUR BLOG ADDRESS" name="u" type="hidden"/&amp;amp;amp;amp;gt;</noscript><input value="en" name="hl" type="hidden" /> <input value="UTF8" name="ie" type="hidden" /> <input value="" name="langpair" type="hidden" />

<p><input title="Andorra / Catalan" value="en|ca" type="image" height="20" src="http://1.bp.blogspot.com/__v4nth5_ki0/SP-fM7vwhSI/AAAAAAAAHl0/ZoZkfhEb01M/s320/Andorra+-+Catalan+-+ad_flag.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="العربية / Arabic" value="en|ar" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/358406/gse_multipart12399.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title=" България / Bulgaria" value="en|bg" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SMiXtQx-uLI/AAAAAAAAG6I/RuLPDhnFMXY/s320/Bulgaria+-+bg_flag.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="中文（简体） / Chinese (Simplified)" value="en|zh-CN" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/546049/gse_multipart12397.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="中文（繁体） / Chinese (Traditional)" value="en|zh-TW" type="image" height="20"

src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/208681/gse_multipart12398.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Hrvatska / Croatian" value="en|hr" type="image" height="25" src="http://1.bp.blogspot.com/__v4nth5_ki0/SMhVoigYF0I/AAAAAAAAG5s/naE3NObTVZs/s400/Croatia+-+hr_flag.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Česká Republika / Czech Republic " value="en|cs" type="image" height="20" src="http://4.bp.blogspot.com/__v4nth5_ki0/SMiX9aMIL3I/AAAAAAAAG6o/4-RYadolKWQ/s320/Czech+Republic+-+cs_flag.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Danmark / Denmark" value="en|da" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SMiX9nD1NZI/AAAAAAAAG6w/ZnIBEtLIHEw/s320/Denmark+-+da_flag.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" />

</p><p><input title="Suomi / Finnish" value="en|fi" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SMiZwsOFndI/AAAAAAAAG8w/VlBr_zN32q8/s320/Finland+-+fi_flag.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Français / French" value="en|fr" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/327620/gse_multipart12413.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Deutsch / German" value="en|de" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/734899/gse_multipart12400.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Ελλάς / Greek" value="en|el" type="image" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjMnGFrlslVYhe5fa_HcvKEz3O50f2cSMeH748-38f9GesESyk-V_Bhu0sqUIUp7PAJ7V_nEVtbbVaw1lA10TX7_eLHYp2PoUuB-w8OCtGNgxg5mEMV618gaAyFuQxtMYhDn0YDQtFgYhl/s320/Greek+Flag+36x24.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Hindi / India" value="en|hi" type="image" height="20" src="http://4.bp.blogspot.com/__v4nth5_ki0/SMiYu9muwaI/AAAAAAAAG7Y/lO6YgNdyHM4/s320/India+-+hi_flag.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Bahasa / Indonesian" value="en|id" type="image" height="20" src="http://4.bp.blogspot.com/__v4nth5_ki0/SP-fNKvGgZI/AAAAAAAAHl8/UESh2PimM5U/s320/Indonesia+-+id_flag.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Italiano / Italian" value="en|it" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/306145/gse_multipart12401.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="日本語 / Japanese" value="en|ja" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/443122/gse_multipart12402.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /></p><p></p><p><input title="한국어 / Korean" value="en|ko" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/581031/gse_multipart12403.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Latvija / Latvian" value="en|lv" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SP-fNX2rCXI/AAAAAAAAHmM/1LRWqh7YQBA/s320/Latvia+-+lv_flag.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Lietuvos / Lithuania" value="en|lt" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SP-fNrJizVI/AAAAAAAAHmU/kdaran4uffk/s320/Lithuania+-+lt_flag.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Nederland / Dutch" value="en|nl" type="image" height="20" src="http://1.bp.blogspot.com/__v4nth5_ki0/SMiZWUAFSOI/AAAAAAAAG74/lsNT2NI_oFI/s320/Netherlands+-+nl_flag.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Norge / Norwegian" value="en|no" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SMiZWYWSvEI/AAAAAAAAG8A/7sOoou7far0/s320/Norway+-+no_flag.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Pilipinas / Philipines" value="en|tl" type="image" height="20" src="http://1.bp.blogspot.com/__v4nth5_ki0/SP-f7gyN2aI/AAAAAAAAHmc/x_LSaXlHtCs/s320/Pilipnas+-+ph_flag.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Polska / Polish" value="en|pl" type="image" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmrAgZREUJ8GCdWSlarZKbIaLLRTUvtu4tbEsgfYrPnFsvGOzXtM-wM7LiZxOnG1kmfgmzwPQ0XyoZDmXKmSXpHtouknXhMPypDde8_C6cceh0klWA6UVxJUGKGCpb0Q-DJ9IUn2zGFegO/s320/Polish+Flag+36x24.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Português / Portuguese" value="en|pt" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/670301/gse_multipart12404.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /></p><p></p><p><input title="România / Romanian" value="en|ro" type="image" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKHVTA1hPEpP0iYJpKmn_eowNFXmdnUjmE2epirS5aVc-_H3T1xU-23Zz0JqulRwhXNlILSdSE7CKtl8umESnLhdTp2ESpYvhqc9VTdZ2leTU0ORRhUIB7a4-p8toPlBP1eE4ORMBoBBrl/s320/Romainian+Flag+36x24.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Русский / Russian" value="en|ru" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/111692/gse_multipart12405.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Србија / Serbia" value="en|sr" type="image" height="20" src="http://3.bp.blogspot.com/__v4nth5_ki0/SP-f7_imioI/AAAAAAAAHmk/ytbpoyJHbmo/s320/Serbia+-+si_flag.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Slovenčina / Slovak" value="en|sk" type="image" height="20" src="http://4.bp.blogspot.com/__v4nth5_ki0/SP-f79KzfyI/AAAAAAAAHms/-I315jcpHN0/s320/Slovak+-+sk_flag.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Slovenija / Slovenia" value="en|sl" type="image" height="20" src="http://1.bp.blogspot.com/__v4nth5_ki0/SP-f8P0fwiI/AAAAAAAAHm0/Lzeh8mXiWvE/s320/Slovenia+-+si_flag.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Español / Spanish" value="en|es" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/998398/gse_multipart12407.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Sverige / Swedish" value="en|sv" type="image" height="20" src="http://1.bp.blogspot.com/__v4nth5_ki0/SMiZwrYspyI/AAAAAAAAG8o/uVUWBAyZkVc/s320/Sweden+-+se_flag.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /><input title="Україна / Ukraine" value="en|uk" type="image" height="20" src="http://3.bp.blogspot.com/__v4nth5_ki0/SP-f8Bg1AMI/AAAAAAAAHm8/b4jhQQPSvj4/s320/Ukraine+-+ua_flag.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /></p><p></p><p><input title="tiếng Việt / Vietnam" value="en|vi" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SP-gZakjpuI/AAAAAAAAHnE/fwfNZkisDOA/s320/Vietnam+-+vn_flag.png" width="30" name="langpair" onclick="this.form.langpair.value=this.value" /></p></form>

How to write with superscript or subscript format

2011-07-06T12:00:00.002+08:00

How to write with superscript or subscript format?
Superscript format is useful especially in mathematics or shown the price tag with more stylist.

Example : USD 30^.00 compare to USD 30.00

Here we go:
In the edit post --> edit HTML as shown below

Find word, Example : USD 30.00 compare, edit by adding in red as shown below.

Example : USD 30<sup>.00</sup> compare

For the subscript format such as use in science (material composition), mathematics.

Example : H₂O - water, CO₂ - carbon dioxide
This can be done by adding in red as shown below.

1. H<sub>2</sub>O
2. CO<sub>2</sub>

Move date under the title post

2011-07-05T12:21:00.000+08:00

Default setting in blogger.com is the date placement is on the top of the title. You might place the under the post title by following below steps.
Go to Design --> Edit HTML --> Expand Widgets Templates
Press Ctrl+F and a text box will pop up and paste below code in the search box

<b:if cond='data:post.dateHeader'>

You should find code as below.

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Remove the full code above and copy paste into notepad
Next step is to locate code below.

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Paste the code you have in the notepad directly under it.

Insert post link below post

2011-07-04T12:35:00.000+08:00

Here is the way to insert link automatically within your post using LinkWithin.
Click here and follow the steps given.

Fill in your email & blog link.

Create two or more column in header

2011-07-01T09:16:00.002+08:00

Now we will change the header column become 2 header columns. Click Edit HTML tab, go to your template code and find the code like this :

/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

Delete above code and replace with this code ;

/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}

Go to lower side and find the code like this :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>

Delete above code and replace with this code :

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

Click SAVE CHANGES button and done.

Now click Page Elements tab and you will see your header column become 2 columns :

Create Scrolling Text (Marquee)

2011-02-21T09:28:00.006+08:00

The animate text or scrolling text display is very easy to setup. You may add in the HTML in the posting or add in new gadget. Just follow and understand few steps below;

<MARQUEE>

Hi There! Welcome to Blogguideshare.blogspot.com

</MARQUEE>

Hi There! Welcome to Blogguideshare.blogspot.com

If want to reduce the inline space, you may add command width and change to your size.

<marquee width="50%">

Hi There! Welcome to Blogguideshare.blogspot.com

</marquee>

Result as below;

Hi There! Welcome to Blogguideshare.blogspot.com

Or change the Text direction

<MARQUEE DIRECTION="RIGHT">
Hi There! Welcome to Blogguideshare.blogspot.com
</MARQUEE>

Or change the inline space size

<MARQUEE DIRECTION="RIGHT" WIDTH="70%">
Hi There! Welcome to Blogguideshare.blogspot.com
</MARQUEE>

Hi There! Welcome to Blogguideshare.blogspot.com

Or with text background color

<marquee bgcolor="RED" direction="LEFT" width="70%">
Hi There! Welcome to xxxxxx.blogspot.com. Get 30% off thru online order
</marquee>

Hi There! Welcome to xxxxxxx.blogspot.com. Get 30% off thru online order

Move to center location by adding <center>

<center><marquee bgcolor="RED" direction="LEFT" width="100%">
Hi There! Welcome to xxxxxxx.blogspot.com. Get 30% off thru online order
</marquee<center>

And also, see the width % take effect.

Hi There! Welcome to xxxxxxx.blogspot.com. Get 30% off thru online order

Customize Title Header Placement

2011-02-16T00:43:00.003+08:00

Did you know that the placement of the title header can be change either center or right hand position? In blogspot the default setting is on the left hand side.
By adding CSS code you will change the tittle header placement left, right or center within less than 1 minutes. Don't believe me. Let try.
Below are the steps;

Step 1

Go to the design
Then Template designer

Step 2

On the template designer, select advanced
On the sub tittle, select Add CSS
Add below code into the CSS

.Header {
text-align: right;
}

Note: If want to change to center position, just change word right above to center

How to make first letter big

2011-02-07T23:20:00.002+08:00

When writing blog, we can't deny that every one like to do some decoration either adding gadjet or style to make it look better.

Sometime we can see that is interesting to have the first letter is bigger in each post or really bigger than text size.

How to make the first letter big? Here I'll share the method.
On the below are the screen capture from http://ilafashionhouse.blogspot.com . Watch out the capital B.

Big First Letter

Step 1.

Go to the page element => Design => Edit HTML
Find /* Posts (By pressing F3 or CTRL+F and paste /* Posts will help you)
Copy and insert below code

.dropcaps {
float:left;
color: black;/*#FFFFFF;*/
font-size:45px;
font-family: "Arial";/*Georgia, "Times New Roman", serif; */
font-weight: bold;
line-height:30px;
padding-top:0px;
padding-right:5px; }

What is it mean?

.dropcaps {
float:left; color: dark blue;/*Color of your choice*/
font-size:60px;/*change this of you want to to span across more lines*/
font-family: "times bold italic";/*Font of your choice*/
font-weight: bold; line-height:30px;/*how thick you would like alphabet to be*/
padding-top:0px; padding-right:6px; }

Step 2.

On your panel, go to Edit HTML (beside the Compose tab)
Insert below code at the first letter of your post.

<span class="dropcaps">B</span>

For example your first sentence is "Blogspot is free". So the code is

<span class="dropcaps">B</span>logspot is free.

All post you want to have a big size for the first letter need to add this code.

Lets try.... if you have found another method, please leave comment.

Regards

Another way to create table

2011-02-06T14:58:00.003+08:00

From post how to insert table, had shown how to insert table in the post. By using the same example, here is the blog tips how to inset table in another way.

<table border=2>
<tr> <th>No</td><td></td><th>Item</td><td></td><th>Price</td> </tr>

<tr> <td>1.</td><td></td><td>Blouse</td><td></td><td>RM30.00</td> </tr>
<tr> <td>2.</td><td></td><td>Pijamas</td><td></td><td>RM8.90</td> </tr>
<tr> <td>3.</td><td></td><td>Scarf Lina</td><td></td><td>RM9.90</td></tr>
<tr> <td>4.</td><td></td><td>Skirt</td><td></td><td>RM6.90</td> </tr>
</table>

Table result as below;

No	Item	Price
1.	Blouse	RM30.00
2.	Pijamas	RM8.90
3.	Scarf Lina	RM9.90
4.	Skirt	RM6.90

By sorting table header <th> as below, row eg to display the total sale in month XXX

<TABLE BORDER=2>
<TR> <TD> </TD>
   <TH>Week 1</TH>
   <TH>Week 2</TH>
   <TH>Week 3</TH>
   <TH>Week 4</TH>
   </TR>

<TR> <TH>Blouse</TH>
   <TD>$1070</TD>
   <TD>$1500</TD>
   <TD>$1700</TD>
   <TD>$500</TD>

<TR> <TH>Pyjamas</TH>
   <TD>$1270</TD>
   <TD>$1000</TD>
   <TD>$1400</TD>
   <TD>$1500</TD>

<TR> <TH>Scarf Lina</TH>
   <TD>$900</TD>
   <TD>$500</TD>
   <TD>$1400</TD>
   <TD>$1900</TD>

<TR> <TH>Skirt</TH>
   <TD>$1200</TD>
   <TD>$1600</TD>
   <TD>$1300</TD>
   <TD>$1570</TD>

</TABLE>

The table from above HTML will seen as below;

	Week 1	Week 2	Week 3	Week 4
Blouse	$1070	$1500	$1700	$500
Pyjamas	$1270	$1000	$1400	$1500
Scarf Lina	$900	$500	$1400	$1900
Skirt	$1200	$1600	$1300	$1570

Hope this will help you in order how to create table in blogspot.

Note: To move the table in center location, please add before the above code <center> and </center> at the end.

How to create more than 1 person as an admin

2011-02-05T17:08:00.006+08:00

Blog tips how you can manage your blog account. You can create more than one admin. Follow from post How to give friend access to write in your blog, click on the "grant admin privileges".

Now both are become admin. This feature is useful especially for setting up a blog in group.

How give friend access to write in your blog

2011-02-05T16:48:00.003+08:00

If you plan to share with your friend or to give an access to someone to write in your blog but don't know how. Here is the blog tips and below is the steps how to create blog with many authors.

On the page element, go to settings, then Permissions.

Under the permission, click ADD AUTHORS

Fill up the email address inside the box and click INVITE.

The person will notify via email and wait until he/she to response.
Once he/she response, you as the blog owner will remain as admin and he/she whose you had invited will be an author.

If you want them to be as 2nd admin, follow here to get the blog tips.

Cheers

Create a different background in each post

2011-02-04T18:13:00.004+08:00

Do you know that you can create a different background in each post? How to setting up a blog with a different background in each post? Here they are. I only choose this post using a different background, to make it as an example.
By following below steps you can do it easily.

1. Change setting on the Posting Formatting

On the blogger dashboard, go to page element, click on Setting
Go to Formatting (sub tab of Setting)
Go to line item Post Template and will find a text box (default is empty)
Paste below code

<div style="background:url(IMAGE_LINK_URL) no-repeat;">
</div>

Once done ==> save
IMAGE_LINK_URL mean is the source of the image
Be remember that the image must stored in web hosting. Use free one such as Google Docs or Photobucket
In this post I did used SHARE ICON which already availiable in istockphoto.

2. Do posting

Write your post as usual
Do not forget to change the IMAGE_LINK_URL above to your image URL by do editing in Edit HTML (tab beside Compose in posting page)
Do not remove the bracket before and after IMAGE_LINK_URL
Example; "background:url(http://www.xxxxxx/xxxx/xxxx) no-repeat;"
If you want to repeat the background image more than 1 time, change the

<div style="background:url(IMAGE_LINK_URL) no-repeat;">

<div style="background:url(IMAGE_LINK_URL) repeat-y;">

Click preview to see yours blogs posts

Now the background image is appear but it not center in location. To make it center, add below (in blue).

<div style="background:url(IMAGE_LINK_URL) center repeat-y;">

Cheer friends .. hope this blog tips will help you how to make blog.

Rotate the avatar image in comments post

2011-02-04T01:13:00.003+08:00

You can set up your own blog with the avatar image in the comment section rotate not in straight stand. Below shown as an example;

How to do it?

Go to page element
Edit HTML and find below

.avatar-image-container img {
-webkit-transform: rotate(355deg);
-moz-transform: rotate(355deg);
}

If having problem to find it, just press F3 or CTR-F and paste .avatar-image-container img
Change the angle (355deg) to your desire angle.

If it is not in the HTML script, copy above and paste just before

]]></b:skin>

Like below

.avatar-image-container img {
-webkit-transform: rotate(355deg);
-moz-transform: rotate(355deg);
}
]]></b:skin>

Once complete, save and preview.
Now you can create a blog site with a fancy look comment.

Change word Read More

2011-02-03T13:23:00.032+08:00

The default text setting is "Read More" and you may change as you wish. Below are the guide how to change the Read More word to other.

On the page element click edit on the Blog Post. See below;

Blog Post

Then change word Read More as shown in below

Happy blogging ..

New window open - click on link

2011-02-02T13:02:00.010+08:00

How to avoid visitor left your blogs sites when the link clicked. Link is useful for some purpose but losing reader when they click on the link then left your blogs sites is not worth.
Here is some blog tips how to open new window or new tab when the link is click without closing your blog sites. By altering the HTML in your blog as shown below, this will help.

Look here where the word "Google" below has this code added and the "Google Icon" is without a code.

On the blog posting page, go to the "Edit HMTL" (the tab is just beside "Compose"). By taking an example HTML code from my post. (Click to refer)

1) Without open a new window

<a href="http://www.google.com" >

2) Open new window without closing your blog sites

<a href="http://www.google.com" target="_blank" >

So adding target="_blank" it should work.

This is very useful blog tips as we need to do link in our blog sites but at the same time we don't want to loose visitor.

Insert Link in your posting

2011-02-02T11:35:00.005+08:00

"Link" is useful for us to enable bring readers to another page. How to insert the link command. Current blogspot feature is no more required to the blogger to understand the HTML code.

Let share how to insert link, there is two way which normally people did;

1. Insert link on text;
Link on text mean to add a link in background for selected word or sentence. Eg; I proud used Google .By clicking the word "Google", will bring you to the Google's page.

2. Insert link on image;
Add link in background in image. On the Google image below has a link as above and will result the same as above when click on it.

How to do it ...

Move your cursor and highlight on the text, sentence or image you wish to do a link. On the posting toolbar, select icon and new pop up window appear.
Enter the link address and press "OK"

Hope this will help you.

Flip text upside down

2011-01-30T13:18:00.012+08:00

Ha ah ..crazy ..
Write word upside down ... Remember friends, it just for fun not to write memo to your boss in upside down. Sure he will turn you upside down.

Write your text below and get the result from the other box. Copy and paste to yours. Write on your friend tweeter of Facebook wall.

Insert Read More in posting - Jump break

2011-01-26T20:12:00.002+08:00

"Read More" .. what is it? Some called it as jump break.
You will find some blog only shown a few sentences or only one paragaph in their post and you'll find there is a word <read more>, <+>, [..] or what ever symbol function which need to click to expand for reader to read more and know more what was written in the whole post.

To create "read more" function or jump break funtion is very easy to do which no need to add any additional code in the HTML.

Here I put the read more function ... he he he ...as an example for you.

To do this, just click the jump break icon but make sure put the text typing pointing at the desire line.

The disadvantage of using this funtion is the SEO only able to crawl or index the content before "read more". Make sure your keyword is before the "read more"

Simple touch to enlarge image

2011-01-24T21:11:00.005+08:00

Uchhh .. the image is very small and hard to see? By adding a few line in the HTML it will solve your problem. Follow below you'll able to enlarge image in your post and this effect will seen when hovering the mouse pointer on the image area.
On the Design Tab of the "page element" go to edit HTML and try find below code;

]]></b:skin>

If having problem to find it, use CTRL+F or F3 and paste.
It will find for you.

Paste below before the code ]]></b:skin> and SAVE

.post a:hover img {
width:400px; height:200px; float:middle;
}

As an example;

.post a:hover img {

width:400px; height:200px; float:middle;

}]]></b:skin>

Advice to upload your template before made any change as a backup.
The zooming size can be adjust by changing the width and height or even to floating location left, right or middle on the code above.
Wow !! the enlarge image code is very fantastic.

Good luck..

Insert You Tube Video

2011-01-24T20:55:00.009+08:00

You Tube Video is one of the interesting futures you may put in yours site. You may embed a strip of You Tube Video either in vertical or horizontal orientation. May not worry visitor leaving your page as once the video channel selected as it will open in new window. Get this wizard here. Copy the code given and copy them into yours HMTL

Create and insert Header

2011-01-23T23:09:00.006+08:00

Once visitor reached your site, header is the first thing what they see. Remember that first impressions is the main factor that they will stay with you.
By searching word "header maker", "header maker for blog" you will see that so many web offering header for free.
I choose Xheader as they offering free light software to download.
Create stunning header graphics, with this free header graphic tool, that look like they were produced by a professional designer.

How to insert?
Below some guide. On the panel panes click "edit" as below

Then choose and upload file

Pull Down Menu

2011-01-23T18:58:00.007+08:00

It hard to insert a Pull Down Menu in blog but now is not anymore. Here is another way of inserting pull down menu and helping you how to create your personal blog better. You will see the pull down menu result as below.

Pull down menu

How to do this? Go here

Name the tab on the "Text Shown" and copy URL of the related page and paste in the "Link URL"

Press "generate" the copy and paste the code into the BODY of your blogs HTML document.

How to insert table

2011-01-23T16:37:00.006+08:00

For whom using blog sites as a marketing channel of their product, sometime table is a very important to enable writer to tell customer in very easy way. Below are the example how the table look like.

Example;
Below table is our price list;

No	Item	Price
1.	Blouse	RM30.00
2.	Pijamas	RM8.90
3.	Scarf Lina	RM9.90
4.	Skirt	RM6.90

How to do it?

On the posting tab, go to the "Edit HTML". Here are the sample which you can copy.

<table>
<tr> <td>No</td><td></td><td>Item</td><td></td><td>Price</td> </tr>
<tr> <td>1.</td><td></td><td>Blouse</td><td></td><td>RM30.00</td> </tr>
<tr> <td>2.</td><td></td><td>Pijamas</td><td></td><td>RM8.90</td> </tr>
<tr> <td>3.</td><td></td><td>Scarf Lina</td><td></td><td>RM9.90</td> </tr>
<tr> <td>4.</td><td></td><td>Skirt</td><td></td><td>RM6.90</td> </tr>
</table>

On the above code, there is no line border.
By do a minor alteration on the first line code from <table> to <table border=2>, you can get as below

No	Item	Price
1.	Blouse	RM30.00
2.	Pijamas	RM8.90
3.	Scarf Lina	RM9.90
4.	Skirt	RM6.90

Regards

Adding Calendar

2011-01-23T16:00:00.006+08:00

You can insert the calendar in your blog. Recommend to place it by adding new gadget. In the page element, double click "add gadget" and chose HTML table.

Paste the code which is available here or click the image below.