How to show and hide text in blogger post

/ Monday, December 17, 2012 /

Hello and welcome back to another blogger tutorial on FH2M. Today I will share a cool trick that you probably want to know, its about how to show and hide text in blogger post. I have seen this kind of trick on some websites "about" page, in where they create an FAQ on their site, and when you click on the questions a hidden answer will appear. This is also 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 more tutorials.


Title Three

And blogger tricks.

How to install show and hide text in blogger posts


1. Go to your blogger.com account.

2. Click on template > Customize > Advanced then add this code to the CSS area. After that click "Apply to Blog".
.posthidden {display:none}
.postshown {display:inline}
css area for blogger


If you didn't know how to find it, it is just between the <b:skin><![CDATA[ and the ]]></b:skin> in your blogger template.

3. Then find the </head> tag and put the codes below just above it.

<script type="text/Javascript">

function expandcollapse (postid) {

whichpost = document.getElementById(postid);

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

4. After pasting those codes, save your template. Now go to your blogger post or static page, click "HTML" and use the following codes. The result 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 more 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 are going to use it more than 1 times, you should always customize its unique ID just like shown in the sample colored in red. 
  • Replace Subscribe to my site. with your own sentence you want to be hidden.


Cheers!

and 

Happy Holidays!!!


0 comments:

Post a Comment

Labels

Thank you for visiting my site. I’m the author of home decor help, home garden decor, home design interiors, tina 4 home design, uhozz, visit yogurt lab, sitazine, is beauty tips and sunnijati website.

About

Modestop Topmodest Shitazine Sitahouseblog Izhealthy Shitadesign Sitahouse Topmodest Sitazine Irezine Home- decor-design Shitadesign Shitadesign-dot-com Inhomeland inhouseland ghiuldenika inebautystyle enterarteiuna radiodominiopublico biberealexandru fabiobernadosdi geeklore31 syahadah-alhafeezah peaceloveiman bigwideempty techandchefadventures kaosgunlugu fikirkulubleri duazinciri theinternationalrules morefortngintn monkeymanzach lifeatthegreenys photokid84 chelsea-settles chasingmommyhood sexyhotactresseswallpaper tophotnewstodays avvani urbantrendsussex voychic reisyamode sitazine reportmy homedesignideasx mystylepinterest fashionstyleco popularnewstips isexy-hot-girls sexywomengirl trendymodeku derumahdesign womenhairs hackoblogger gadiswomen homeinteriordesignideas1s homedesignideasa uniquehomedesignsw enterpreneurforbloggers earningblogtipss lilyandgiasmom onfeatureblog aboutadsen onblogsocial tecnologiku onlinekutip akuhub caramakemoney youseoneed blogukus newbieblogit adsenseguideto triond-adsense inseoservice intipseoblog otherseoblog freeseoguid seoblognets tawaguideblog seosecretip buzdesign modewomen gayawoman cantikide tipsehat bebeautyps tipsjilbabcantiks idekontenislami healthfitnessnutritionsz jilbab-tips tips-home-decor caramemakaijilbabv beritaremajaterkinie allisoncrewnews mypinspinterest mypinspinterest gogirlsgallery seyhotgirls topmodest worldotgirls seksigirlsblog yourgirlsnet sexywomensia decorativehousedesigns simplebloggertipsz aboutadsense09s marketingner freeseotipstricksz womensiana chicstylegallery oblogkudewe colhomegallery marketserve onlibusiness artodesign designinguide oninteriorhome interiormu intutorblog blogoffeed newbloggerhint enginseo dibisnistips internetmublog onroomdesign homegardenco
 
Copyright © 2010 Enterpreneur for bloggers, All rights reserved
Design by DZignine. Powered by Blogger