This is blog is technical detail I did in 2007. I wrote this technique long time ago. It is truth that this is only required to do only once. However, when I create another blogger account, I would like to repeat it again. Now I think it is better to take detail notes of steps so that I may need to reuse it again.
Here is the example I edited HTML for my Chinese blog.
Backup HTML
It is important to backup your Blogger HTML settings before doing any updates. Here is the place to find the HTML settings and make the complete copy of HTML before any updates.
Copy My CSS Settings
The following CSS codes are used by my blog. Insert the CSS definitions into header section. Here I copied it to end of </b:skin>
Copy Scripts
Immediately after about </b:skin>, add Javascript codes.
<b:skin>
...
]] > </b:skin>
<script type='text/javascript'>
function toggleIt(id) {
var post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
}
else {
post.style.display = '';
}
}
function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i != spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i != spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i != spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'none';
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i != spans.length; i++) {
if (spans[i].id == "fullpost")
found = 1;
if (spans[i].id == "showlink")
if (found == 0)
spans[i].style.display = 'none';
}
}
</script>
Insert Script Function Calls in Body Section
MODIFYING BLOG POSTS CODES
First find the line: <div class='post-header-line-1'/>
Insert the following codes after it:
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<div style='clear: both;'/>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p>
<a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'
href='javascript:void(0);'>读详细内容（Read More）...</a>
</p>
</span>
<span id='hidelink' style='display:none'>
<p>
<a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'
href='javascript:void(0);'>Collapse...</a>
</p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
</div>
NOTE: I found there is a duplicate post when the title of the post is clicked. The reason is that there is another div after the above codes:
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<data:post.body/>
<div style='clear: both;'/>
</div>
delete this section of div to avoid duplications.
NOTE: remove two tags: <div class="post-header"> ... </div> to avoid the content of post content in grey.
CODE FOR THE INCLUDABLE
Find the code: <b:includable id='feedLinksBody' var='links'>
Insert the following codes above it:
<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tbody>
<tr><td>
<h3 class='post-title'><a expr:href='data:post.url'
title='View this post only (comments visible).'><data:post.title/></a></h3>
</td></tr>
<tr><td>
<a expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'
href='javascript:void(0)'
style='text-decoration:none'
title='Expand/collapse this post (comments not visible)'>[+/-] 显示内容（Show/Hide This Post）.</a><br/>
<a expr:href='data:post.url' target='_blank'>
<i><font size='-2'>See/leave comments for this post in another window/tab.</font></i></a>
</td></tr>
</tbody></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/>
</div>
</div>
</b:includable>
<b:includable id='feedLinksBoday' var='links'>
INCLUDE THE INCLUDABLE IN THE POSTS WIDGET
Find the code: <b:includable id='main' var='top'>
In this section find: <b:include data='post' name='post'/>
Change it to:
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
Copy HTML Back to Blogger HTML Settings
After the change, copy the content of HTML from your local file back to blogger HTML settings.
REFERENCE
This feature of shrink and expend bloggs is based on
this blog.
Read More...
Collapse...
I watched WebBeat podcast one day in the last month. One video show got my attention: Explaining visual math in a simple way. I wrote a blog on my Chinese blog. It is very interesting to resolve a math multiply by visualization graphs. However, this method only applies to multiply of 2 digit numbers, and it becomes tedious when there carrier forward in the last and middle numbers.
Finally today My SO reputation points are over 2K, 2008. It is a lucky number. Actually, I have not actively raised or answered any questions recently. I just keep checking my SO site and watching some questions there. That's why my points grow very slow.
Posts
