Trick is to create hidden buttons add-on widgets

By inserting a small java script code in the widget code in Edit HTML, you can create a link button located in the header of each widget that allows hide / show widget that when clicked on it. Snippet from the blog reference Fandung With this procedure, you can hide content as illustration:

The steps procedure: 1. In the layout (layout) 2. In editing HTML code (edit the HTML code) 3. Choose "expanded utility model" (expand widgets template) 4. Find the code of the widget you want to insert this gadget, as in illustration, application procedure for utility Label, so we will find its code, and below is its code:

<b:widget id='Label1' locked='false' title='Nhãn' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

And add code to as below:

<b:widget id='Label1' locked='false' title='Nhãn' type='Label'> <b:includable id='main'> <script type='text/javascript'> //<![CDATA[ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">'); //]]> </script>[▼/▲] <script type='text/javascript'> //<![CDATA[ document.write('</a>'); //]]> </script> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <script type='text/javascript'> //<![CDATA[ document.write('<div id="' + rnd + '" style="display:none;">'); //]]> </script> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> </li> </b:loop> </ul> <script type='text/javascript'> //<![CDATA[ document.write('</div>'); //]]> </script> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Note: The code can change the way you like blue, specifically + [▼ / ▲]: change the character ▼ / ▲ according to your preference. + Float: left; margin-right: 5px;: this is the code locate the display of the button [▼ / ▲] on the title of the widget. If you want it shown on the right is the correct float: right; margin-right: 5px; 6. Save the template. If you want to add default text widget displays the edit line:

//<![CDATA[ document.write('<div id="' + rnd + '" style="display:none;">'); //]]>

to:

//<![CDATA[ document.write('<div id="' + rnd + '" style="display:block;">'); //]]>

Related Posts by Categories