Menu Accordion

Menu Accordion merupakan menu tab view vertikal yang bisa dibuka tutup fungsinya terutama untuk menghemat tata letak dan variasui sehingga blog atau posting jauh lebih menarik.
Cara Pembuatan menu accordion

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:
]]></b:skin>
5. ika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:
   
   /* CSS Accordion styles */
   dl
   {
   padding: 10px;
   min-width: 660px;
   }
   a.ie { background: transparent; text-decoration: none; }
   dl dt
   {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border: 1px solid #000;
   margin: 0;
   }
   dl dt a,
   dl a.ie dt
   {
   color: #000;
   font-weight: bold;
   text-decoration: none;
   padding: 10px;
   display: block;
   }
   dl dd
   {
   color: #000;
   margin: 0;
   height: 0;
   overflow: hidden;
   -webkit-transition: height 1s ease;
   }
   dl dd p
   {
   padding: 10px;
   margin: 0;
   }
   dl dd:target
   {
   height: auto;
   }
   dl a.ie:hover dd,
   dl a.ie:focus dd
   {
   height: auto;
   color: #000 !important;
   }
   
   @media (-webkit-transition) {
   dl dd:target
   {
   height: 6.667em;
   }
   }
   
   Data warna merah digunakan untuk mengubah lebar menu.
6. Jika sudah, beralihlah ke penempatan menu baik di dalam posting maupun Gadget Blog letakkan Kode HTML dibawah ini tepat sesudah atau dibawah kode tersebut:
   
   <dl>
   <dt><a href='#Section1'>Section 1</a></dt>
   <dd id='Section1'>
   <p>
   Data Scrip 1
   Data Scrip 1
   </p>
   </dd>
   <dt><a href='#Section2'>Section 2</a></dt>
   <dd id='Section2'>
   <p>Data Scrip 2
   Data Scrip 2
   </p>
   </dd>
   <dt><a href='#Section3'>Section 3</a></dt>
   <dd id='Section3'>
   <p>
   Data Scrip 3
   Data Scrip 3
   </p>
   </dd>
   <dt><a href='#Section4'>Section 4</a></dt>
   <dd id='Section4'>
   <p>
   Data Scrip 4
   Data Scrip 4
   </p>
   </dd>
   </dl>
7. Semoga Sukses

{ Sumber : http://topblogs-tutorial.blogspot.com Editing ArisKoerniawan.Blogspot.Com }