TypoXP Blogger supports Expandable Post Summaries  

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

TypoXP Blogger supports Author Comment Highlight  

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

Costumize TypoXP Sidebar Title Icons  

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


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

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

Default icon for TypoXP Blogger sidebar title is TypoXP New Icon. 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 TypoXP Search Icon 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,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Read More...

Label (Tags) Cloud Widget for TypoXP Blogger  

This feature will give you a label (tags) cloud widget for your TypoXP Blogger sidebar.

Step#1
Goto the Template>Page Elements page, make sure you have a label widget already installed where you want it (it can be moved around
later).

Step#2
Go to Template>Edit HTML. Leave the Expand Widget Templates box UNCHECKED (default).

Scroll down and find your Label Widget code in your template. Will look something like this.

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Copy the following code, then highlight the label widget as shown and replace it with a paste.

<b:widget id='Label1' locked='false' title='Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<div id="icon-tags"><h2><data:title/></h2></div>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>


Save the widget. Then try it out.

Thanks to phydeaux3. For more explanation, please read information here.

Read More...

Archive Calendar Widget for TypoXP Blogger  

This feature will give you an archive calendar widget for your TypoXP Blogger sidebar.

Step#1
Goto the Template>Page Elements page, find or create your Blog Archive widget, and click to edit it. You'll see a screen like this



The title can be anything you want. The style MUST be Flat List as show. Options should NOT have Show Oldest Posts firsts checked. Archive Frequency MUST be Monthly. The Date Format can be anything you want. The calendar will accept whatever you decide here. Save the widget.

Step#2
Go to Template>Edit HTML. Leave the Expand Widget Templates box UNCHECKED (default).

Scroll down and find your BlogArchive Widget code in your template. Will look something like this.

<b:widget id='BlogArchive1' locked='false' title='Archives' type='BlogArchive'/>

Copy the following code, then highlight the archive widget as shown and replace it with a paste.

<b:widget id='BlogArchive1' locked='false' title='Calendar' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<div id='icon-cal'><h2><data:title/></h2></div>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>
<!-- Toggle not needed for Calendar -->
</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>

<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>

</caption>
<!-- Table Header -->
<thead id='bcHead'></thead>
<!-- Table Footer -->

<!-- Table Body -->
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>

<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>

</div>

<script type='text/javascript'> initCal();</script>

</b:includable>
<b:includable id='posts' var='posts'>
<!-- posts not needed for Calendar -->
</b:includable>
<b:includable id='menu' var='data'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='interval' var='intervalData'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
</b:widget>


Save the widget. Then try it out.

Thanks to phydeaux3. For more explanation, please read information here.

Read More...

Recent Posts Widget for TypoXP Blogger  


This feature will give you a Recent Posts widget for your TypoXP Blogger sidebar.

Goto the Template>Page Elements page, add a HTML/JavaScript page element.

Customize 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://typoxp.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
</script>
</ul>


Replace 'typoxp' with the name of your own blog.
Set the number of recent posts you want to show (default = 5).
If you want the post date to be displayed, give
true for showpostdate (default = true).
If you want a post summary to be displayed,
give true for showpostsummary (default = true), and enter the number of characters of the postsummary that you want to display (default = 100).

Copy the code, save the widget and try out it.

If you want to customize icon for widget title, click here.

Thanks to BeautifulBeta. For more explanation, please read information here.

Read More...

Recent Comments Widget for TypoXP Blogger  


This feature will give you a Recent Comments widget for your TypoXP Blogger sidebar.

Goto the Template>Page Elements page, add a HTML/JavaScript page element.

Customize 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://typoxp.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>
</ul>


Replace 'typoxp' with the name of your own blog.
Set the number of recent comments you want to show (default = 5).
If you want the comment date to be displayed, give
true for showcommentdate (default = false).
If you want the post title to be displayed,
give true for showposttitle (default = true).
Enter the number of characters of the comment summary that you want to display (default =
100).

Copy the code, save the widget and try out it.

If you want to customize icon for widget title, click here.

Thanks to BeautifulBeta. For more explanation, please read information here.

Read More...

Search Widget for TypoXP Blogger  

This feature will give you a search widget for your TypoXP Blogger sidebar.

Goto the Template>Page Elements page, add a HTML/JavaScript page element. Copy this code and save the widget.

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


If you want to customize icon for widget title, click here.

Read More...