How to Add Show/Hide Text/Image Effect, i.e Spoiler , Read More Text etc in Blogger Post. (Very easy)
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 new Updated Version of Show / Hide Option ( Very easy)
So here the tutorial step be
step
Step 1. Sign in to blogger dashboard.
Step 2. Go to Edit HTML.
Step 3. Find " <head>" by (Search option "CTRL+F")
Step 4. Copy the Below Code and Past before/Above <head>.
Step 5. Save your Template.
Now
Step 6. Go to blogger dashboard, and make a New Post ( For testing purpose )
Step 7. Change to HTML instead of Compose. ( As shown in below image).
+Effect,+Spoiler+and+Read+More+Text+in+Blogger+Post.+(+Very+easy).JPG)
Step 9. Copy the Below Code and past it Here ( In above image )
Step 10. Change the Text Below "PUT CONTENT YOU WISH TO SHOW/HIDE HERE " with your own which you want to appear in Show/Hide option.
Update the post....you have done...
Customize this CSS Code.
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 new Updated Version of Show / Hide Option ( Very easy)
Step 1. Sign in to blogger dashboard.
Step 2. Go to Edit HTML.
Step 3. Find " <head>" by (Search option "CTRL+F")
Step 4. Copy the Below Code and Past before/Above <head>.
<style type="text/css">
/* animated spoiler CSS by Trickandtechniques.blogspot.com */
.spoilerbutton {display:block;margin:5px 0;}
.spoiler {overflow:hidden;background: #ebebff;}
.spoiler > div {-webkit-transition: all 0.2s
ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s
ease;transition: margin 0.2s ease;}
.spoilerbutton[value="Show Answer"] + .spoiler >
div {margin-top:-100%;}
.spoilerbutton[value="Hide Answer"] + .spoiler
{padding:5px;}
</style>
|
Step 5. Save your Template.
Now
Step 6. Go to blogger dashboard, and make a New Post ( For testing purpose )
Step 7. Change to HTML instead of Compose. ( As shown in below image).
+Effect,+Spoiler+and+Read+More+Text+in+Blogger+Post.+(+Very+easy).JPG)
<input
class="spoilerbutton" type="button" value="Show
Answer" onclick="this.value=this.value=='Show Answer'?'Hide
Answer':'Show Answer';">
<div
class="spoiler"><div>
PUT CONTENT YOU WISH TO SHOW/HIDE HERE
</div></div>
|
Step 10. Change the Text Below "PUT CONTENT YOU WISH TO SHOW/HIDE HERE " with your own which you want to appear in Show/Hide option.
Update the post....you have done...
Customize this CSS Code.
- Change the color code #ebebff; in (Code 1 (Line 4)) with your own.
- Change Show Answer and Hide Answer with your own text to appear in box instead of "Show answer"
- (By Changing the Orange Color texts in Code 1 ( Line 8, and 10) and Code 2 ( Line 1, 2 and 3).
- For more and multiple spoilers, past the second HTML code again and again ( as in step 9).
Copy-righted Material.
http://trickandtechniques.blogspot.com/
+Effect,+Spoiler+and+Read+More+Text+in+Blogger+Post.+(+Very+easy).JPG)
Thank You Very Much Bro! I Used Your Technique And Its Working!!
ReplyDeleteThis Is My Link..Http://Infoaday.Blogspot.Com/
The Ctrl+F That You Suggest Was Most Helpful..
By The Way, Thanks Again!
you make my world smile :)
ReplyDelete