Magical interlude
Here’s how to do the “click to read more” in Blogger…
0. Back up your template and keep it safe in case anything goes wrong and you need to go back to that. I’ve tested this code and it works great. But I get paid to do this kind of thing. And quite frankly, if you want me to do it for you, you can pay me, too.
1. Put this script in the <head> section of your template:
function dopostmagic(pid)
{
var diva = document.getElementById("posta-"+pid);
var divb = document.getElementById("postb-"+pid);
divb.style.display = "none";
for ( var i = 0; i < diva.childNodes.length; i++ ) {
var child = diva.childNodes[i];
if ( child.className == "magicwand" ) {
break;
}
}
if ( i == diva.childNodes.length ) {
return;
}
var magicText = diva.childNodes[i].innerHTML;
diva.removeChild(diva.childNodes[i]);
if ( diva.childNodes[i].tagName == "BR" ) {
diva.removeChild(diva.childNodes[i]);
}
while ( i < diva.childNodes.length ) {
var child = diva.childNodes[i];
diva.removeChild(child);
divb.appendChild(child);
}
var a = document.createElement("span");
a.innerHTML = magicText;
a.onmouseover = function() { this.style.textDecoration = "underline"; };
a.onmouseout = function() { this.style.textDecoration = "none"; };
a.onclick = function() { divb.style.display = "block"; };
diva.appendChild(a);
}
</script>
2. Look for this code in your template:
3. Take that out and replace that with this:
<div expr:id='"postb-" + data:post.id'/>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>dopostmagic("<data:post.id/>");</script>
</b:if>
4. Now whenever you want to create that “click to read more”, here’s what your post will look like:
<div class="magicwand">this is what you click to read what's below</div>
this is what you can't see until you click the text of the line above.
5. Enjoy! You may repay me by being excellent to your fellow man planet team member. Or cash. I accept both. :)
6. On the other hand, if you want to automatically break your post after 20 lines or so, skip step 4 and instead of the script in step 1, put this code in the <head> section of your template:
var lineLimit = 20;
function dopostmagic(pid)
{
var diva = document.getElementById("posta-"+pid);
var divb = document.getElementById("postb-"+pid);
divb.style.display = "none";
var bcount = 0;
for ( var i = 0; i < diva.childNodes.length; i++ ) {
var child = diva.childNodes[i];
if ( child.tagName == "BR" ) {
bcount++;
}
if ( child.innerHTML ) {
bcount += (child.innerHTML.length / 60);
}
else if ( child.nodeType == 3 ) {
bcount += (child.length / 60);
}
if ( bcount > lineLimit ) {
i++;
break;
}
}
if ( i == diva.childNodes.length ) {
return;
}
var magicText = "Click here to read more of this post";
while ( i < diva.childNodes.length ) {
var child = diva.childNodes[i];
diva.removeChild(child);
divb.appendChild(child);
}
var a = document.createElement("span");
a.style.display = "block";
a.style.marginTop = "8px";
a.innerHTML = magicText;
a.onmouseover = function() { this.style.textDecoration = "underline"; };
a.onmouseout = function() { this.style.textDecoration = "none"; };
a.onclick = function() { divb.style.display = "block"; };
diva.appendChild(a);
}
</script>
7. Note that it won’t be exactly however man lines you specify in the lineLimit variable (which you may change if you like), but it ought to be pretty close.
P.S. This code is for new Blogger templates. If you still have the old kind, you’ll need something different — let me know and I’ll send it to you.
<< Home