hacking the blogger hack, part two
so now, i will show you how to hack the "How can I make show/hide links for my posts?" hack by blogger..
this is a bit trickier since on every post you make, you have to make sure that you give a unique id..
First of all, add these codes within your area and right after the closing of your style sheet..
<style>
.posthidden {display:none}
.postshown {display:inline}
</style>
<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>
Now for each post that you plan on adding the show/hide link to, you have to add this span tags as well as a link tag for the show/hide posts..
<span class="posthidden" id="WHATEVER YOU WANT TO CALL THIS POST AND MUST BE UNIQUE"></span>
<a href="javascript:expandcollapse('WHATEVER YOU WANT TO CALL THIS POST AND MUST BE UNIQUE')">
[+/-] show/hide this post</a>
so lets say that:
Here is the beginning of my post.<span class="posthidden" id="example post">And
here is the rest of it. </span>
<a href="javascript:expandcollapse('example post')">
[+/-] show/hide this post</a>
for an example, follow this link here
hacking the blogger hack, part one
Have you ever wondered how to use the expandable post summaries hack without having "Read more" message appear on every single post? Personally, I find it irritating to have a read more link on a post that doesn't even need it...
Anyways, I will show you how to hack the expandable post summaries hack using javascript..
First of all, add these codes within your <head> </head> area and right after the closing of your style sheet..
<style>
<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage>
span.fullpost {display:inline;}
</ItemPage>
</style>
<script type="text/javascript">
var memory = 0;
var number = 0;
</script>
Next, you have to add the following code to your template, somewhere after the <$BlogItemBody$> tag:
<MainOrArchivePage>
<script type="text/javascript">
spans = document.getElementsByTagName('span');
number = 0;
for(i=0; i < spans.length; i++){
var c = " " + spans[i].className + " ";
if (c.indexOf("fullpost") != -1) {
number++;
}
}
if(number != memory){
document.write('<a href="<$BlogItemPermalinkUrl$>">Read more...</a><br>');
}
memory = number;
</script>
</MainOrArchivePage>
For each post that you want to use this feature on, you will need to place this code:
<span class="fullpost"> </span>
So let's say that:
Here is the beginning of my post. <span class="fullpost">And here is the rest of it. </span>
And that's it! If you're wondering if this really works, it does because I just used it on this post.. Hope you enjoy it... and stay tuned I will also show you how to hack the show/hide posts hack.. Until then...
