Content feed Comments Feed
ADVERTISEMENTS

At this post, Wonderful-Tricks isn’t going to create the same FAQs page as the site has, but Wonderful-Tricks is going to create the similar one with simple script using Dropdown menu. You can see the sample of the FAQs page at here. Almost the same, ain’t it?



To practice this tutorial, Wonderful-Tricks suggests you to use your other blog, not your main blog.


Step #1:


  1. Please log in to blogger with your ID

  2. Click Layout.

  3. Click Edit HTML.

  4. Copy and then paste the code below exactly above the code ]]></b:skin>

    .hiddenbar {display:none}
    .shownbar {display:inline}


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


  6. Click SAVE TEMPLATE


Step #2


  1. Click the tab Posting

  2. Give the title as Frequently Asked Questions

  3. Select the editor using Edit HTML

    post-editor


  4. Copy and then paste the code below into posting column

    <img src="http://lh5.ggpht.com/_pt7i0nbIOCY/SkXCcJxHEyI/AAAAAAAACFI/1-YvQbSviII/resultset_next_thumb%5B1%5D.png?imgmax=800" alt="click to expand"/>&#160;<a title="click to expand" href="javascript:togglebar('001')">How To make a Page feel effect in Blogger?</a>
    <br />
    <div class="hiddenbar" id="001">
    Hi, friends, in this post, I am gonna teach you how to implement the page peel effect in your blogs.Please read my tutorial <a href="http://wonderful-tricks.blogspot.com/2009/06/z-source.html">here!</a><br /><br /></div>

    <img src="http://lh5.ggpht.com/_pt7i0nbIOCY/SkXCcJxHEyI/AAAAAAAACFI/1-YvQbSviII/resultset_next_thumb%5B1%5D.png?imgmax=800" alt="click to expand"/>&#160;<a title="click to expand" href="javascript:togglebar('002')">How to Submit your Website or Blog to Bing.com?</a><br />
    <div class="hiddenbar" id="002">
    Microsoft’s new Bing Search Engine is currently the top buzz around the web since it offers ton’s of features like Google. Please read my tutorial <a href="http://wonderful-tricks.blogspot.com/2009/06/how-to-submit-your-website-or-blog-to_04.html">here!</a><br /><br /></div>

    <img src="http://lh5.ggpht.com/_pt7i0nbIOCY/SkXCcJxHEyI/AAAAAAAACFI/1-YvQbSviII/resultset_next_thumb%5B1%5D.png?imgmax=800" alt="click to expand"/>&#160;<a title="click to expand" href="javascript:togglebar('003')">Sending only content summary for your feedburner subscribers via email</a><br />
    <div class="hiddenbar" id="003">
    Many of the blogger in the world uses Feedburner which is now associated with google and its leading nowadays. Please read my tutorial <a href="http://wonderful-tricks.blogspot.com/2009/05/sending-only-content-summary-for-your.html">here!</a><br /><br /></div>

    <img src="http://lh5.ggpht.com/_pt7i0nbIOCY/SkXCcJxHEyI/AAAAAAAACFI/1-YvQbSviII/resultset_next_thumb%5B1%5D.png?imgmax=800" alt="click to expand"/>&#160;<a title="click to expand" href="javascript:togglebar('004')">How to Add Simple Dock Menu (FishEye Menu) For Blogs</a><br />
    <div class="hiddenbar" id="004">
    A fisheye-menu/dock menu is a menu with pictorial menu items which zoom on mouse-hover, and are linked to different web pages. Please read my tutorial <a href="http://wonderful-tricks.blogspot.com/2009/05/how-to-add-simple-dock-menu-fisheye.html">here!</a><br /><br /></div>


  5. Click Publish

  6. Done, now see the result

At the example above, Wonderful-Tricks 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!



[Source]

Your Ad Here

0 comments

Post a Comment

Blogumulus by Wonderful-Tricks

Followers