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

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.
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:

Menu Accordion Di Sidebar

Caranya :
1. Login ke akun Blogspot anda, Pilih Template ( Tema ) --> Edit HTML
2. Copy Paste kode dibawah ini sebelum kode </body >

 
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $('#sidebar .widget-content').hide();
    $('#sidebar h2:first').addClass('active').next().slideDown('slow');
    $('#sidebar h2').css('cursor', 'pointer').click(function() {
        if($(this).next().is(':hidden')) {
            $('#sidebar h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script>
 
3. Kode diatas adalah kode Default untuk template Blogger Standar. Dan apabila 
   kode diatas  tidak berhasil silahkan ganti yang warna merah sesuai dengan 
   div id dan tag headingnya pada sidebar template sobat.
4. jika sudah Fix , silahkan di Save
 
 
Hasilnya bisa sobat lihat tampilan Menu Sidebar Blog ini.
 
Terimakasih. 
 
 

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: