created vertikal menu accordion with Css3

Limitations of space on your blog often results widgets seen piling up and messy. This would reduce the comfort of our guests while reading the article.

Well, one way that can solve all problems, it is put Accordion vertical Menu CSS3. In addition to save space in the template,  This Accordion does not make heavy loading page.  The effect its also good too than Accordion which is made using Jquery and JavaScript.

So, I was looking for other ways of making it more simple. And, Bingo! I found a simpler Accordion effect and it can make different color on the active tab without javascript.

Before we begin to learn how to make it, You could see the first preview of the menu in here Demo Accordion Accordion CSS 3.

But the bad thing is its not working in internet explorer 

Well if you want. check this how to make it ..!




1. Login to your Blogger account, then design and select Edit HTML tab.
(Do not forget to click on Download Full Template to watch "if there are errors in the editing later)

2. Enter the following code before the code ]]></b:skin>

#acc{background:#666;font:13px trebuchet ms;
line-height:1.2em;padding:10px;margin:0;}
#acc h3{background:-moz-linear-gradient(top,#ccc,#999);padding:5px 10px;margin:0;color:#222;
text-shadow:0px 1px 1px #fff;
border-bottom:2px solid #444;}
#acc h3 a{color:#555}
#acc h3 a:hover{color:#000}
#acc .post{background:#fff;color:#000;padding:10px;margin:10px 0px;display:none;
border-bottom:2px solid #222;}
#acc :target h3 + .post {display:block;height:150px;overflow:auto;}
#acc :target h3 a{color:#aa5500}

3. Save your template then go to the Page Elements, click Add a Gadget on the location every where you want, then select the HTML / Javascript. 

 

4. then put this code bellow

<div id="acc">
<div id="isi1">
<h3><a href="#isi1"> title 1</a></h3>
<div class="post">
your text or widget </div>
</div>
<div id="isi2">
<h3><a href="#isi2">title 2</a></h3>
<div class="post">
your text or widget </div>
</div>
<div id="isi3">
<h3><a href="#isi3">title 3</a></h3>
<div class="post">
your text or widget
</div>
</div>
</div>

        save and you are done.

Description:

Replace red text with a message or everything you want like widget code.
Replace the green text with the title of the widget / your text.

* Save the results of work mate ,and see the results . Hopefully useful
also check this for better recent post in your posting blogger tutorial membuat widget related post with icon

Stay updates with this blog! By entering your email address below, then you will get free email newsletter updates from this blog.