Dec 1, 2008

Add summary for blogger posts

This blogger hack is I view someone's blog,I forgot the which one's,so I share it for everyone.

Do it follow this:

Login http://www.blogger.com/, click Layout , Edit HTML and leave the widgets expanded.Tips:remember backup your template before edit the template.

Now the code comes in 2 parts. The first part to put in is the Javascript section. The following code needs to be copiedand inserted the code right AFTER the ]]></b:skin>, but BEFORE the </head> tag. Here it is the code:

<script type="text/javascript">
var fade = false;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") {

if (fade) {

spans[i].style.background = peekaboo_bgcolor;

Effect.Appear(spans[i]);

} else 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 &lt; spans.length; i++) {

if (spans[i].id == "fullpost") {

if (fade) {

spans[i].style.background = peekaboo_bgcolor;

Effect.Fade(spans[i]);} else 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 &lt; spans.length; i++) {

if (spans[i].id == "fullpost") {

spans[i].style.display = 'none';found = 1;

}

if ((spans[i].id == "showlink") &amp;&amp; (found == 0))spans[i].style.display = 'none';

}

}

</script>


Now the widget itself. Scroll down and find the blog widget. Add the code marked red,and the result should look like this:

<b:includable id='post' var='post'><div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>

<b:if cond='data:post.title'>

<h3 class='post-title'>

<b:if cond='data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>
<b:else/><data:post.title/>

</b:if>

</h3>

</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>


<b:if cond='data:blog.pageType == "item"'>


<p><data:post.body/></p>


<b:else/>
<style>#fullpost {display:none;}</style>

<p><data:post.body/></p>

<span id='showlink'>

<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read full post...</a></p>
</span>


<span id='hidelink' style='display:none'>

<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Read summary...</a></p>

</span>

<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");


</script>

</b:if>


<div style='clear: both;'/> <!-- clear for photos floats --></div>

Then save it.But it does not finnish.

The last step:go Setting→ Formatting →Post Template,Paste following code in it



<span id="fullpost">



</span>


it should like this:


After do this,you can write the summary out <span id="fullpost"> and </span> ,and write the part you want not dispaly between <span id="fullpost"> and </span>.






No comments:

Post a Comment