Make Tab Accordian Bubbling Library

Originated from blog belonging to Jaloee & bubbling-library, I tried wrote came back about tab Accordian Bubbling Library. Tab Accordian Bubbling Library very practical to save the place in sidebar.

So let's followed his instruction:

1. To the page {Template}, please chose {edited Html}. Don't forget hit to the box (Expand Widget Template}.



2. Look for the code </head>.
3. Add this code before the code </head>.

<style type="text/css">.myAccordion {float: left;margin-right: 15px;}h3{padding: 8px;color: #636363;background-color: #ffffff;background-image: url(http://i288.photobucket.com/albums/ll179/ahnning/iniolehemikir-sampai-ngelu.gif);background-position: top;background-repeat: repeat-x;font-weight: normal;}.myAccordion .yui-cms-accordion .yui-cms-item {border: 1px solid #cccccc;width: 200px;}.myAccordion .yui-cms-accordion .yui-cms-item h3 {margin: 0px;}.myAccordion .yui-cms-accordion .yui-cms-item .accordionToggleItem {background: url(http://i288.photobucket.com/albums/ll179/ahnning/accordion.gif) no-repeat 0px 0px;text-decoration: none;padding-left: 20px;display: block;}.myAccordion .yui-cms-accordion .yui-cms-item.selected .accordionToggleItem {background: url(http://i288.photobucket.com/albums/ll179/ahnning/accordion.gif) no-repeat 0px -100px;}.myAccordion .yui-cms-accordion .yui-cms-item .bd {height: 0px;overflow: hidden;background-color: #fff;}.myAccordion .yui-cms-accordion .yui-cms-item .bd .fixed {overflow: hidden;padding: 5px;height: 230px;}</style><script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/utilities/utilities.js"></script><script type="text/javascript" src="http://js.bubbling-library.com/1.5.0/build/bubbling/bubbling.js"></script><script type="text/javascript" src="http://js.bubbling-library.com/1.5.0/build/accordion/accordion.js"></script>

4. Chose {Save Changes} and saw results. To try whether this tutorial functioned, chose {Page Element}. Please click in (Add a New Element} and chose {HTML/JavaScript}, afterwards put the code was supervised this:

<div class="myAccordion"><div class="yui-cms-accordion persistent rollover slow"><div class="yui-cms-item"><h3><a href="#" class="accordionToggleItem" title="click to expand">title</a></h3><div class="bd"><div class="fixed"><p>Put the text or the HTML code that you wanted </p></div></div></div><div class="yui-cms-item selected"><h3><a href="#" class="accordionToggleItem" title="click to expand">title</a></h3><div class="bd" style="height: auto;"><div class="fixed"><p>Put the text or the HTML code that you wanted </p></div></div></div> <div class="yui-cms-item"><h3><a href="#" class="accordionToggleItem" title="click to expand">title</a></h3><div class="bd" style="height: auto;"><div class="fixed"><p>Put the text or the HTML code that you wanted </p></div></div></div> <div class="yui-cms-item"><h3><a href="#" class="accordionToggleItem" title="click to expand">title</a></h3><div class="bd" style="height: auto;"><div class="fixed"><p>Put the text or the HTML code that you wanted </p></div></div></div></div><div style="text-align: right;">by<u><a href="http://blognyaloedin.blogspot.com/">blognya Loedin</a></u></div></div>

5. Various widget that might be put in tab this like Shoutbox, About Me et cetera. For the speed tab, exchanged words slow to fast if necessary.

6.Chose {Save Changes} and saw results and You could see results here