Wednesday, July 6, 2011

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<sup>.00</sup> compare


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

Example : H2O - water, CO2 - carbon dioxide
This can be done by adding in red as shown below.

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

Tuesday, July 5, 2011

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.

Monday, July 4, 2011

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.

Friday, July 1, 2011

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 :


Related Posts Plugin for WordPress, Blogger...