In my old post i teach you how to create expandable post summaries using Conditional CSS. Now i am going you to teach you
Before you do anything in your template, please backup your template.
On your blogger dashboard, Click Layout -> Edit HTML -> Download Full Template.
This script adds an expandable post summary feature to your blog. The advantages of this JavaScript approach are:
The disadvantage of using JavaScript is it requires the viewer to not turn off scripting in their browser.
To implement this feature: From the blog dashboard go to Layout>Edit HTML.
Find this:
<b:skin>
Add the following classes to the <b:skin> template section:
.expand
{
display: inline;
}
.collapse
{
display: none;
}
{
display: inline;
}
.collapse
{
display: none;
}
Next, add the following script to the <head> section prior to the <b:skin> tag:
<script type="text/javascript" language="javascript">
//<![CDATA[
function toggleMore() {
var currentText = this.innerHTML;
if (this.nextSibling.nodeName == "#text") {
this.parentNode.removeChild(this.nextSibling);
}
if (currentText == "More...") {
this.innerHTML = "Hide <br />";
this.nextSibling.className = "expand";
}
else {this.innerHTML = "More...";
this.nextSibling.className = "collapse";
}
}
function attachHndlr() {
var anchors = document.getElementsByName("ToggleMore");
for (var i = 0; i < anchors.length; i++) {
anchors[i].oncIick = toggleMore;
anchors[i].href="#" + i;
}
}
//]]>
</script>
//<![CDATA[
function toggleMore() {
var currentText = this.innerHTML;
if (this.nextSibling.nodeName == "#text") {
this.parentNode.removeChild(this.nextSibling);
}
if (currentText == "More...") {
this.innerHTML = "Hide <br />";
this.nextSibling.className = "expand";
}
else {this.innerHTML = "More...";
this.nextSibling.className = "collapse";
}
}
function attachHndlr() {
var anchors = document.getElementsByName("ToggleMore");
for (var i = 0; i < anchors.length; i++) {
anchors[i].oncIick = toggleMore;
anchors[i].href="#" + i;
}
}
//]]>
</script>
Next change the <head> tag to:
<body onload='attachHndlr();'>
Finally, paste the following code into the 'post template' found at Settings>Formatting which will cause it to be loaded into the post editor automatically.
<a href="#" name="ToggleMore">More...</a><span class="collapse">
</span>
</span>
The text to be hidden is placed after the <span class="collapse"> tag. If the post does not require this feature, simply delete the code from the post editor window.
You'll enter the summary text outside the span tags and the remainder inside, like so:
Here is the beginning of my post.
<a href="#" name="ToggleMore">More...</a><span class="collapse">
And here is the rest of it.
</span>
Comments
0 comments to "How to create expandable post summaries using JavaScript"
Post a Comment