Add Language Translator

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;amp;lt;input value="http://YOUR BLOG ADDRESS" name="u"  type="hidden"/&amp;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" />

How to write with superscript or subscript format

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^.00 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₂O
2.  CO₂

Move date under the title post

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

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

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)

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

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

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

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>&nbsp;</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

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

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

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;">

         to

<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

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

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

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

"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

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

"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.

Simple touch to enlarge image

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

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

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

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

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

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.

Pull Down Menu

Blog tips - Pull down menu or also called as drop down menu is something interesting in blog. It makes your blog look as website. Many of blog writer asked (desperate) a way to create a pull down menu for its revenue items. I have agood news for them as there is a simple way to get a dropdown menu.


Use the drop down DynamicDRIVE. This is your straightforward drop down menu, except in IE5+ and NS6+, a description of each selection is displayed beneath it. Very nice addition to a popular application wouldn't you say? Script updated to support options opening in a new window (IE5/NS6+ only), and ability to include multiple menus on the same page.

Get the example here.