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

DEMO | DOWNLOAD

Note: I will not support this TypoXP version. Please use the latest version.

Read More...

A New Blogger Template was born. It was adapted from a Wordpress Theme, TypoXP 2.

TypoXP Blogger
Features:
- Expandable post summaries
- Author Comment Highlight
- TypoXP Sidebar Title Icon Set
- Label (Tags) Cloud Widget
- Archive Calendar Widget
- Recent Posts Widget
- Recent Comments Widget
- Search Widget

Installation instructions:

Step#1
Download TypoXP Blogger Templates


Step#2
Login to your Blogger Account. Goto Template>Edit HTML page.
BACKUP YOUR TEMPLATE FIRST.

Step#3
Upload TypoXP Blogger Templates.

Step#4
There is only "Profile" widget in default installation. Add and customize your widgets and icons.
- TypoXP Sidebar Title Icon Set
- Label (Tags) Cloud Widget
- Archive Calendar Widget
- Recent Posts Widget
- Recent Comments Widget
- Search Widget

Read More...

With this trick, you can choose to display an arbitrary amount of text from the beginning of each post, as a teaser for the whole thing. Then users who want to read the rest of the post can click a "Read More..." link to see the full text. This is handy if you have lots of long articles all on one page. Note that you don't need to change any code in TypoXP Blooger in order to make this feature work.

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.

Thanks to Blogger Help. For more explanation, please read an information here.

Read More...

This feature will give different style for Author Comments.

You don't need to do anything in order to make this feature work in TypoXP Blogger.

Thanks to Hackosphere. For more explanation, please read an information here.

Read More...

TypoXP Blogger (default) has 14 sidebar title icons below.

Calendar Icon Comment Icon Email Icon Feed Icon File Icon Folder Icon Meta Icon

New Icon OK Icon Pictures Icon Search Icon Tags Icon Users Icon Web Icon

Default icon for TypoXP Blogger sidebar title is . If you need to change this icon, read this instruction!

For example, you want to change icon for your HTML/JavaScript page element (widget) which has "Search" title with Search Icon.

Step #1
Go to Template>Edit HTML. Note that Expand Widget Templates box CHECKED.

Step #2
Scroll down and find yours in your template. Will look something like this.
<b:widget id='HTML1' locked='false' title='Search' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Step #3
Replace red code above with this code,
<div id='icon-search'><h2><data:title/></h2></div>

For others icons, you can use these code,

Calendar Icon
<div id='icon-cal'><h2><data:title/></h2></div>

Comment Icon
<div id='icon-comment'><h2><data:title/></h2></div>

Email Icon
<div id='icon-email'><h2><data:title/></h2></div>

Feed Icon
<div id='icon-feed'><h2><data:title/></h2></div>

File Icon
<div id='icon-file'><h2><data:title/></h2></div>

Folder Icon
<div id='icon-folder'><h2><data:title/></h2></div>

Meta Icon
<div id='icon-meta'><h2><data:title/></h2></div>

New Icon
<div id='icon-new'><h2><data:title/></h2></div>

OK Icon
<div id='icon-ok'><h2><data:title/></h2></div>

Pictures Icon
<div id='icon-pictures'><h2><data:title/></h2></div>

Search Icon
<div id='icon-search'><h2><data:title/></h2></div>

Tags Icon
<div id='icon-tags'><h2><data:title/></h2></div>

Users Icon
<div id='icon-users'><h2><data:title/></h2></div>

Web Icon
<div id='icon-web'><h2><data:title/></h2></div>

Read More...