Kunjungi Blog Gallery Midi Full di Klik disini!
Place your ADS here !!

Senin, 13 Maret 2017

Widgets

Beautiful Accordion Menu Widget For Blogger

Accordion is a musical instrument which can be played by compressing or expanding a hand-held bellows. Likewise, the Accordion interface is a stacked list of items in which each item can be expanded and collapsed.
jquery accordion menu widget

Here I'm presenting you the code for creating a pretty Accordion widget for your Blog. First you need to make sure that Jquery is added to your template.

Navigate to your Blog's Dashboard --> Template --> Edit HTML.
Press Ctrl+F and search for <head>.
Add the below code under <head> and save the template.

<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>

Now access Layout from the left menu and click Add a Gadget.
Select HTML/Javascript.
Copy and paste the following code. You can put a title if you want and click Save.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div id="accordion"><ul><li><h3>Main Heading 1</h3>
<ul><li><a href="http://samplescriptmenu.blogspot.co.id/">Sub Heading 1</a></li>
<li><a href="http://samplescriptmenu.blogspot.co.id/">Sub Heading 2</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 3</a></li></ul></li>
<li><h3>Main Heading 2</h3>
<ul><li><a href="http://anjanadesigns.blogspot.com">Sub Heading 4</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 5</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 6</a></li></ul></li>
<li><h3>Main Heading 3</h3>
<ul><li><a href="http://anjanadesigns.blogspot.com">Sub Heading 7</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 8</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 9</a></li></ul></li>
<li><h3>Main Heading 4</h3>
<ul><li><a href="http://anjanadesigns.blogspot.com">Sub Heading 10</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 11</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 12</a></li></ul></li></ul></div>

<style type="text/css">#accordion {margin: 0;padding:0; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #fff; width: 250px;} #accordion h3 {font: 15px Arial; padding: 9px; color:#fff; cursor: pointer; background:#FF0080 border-bottom:1px solid #fff;} #accordion li {list-style-type: none; padding:0; margin:0; background-color:#f4f4f4;} #accordion ul ul li a {border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd; color: #3b3b3b; text-decoration: none; font: 12px Verdana; display: block; padding: 8px 0 8px 8px;} #accordion ul ul li a:hover {padding-left:15px; background-image:url(http://4.bp.blogspot.com/-jxfJ5gu2Awo/VEnYYEWxE2I/AAAAAAAAHZ8/B_mVrXyBmN4/s1600/pink.png); background-position:left; background-repeat:no-repeat;} #accordion ul ul {display: none;} #accordion li.active ul {display: block;} #accordion ul{list-style:none; margin:0; padding:0;}</style>

<script>$(document).ready(function() { $("#accordion h3").click(function(){$("#accordion ul ul").slideUp(); if(!$(this).next().is(":visible")) {$(this).next().slideDown();}})})</script>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Important:

To change the color of Accordion, change the values in Pink,
Replace "http://samplescriptmenu.blogspot.co.id/" with your link.

SHARE THIS POST   

  • Facebook
  • Twitter
  • Myspace
  • Google Buzz
  • Reddit
  • Stumnleupon
  • Delicious
  • Digg
  • Technorati
Author: Kacam "herdiz72" Suhendra
Saya adalah penyuka Blog sejak lama dan berharap bisa berbagi ilmu yang ada dan mendapatkan Side Income dari Blog yang saya buat.. Read More →

0 komentar: