Cara Membuat Menu Accordion Blogger

Setelah sebelumnya banyak membahas tentang foto sampul, internet dan juga kesehatan. Pada kesempatan kali ini akan berbagi tentang blogging. Meskipun banyak diantara Anda mungkin banyak yang sudah mengetahui tentang pembahasan kali ini yaitu cara membuat accordion untuk blogger. Tapi siapa tahu saja untuk Anda yang belum tahu bisa menjadi tahu dengan membaca postingan Bangiz kali ini. Apalagi untuk yang sedang memperindah tampilan blog, mudah-mudahan bisa memberi inspirasi.

Accordion untuk blog atau site sendiri banyak sekali jenis dan bentuknya, ada yang vertikal, horizontal, berupa gambar dan sebagainya. Oke jika Anda tertarik langsung ikuti saja caranya berikut ini:

1. Masuk Dasbor Blogger

2. Pilih Tat Letak > Tambahkan Gadget > Tambahkan HTML/Javascript

3. Copy-Paste kode berikut

    <style>
    #accordion{
      background: #990099;
      font-family: Arial, sans-serif;
      font-size: 1.2em;
    }
    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="#">NEGARA <span>?</span></a>
    <ul>
    <li><a href="URL ANDA">Indonesia</a></li>
    <li><a href="URL ANDA">Inggris</a></li>
    <li><a href="URL ANDA">Kanada</a></li>
    <li><a href="URL ANDA">Jepang</a></li>
    </ul>
    </li>
    <li>
    <a href="#">KOTA <span>?</span></a>
    <ul>
    <li><a href="URL ANDA">Jakarta</a></li>
    <li><a href="URL ANDA">Bandung</a></li>
    <li><a href="URL ANDA">Surabaya</a></li>
    </ul>
    </li>
    </ul>

4. Simpan dan lihat hasilnya

Keterangan:

#990099 adalah kode warna untuk background, untuk mengganti dengan warna lain silahkan lihat disini. 

Arial adalah jenis font, Anda bisa menggantinya sepaya sesuai dengan font lainnya yang ada pada template.

1.2em adalah ukuran huruf, tinggal ubah saja nilainya.

URL ANDA silahkan ganti dengan alamat URL dari judul yang di sampingnya

Untuk menambahkan menu baru, copy-paste kode berikut sesudah kode </li>

<li>
<a href="#">BENUA<span>?</span></a>
<ul>
<li><a href="URL ANDA">ASIA</a></li>
<li><a href="URL ANDA">Eropa</a></li>
<li><a href="URL ANDA">Afrika</a></li>
<li><a href="URL ANDA">Amerika</a></li>
</ul>
</li>

Selesailah pembahasan kali ini tentang membuat menu accordion, jika ada pertanyaan seputar topik di atas silahkan tinggalkan komentar dan jika Anda berkenan silahkan bagikan ke rekan Anda melalui sosial media. Terima kasih sudah berkunjung.