This post will be showing you on how to make your texts go "Now you see me now you dont" in Blogger posts.
As you can see I am always going nuts thinking and coming up with new ideas which will make my posts engaging.
So one day I was thinking to myself what if I can write something fun for my readers. something that requires participation. Not only am I able share my views clearly, my readers also felt engaged..
If you are interested in how I execute these show/hide post html code do take a look at my Black Hat or White Hat? Star wars Post.
First let me start the session by showing you an example of how the expand and collapse will look like.. and what you can embed inside them..
Yup besides the texts you can "hide" videos and images using the code..
Lets Start with the Template tweaking part.. now for this to work you will have to edit your blogger template.(Always remember to back up your template before doing any tweaking)
Head over to your template and click on Edit HTML..
Search for these codes
.commenthidden {display:none}
.commentshown {display:inline}
Paste the following code underneath it.
After doing that, search for the closing head tag
</head>
And paste the following script above the closing head tag
You are done with the template.. Save your template.
Now each time you want to make your post expand or collapse under a certain subtopic, you just have to copy and paste these code in the HTML mode while you are composing your post.
You are suppose to change the highlighted code into your own words.. I am using the text in my example 1 refer to it if you are not sure of what to change.
As for the subtopicID, if you like you can use a string of numbers
Take note that both subtopicID must be the same in order to work.
Share your link in the comments if you are using it for your post. I would love to see your creativeness!!
As you can see I am always going nuts thinking and coming up with new ideas which will make my posts engaging.
So one day I was thinking to myself what if I can write something fun for my readers. something that requires participation. Not only am I able share my views clearly, my readers also felt engaged..
If you are interested in how I execute these show/hide post html code do take a look at my Black Hat or White Hat? Star wars Post.
First let me start the session by showing you an example of how the expand and collapse will look like.. and what you can embed inside them..
Click to Expand and Collapse
Now you see me now you dontEinstein Peekaboo
Yup besides the texts you can "hide" videos and images using the code..
Lets Start with the Template tweaking part.. now for this to work you will have to edit your blogger template.(Always remember to back up your template before doing any tweaking)
Head over to your template and click on Edit HTML..
Search for these codes
.commenthidden {display:none}
.commentshown {display:inline}
Paste the following code underneath it.
.posthidden {display:none}
.postshown {display:inline}
After doing that, search for the closing head tag
</head>
And paste the following script above the closing head tag
<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>
You are done with the template.. Save your template.
Now each time you want to make your post expand or collapse under a certain subtopic, you just have to copy and paste these code in the HTML mode while you are composing your post.
< href="javascript:expandcollapse('subtopicID')">
<h4>Click to Expand and Collapse</h4></a>
<span class="posthidden" id="subtopicID">
Now you see me now you dont</span>
You are suppose to change the highlighted code into your own words.. I am using the text in my example 1 refer to it if you are not sure of what to change.
As for the subtopicID, if you like you can use a string of numbers
Take note that both subtopicID must be the same in order to work.
Share your link in the comments if you are using it for your post. I would love to see your creativeness!!
this was great. could you expand it a bit more so a reader of my blog gets the title plus 2 or 3 lines below the title(and picture)? so they can get a taste of the blog then decide if they want to expand or not?
ReplyDeletethanks again!
Daniel
djpirato@gmail.com
Hi Daniel, I think I know what you are looking for!:) I have done that for most of my blog posts, you can see it on my homepage(click on Soundatventure banner)
DeleteGood news Blogger Blogspot already have a build in function. So when you are in your compose mode look for a button called "insert jump break" is located just beside the "insert video button". Click on the button and you'll see a dotted line thing.. anything below the line will not be shown on your homepage unless the reader decide to read further.
Hello, I hit expand of the html and yet there's nowhere to be found that piece of code: .commenthidden {display:none}
ReplyDelete.commentshown {display:inline}
Any ideas? :-?
Hi preludiance you can search for this code instead(remove spacing inbetween)
Delete]]>< /b:skin>
place these two code before it
.posthidden {display:none}
.postshown {display:inline}
After that follow though the remaining steps of this post.
Hello mate.
ReplyDeleteThanks for your reply. It doesn't work either.
I see this on my posted text
"href="javascript:expandcollapse('subtopicID')">
Click to Expand and Collapse"
I guess this is maybe I have disabled java. Java has many holes, is unsecure and that's why I disabled it.
Hihi nps. Can you expand the link on this post? If can I dont think is the problem with Java.
Deletehmm.Try publishing the post immediately without going back to the compose mode and view your page without using the preview button.
in the last code box you are missing the opening a tag, that might be the problem. What you need to add to the post is
Delete<a href="... (it won't let me use the whole code, but you get the idea)
besides that little detail, thanks for this post, I might start using it
Oooh. Thx for spotting it! Dani I have amended the code :D
DeleteDoesn't work for me. The < href="javascript:expandcollapse('subtopicID')"> part keeps showing up above the words "Click Here to Expand" and then it doesn't actually turn into a clickable link.
ReplyDeleteTry removing the space between "< "and "href "
ReplyDelete