Creating FAQs page with Simple Dropdown Script
Sunday, June 28, 2009
At this post, Kang Rohman isn’t going to create the same FAQs page as the site has, but Kang Rohman is going to create the similar one with simple script using Dropdown menu. You can see the sample of the FAQs page here at http://tumaros.blogspot.com. Almost the same, ain’t it?
To practice this tutorial, Kang Rohman suggests you to use your other blog, not your main blog.
Step #1:
- Please log in to blogger with your ID
- Click Layout.
- Click Edit HTML.
- Copy and then paste the code below exactly above the code ]]></b:skin>
.hiddenbar {display:none}
.shownbar {display:inline} - Copy and then paste the code below exactly above the code </head>
<script type="text/Javascript">
function togglebar (barID) {
var whichpost = document.getElementById(barID);
if (whichpost.className=="shownbar")
{ whichpost.className="hiddenbar"; }
else { whichpost.className="shownbar"; }
}
</script> - Click SAVE TEMPLATE
Step #2
- Click the tab Posting
- Give the title as Frequently Asked Questions
- Select the editor using Edit HTML
- Copy and then paste the code below into posting column
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh78dNY3uCqOI41Mrap5vQBH0-sFiU-AyZ3ywyZETmCtT0ewujVHmxyWBuDoeVjCA0DvIcsgVaGrBIqaIWKknrU5wsQGKghSAVzt-efyM2PsAx7Avg4_hAFZfo3rp1u4x4zrKj6mC6t8jY/?imgmax=800" alt="click to expand"/> <a title="click to expand" href="javascript:togglebar('001')">How To make a Zoom effect in Blogger?</a>
<br />
<div class="hiddenbar" id="001">
There are many tricks to make zoom effect in blogger. One of theme is using Zoom effect with fancy zoom script. Please read my tutorial <a href="http://www.blogspottutorial.com/2008/11/zoom-effect-with-fancy-zoom-script.html">here!</a><br /><br /></div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh78dNY3uCqOI41Mrap5vQBH0-sFiU-AyZ3ywyZETmCtT0ewujVHmxyWBuDoeVjCA0DvIcsgVaGrBIqaIWKknrU5wsQGKghSAVzt-efyM2PsAx7Avg4_hAFZfo3rp1u4x4zrKj6mC6t8jY/?imgmax=800" alt="click to expand"/> <a title="click to expand" href="javascript:togglebar('002')">How to make D'tree menu in Blogger?</a><br />
<div class="hiddenbar" id="002">
There are many tricks to make D'tree menu in blogger. Please read my tutorial <a href="http://www.blogspottutorial.com/2008/05/maka-d-menu-at-blog.html">here!</a><br /><br /></div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh78dNY3uCqOI41Mrap5vQBH0-sFiU-AyZ3ywyZETmCtT0ewujVHmxyWBuDoeVjCA0DvIcsgVaGrBIqaIWKknrU5wsQGKghSAVzt-efyM2PsAx7Avg4_hAFZfo3rp1u4x4zrKj6mC6t8jY/?imgmax=800" alt="click to expand"/> <a title="click to expand" href="javascript:togglebar('003')">How to make multi column on blogger template?</a><br />
<div class="hiddenbar" id="003">
There are many tricks to make multi column on blogger template. Please read my tutorial <a href="http://www.blogspottutorial.com/2008/05/maka-d-menu-at-blog.html">here!</a><br /><br /></div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh78dNY3uCqOI41Mrap5vQBH0-sFiU-AyZ3ywyZETmCtT0ewujVHmxyWBuDoeVjCA0DvIcsgVaGrBIqaIWKknrU5wsQGKghSAVzt-efyM2PsAx7Avg4_hAFZfo3rp1u4x4zrKj6mC6t8jY/?imgmax=800" alt="click to expand"/> <a title="click to expand" href="javascript:togglebar('004')">How to make make contact form on blogger?</a><br />
<div class="hiddenbar" id="004">
There are many websites on the internet provide this service. One of theme is free service from http://www.emailmeform.com. Please read my tutorial <a href="http://www.blogspottutorial.com/2008/05/maka-d-menu-at-blog.html">here!</a><br /><br /></div> - Click Publish
- Done, now see the result
At the example above, Kang Rohman only creates four Questions with the Answers, you can add if you want, but you have to the unique code or different ID as Kang Rohman provides in red-printed code. The Unique ID can be anything; the most important is that it is different from the ID before, e.g. you end with 005, 006, 007,008, etc.
Happy trying!
