New Updated Version . How to Add Show/Hide Text/Image Effect, i.e Spoiler , Read More Text etc in Blogger Post. (very easy, without touching your HTML source)
This is a very beautiful and important tips for bloggers. You can show text and hide the rest. You can also use this s a Read More option.
This is a very beautiful and important tips for bloggers. You can show text and hide the rest. You can also use this s a Read More option.
But most suitable for MCQs (Multiple
Choice Question) or Fill in the blank or any kind of question, so you can hide
answer till the visitor click on the “Show Answer"
Here is the Old one version, you can also apply This One.
So here the tutorial step be step
Step 1. Sign in to blogger dashboard.
Step 2. Click on "make a New Post" ( For testing purpose )
Step 4. Change to HTML instead of Compose. ( As shown in below image).
+Effect,+Spoiler+and+Read+More+Text+in+Blogger+Post.+(+Very+easy).JPG)
Step 5. Copy the Below Code and past it Here ( In above image )
Customization:
Change the text in pink color (Put your Question/Text Here) what ever you want.
Change the text in Red and Blue Color for what you want to show instead of
Show Answer / Explanation and Hide Answer / Explanation
Change the "180px" for box width
Change the text size ( Box text size .e show/hide answer) with "14px" i.e 16 px ,18 px etc.
Change the background color with #ebebff
Change the text "Text which you want to show and hide" or whatever you want to show and hide.
At last ( this would be more interesting, promise :))
When you put the above code in Text editor in HTML ( as shown in above image) then change the code in green color (none) with yes , and then change Compose instead of HTML, so you can see the box, in which you can put text or images directly. ( but do not forget to change "yes" with "none" again, when you complete your text post)
Copy Right material : http://trickandtechniques.blogspot.com/
Here is the Old one version, you can also apply This One.
So here the tutorial step be step
Step 1. Sign in to blogger dashboard.
Step 2. Click on "make a New Post" ( For testing purpose )
Step 4. Change to HTML instead of Compose. ( As shown in below image).
+Effect,+Spoiler+and+Read+More+Text+in+Blogger+Post.+(+Very+easy).JPG)
<div
style="margin: 5px;"><br /> <div
class="smallfont" style="margin-bottom:
2px;"><i><span style="font-weight: bold;">Put your Question/Text Here</span></i><input
value="Show Answer / Explanation"
style="margin: 0px; padding: 0px; width: 180px;
font-size: 14px;" onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
!= '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= ''; this.innerText = ''; this.value = 'Hide Answer
/ Explanation'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = ''; this.value = 'Show
Answer / Explanation'; }" type="button"/><br
/> </div><br /> <div class="alt2"
style="border: 1px inset ; margin: 0px; padding: 6px;"><br
/> <div style="background-color: #ebebff; display: none;"> Text which you want to show and hide
</div></div></div>
|
Customization:
Change the text in pink color (Put your Question/Text Here) what ever you want.
Change the text in Red and Blue Color for what you want to show instead of
Show Answer / Explanation and Hide Answer / Explanation
Change the "180px" for box width
Change the text size ( Box text size .e show/hide answer) with "14px" i.e 16 px ,18 px etc.
Change the background color with #ebebff
Change the text "Text which you want to show and hide" or whatever you want to show and hide.
At last ( this would be more interesting, promise :))
When you put the above code in Text editor in HTML ( as shown in above image) then change the code in green color (none) with yes , and then change Compose instead of HTML, so you can see the box, in which you can put text or images directly. ( but do not forget to change "yes" with "none" again, when you complete your text post)
Copy Right material : http://trickandtechniques.blogspot.com/
+Effect,+Spoiler+and+Read+More+Text+in+Blogger+Post.+(+Very+easy).JPG)
I simply cannot believe this doesn't have a gazillion comments praising it to high heavens.
ReplyDeleteI was looking for an elegant way to show/hide blurbs on my book review blog and I did not want to add more CSS or HTML to my template.
Not because I don't know how mind you, but because Bing and Google give me warnings for having too much already.
After searching and discarding option after option I ran across this and I honestly could not be happier. It works in IE, it works in mobile, it works in most of the feed readers I tested. For a solution like this to work almost everywhere, NEVER happens!
Add in that it was easy to customize and you have one thrilled blogger! Thank you so, so much for creating and sharing this simple to use and highly compatible solution to hiding possible spoilers.
thanks a tonn is there any way i can prevent copying the same code in html again and again bcoz if i move to wordpress how will i retain my data please kindly reply !
ReplyDeleteHello, if i want put image instead "show answer" is it possible ? Beacause i don't like that button with text.. :) Thank you for answer
ReplyDeleteDon't know how often you check comments but HELP! I have tried about six different codes in the last several hours but all have failed. Failure always seems to derive from the same thing: blogger replaces input onclick or input "show" onclick with input blogger_onclick upon the first save or the first reopening of the code. Since I am trying to use it to code my school blog and save space for ever-growing homework and vocab lists, I will need to reopen the gadgets involved frequently. At first I thought maybe it was a gadget thing, but they are text gadgets and so is the post box, and for whatever reason it all works fine in the post box.
ReplyDeleteCan you help????