Tuesday, April 30, 2013

Monday, April 29, 2013

Sunday, April 28, 2013

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)

  2:39 AM Electrical Technology   , , , , ,   4 comments   Edit
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.
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).
 Step 5. Copy the Below Code and past it Here ( In above image )


<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/

Saturday, April 27, 2013

Math IQ Trick. Try to Answer.

  11:26 PM Electrical Technology   , , , , , , ,   4 comments   Edit
Math IQ Trick... For Right Answer...just Click on " Show Answer "

                                 http://trickandtechniques.blogspot.com/
Answer : 848
Explanation:
68 → 6x8 = 48 and then take the second number  (i.e 8) and bring out to before 48. i.e 848

Sunday, April 21, 2013

Friday, April 19, 2013

How to Add Show/Hide Text/Image Effect, i.e Spoiler , Read More Text etc in Blogger Post. (Very easy)

  2:36 AM Electrical Technology   , , ,   2 comments   Edit
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>.


<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).

Step 9. Copy the Below Code and past it Here ( In above image )
<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).  

LIVE  DEMO2


Copy-righted Material.
http://trickandtechniques.blogspot.com/
Subscribe to: Posts (Atom)