Loading...

Cara Membuat Menu Accordion Blogger

Bangiz - 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:
Accordion blogger
Menu accordion blog
1. Masuk Dasbor Blogger

2. Pilih Tata 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. 
Name

Android,5,Blogging,108,CorelDRAW,14,Desain Grafis,24,Facebook,22,Foto Sampul,34,Gambar,54,Info,18,Internet,31,Kata Mutiara,26,Kesehatan,31,Komputer,25,Microsoft Word,12,Office,12,PhotoScape,10,Resep,6,SEO,10,Sosial media,21,Tutorial,36,Wallpaper,20,
ltr
item
Bangiz: Cara Membuat Menu Accordion Blogger
Cara Membuat Menu Accordion Blogger
Trik membuat accordion keren di blog, cara bikin accordionuntuk situs web-blogger-blogspot, membuat accordion dengan efek yang keren,,
https://2.bp.blogspot.com/-wgmUZ3taUIs/UqFW5bBbRHI/AAAAAAAAIIU/pS3IDRso5I4/s320/Accordion.jpg
https://2.bp.blogspot.com/-wgmUZ3taUIs/UqFW5bBbRHI/AAAAAAAAIIU/pS3IDRso5I4/s72-c/Accordion.jpg
Bangiz
https://bangiz.blogspot.com/2013/12/Accordion-Keren.html
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/2013/12/Accordion-Keren.html
true
5131493432912556385
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy