On this occasion I will share a little about how to make accordion menu widget to Blogger. We will add some jquery code to make it more beautiful, maybe you've seen menu in sidebar or footer of a blog. If we click the menu, that menu will collapse down or slide down and appear new menu. You know this is brilian menu, using expand/collapse feature this menu look sophisticated. The name of this menu is accordion menu, if you are a programer you definitely very familiar with the accordion menu.
How To Create Accordion Widget Menu to Blogger
1. Go to Blogger > Layout > Add a Gadget
2. And select HTML/JavaScript
3. And add this code into it
<style>
#accordion{
background: #1B1B1B;
font-family: Helvetica, Arial, sans-serif;
font-size: 0.9em;
}
ul#accordion, ul#accordion ul {
list-style-type:none;
margin-right: 0;
padding: 0;
width: 100%;
}
ul#accordion a {
display: block;
text-decoration: none;
}
ul#accordion li {
margin-top: 1px;
}
ul#accordion li a {
color: #fff!important;
padding: 0.5em;
}
ul#accordion li a:hover {
background: #DDDDDD;
color: #333!important;
}
ul#accordion li a span {
top:0px;
float: right;
text-align: right;
color:#fff;
display:block;
}
ul#accordion li a span:hover {
color: #FF3300;
}
ul#accordion li ul li a {
background: none;
color: #E0E0E0!important;
padding-top: 3px;
padding-bottom: 3px;
line-height: 14px;
padding-left: 10px;
border-left: 5px #FFE500 solid;
}
ul#accordion li ul li a:hover {
background: #BFBFBF;
color: #000!important;
border-left: 5px #99FF00 solid;
padding-left: 10px;
}
</style>
<script>
function initaccordion()
{
$('#accordion ul').hide();
$('#accordion li a').click(function()
{
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible')))
{
$('#accordion ul:visible').slideUp('slow');
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible')))
{
$('#accordion ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
});
}
$(document).ready(function() {initaccordion();});
</script>
<ul id="accordion">
<li>
<a href="#">Blogging <span>▼</span></a>
<ul>
<li><a href="YOUR URL">SEO</a></li>
<li><a href="YOUR URL">Blogger</a></li>
<li><a href="YOUR URL">Wordpress</a></li>
<li><a href="YOUR URL">Adsense</a></li>
</ul>
</li>
<li>
<a href="#">Template <span>▼</span></a>
<ul>
<li><a href="YOUR URL">Anime</a></li>
<li><a href="YOUR URL">Cartoon</a></li>
<li><a href="YOUR URL">Avatar</a></li>
</ul>
</li>
</ul>
4. And save your widget
If you want to add more menu you just add code like this just below </li>
<li>
<a href="#">THE NAME OF YOUR MENU<span>▼</span></a>
<ul>
<li><a href="YOUR URL">THE NAME OF YOUR LINK</a></li>
<li><a href="YOUR URL">THE NAME OF YOUR LINK</a></li>
<li><a href="YOUR URL">THE NAME OF YOUR LINK</a></li>
</ul>
</li>
Ok, your widget menu is ready and if you are confused you can ask me in comment box.
