TypoXP 2.1 Blogger Template

FEATURES

Complete Fonts and Colors Tags for Layout
Now you can change fonts and colors with your own style without HTML/CSS knowledges. Go to Template - Fonts and Colors and paint your own TypoXP 2.1 Blogger Template.
Header Image supported
Now you can change header image with your own image directly from your Template - Page Elements area.
Top Navigation Links
Now you can add links in your top navigation directly from your Template - Page Elements area.
Four Sidebar Widgets Area
There are 4 sidebar area. They are Top Sidebar, Middle Left Sidebar, Middle Right Sidebar, and Bottom Sidebar.
Selective expandable post summaries
I wrote a complete explanation for this hacks here.
TypoXP Sidebar Title Icon Set
Different widgets will have different icons (default) , but you can change this icon using this trick.
Author Comment Highlight
~~Label (Tags) Cloud Widget~~ (no longer available)
Some of you reported some errors when using this widget. If you want to add this feature in TypoXP 2.1 Blogger Template, you can follow instructions here.
~~Archive Calendar Widget~~ (no longer available)
Some of you don’t like or need this widget. If you want to add this feature in TypoXP 2.1 Blogger Template, you can follow instructions here.
Recent Posts Widget
Recent Comments Widget
Search Widget

LICENSE

By downloading and using this new blogger template, you agree to the following terms:

You may NOT resell this template
A link back to Black Quanta and Sunaryo Hadi must be retained in the footer (either modified or unmodified)
You may use this template for personal or commercial projects
You may modify, translate or distribute

DEMO

Check it out at http://typoxp2.blogspot.com

DOWNLOAD

TypoXP 2.1 Blogger Template (7.7 KB, 2,351 hits)

TypoXP Images Set (27 KB, 716 hits)

INSTALLATION

Download TypoXP 2.1 Blogger Template (ZIP File) and extract it to XML File
Install XML File you have saved. If you are a newbie, read How To Install a New Blogger Template
Go to Template > Page Elements.
Edit “Header” widget and upload your own header image (optional).
Edit “Top Menu” widget (LinkList widget in the header area) and add some links for your Top Menu.

Edit “Search” widget (HTML widget in the sidebar area) and copy this code,

<p><form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="10" type="text"/>
<input id="search-btn" value="Search" type="submit"/>
</form></p>

Edit “Recent Posts” widget (HTML widget in the sidebar area) and copy this code,

<ul>
<script style="text/javascript" src="http://duniaanda.googlepages.com/typoxp-recentposts.js">
</script>
<script style="text/javascript">
var numposts = 5;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://typoxp2.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
</script>
</ul>

Change typoxp2 with your blog.

Edit “Recent Comments” widget (HTML widget in the sidebar area) and copy this code,

<ul>
<script style="text/javascript" src="http://duniaanda.googlepages.com/typoxp-recentcomments2.js">
</script>
<script style="text/javascript">
var numcomments = 5;
var showcommentdate = false;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://typoxp2.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>
</ul>

Change yourblogname with your blog.

Go to Template > Fonts and Colors to change fonts and colors style (optional)
Finished

FREQUENTLY ASKED QUESTION

How can i use Selective Expandable Post Summaries?

Each post that you want to use this feature on will need this code:
<span class="fullpost"></span>

You’ll enter the summary text outside the span tags and the remainder inside, like so:
Here is the beginning of my post.
<span class="fullpost">And here is the rest of it.</span>

Now, when a reader visits your blog, this post will appear like this:
Here is the beginning of my post.
Read more…

When they click the link, they’ll go to the post page where they’ll see the whole thing:
Here is the beginning of my post.
And here is the rest of it.