Senin, 13 Maret 2017
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.
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.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~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.
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 →
Related Posts:
Menu Menu Accordion Script menu
Langganan:
Posting Komentar (Atom)
0 komentar: