How To Exhibit Together With Enshroud Text Inwards Blogger Post


Hello and welcome dorsum to some other blogger tutorial on FH2M. Today I will portion a cool play tricks that you lot probably want to know, its virtually how to present as well as enshroud text inward blogger post. I bring seen this sort of play tricks on some websites "about" page, in where they exercise an FAQ on their site, and when you lot click on the questions a hidden answer will appear. This is too used for creating sub topics on their posts or static pages.

Here are some of the Demo


Title One

Subscribe to my site.


Title Two

For to a greater extent than tutorials.


Title Three

And blogger tricks.

How to install present as well as enshroud text inward blogger posts


1. Go to your blogger.com account.

2. Click on template > Customize > Advanced hence add together this code to the CSS area. After that click "Apply to Blog".
.posthidden {display:none}
.postshown {display:inline}
welcome dorsum to some other blogger tutorial on  How to present as well as enshroud text inward blogger post


If you lot didn't know how to discovery it, it is merely betwixt the <b:skin><![CDATA[ as well as the ]]></b:skin> in your blogger template.

3. Then discovery the </head> tag as well as seat the codes below merely inward a higher house it.

<script type="text/Javascript">

component subdivision expandcollapse (postid) {

whichpost = document.getElementById(postid);

if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>

4. After pasting those codes, salve your template. Now become to your blogger postal service or static page, click "HTML" as well as purpose the next codes. The number is the Demo above.

<a href="javascript:expandcollapse('subtopic0001')">
<h4>Title One</h4></a>
<span class="posthidden" id="subtopic0001">
Subscribe to my site.</span>

<a href="javascript:expandcollapse('subtopic0002')">
<h4>Title Two</h4></a>
<span class="posthidden" id="subtopic0002">
For to a greater extent than tutorials.</span>

<a href="javascript:expandcollapse('subtopic0003')">
<h4>Title Three</h4></a>
<span class="posthidden" id="subtopic0003">
And blogger tricks.</span>


Note: 


  • Remember if you lot are going to purpose it to a greater extent than than 1 times, you lot should ever customize its unique ID merely similar shown inward the sample colored inward red. 
  • Replace Subscribe to my site. with your ain judgement you want to travel hidden.


Cheers!

and 

Happy Holidays!!!