Cara Membuat Menu Accordion Di Postingan Blog Responsive



Cara Membuat Menu Accordion Di Blog - Di sini saya akan memberikan tutorial membuat menu scroll down pada blog, menu ini banyak fungsi, salah satunya membuat submenu di postingan blog agar terlihat lebih rapi.

DEMO
dan untuk contoh yang saya gunakan untuk postingan adalah

DEMO

Jika kamu tertarik untuk menggunakannya pada postingan kamu, silahkan ikuti tutorial di bawah ini :

Sebelumnya di blog kamu harus sudah terpasang kode JQuery

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

1. Log in Blogger > Tema > edit Tema > Salin kode di bawah ini tepat sebelum </style>

.accordion {
  max-width: 600px;
  margin: 4rem auto;
  width: 90%;
  font-family: "Raleway";
  background: #f4f4f4;
}
.accordion__title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 1rem 1.5rem;
  background: #5B5F97;
  color: white;
  cursor: pointer;
  -webkit-transition: .3s ease;
          transition: .3s ease;
}
.accordion__title:hover {
  background: #484b77;
}
.accordion__copy {
  display: none;
  padding: 1rem 1.5rem 2rem 1.5rem;
  color: gray;
  line-height: 1.6;
  font-size: 14px;
  font-weight: 500;
}
.accordion__copy--open {
  display: none;
}

2. Salin kode di bawah ini tepat di atas kode </body>

var $title = $('.js-title');
var copy   = '.js-copy';

$title.click(function () {
  $(this).next(copy).slideToggle();
  $(this).parent().siblings().children().next().slideUp();
  return false;
});

3. Simpan

PENERAPANNYA


1. Silahkan salin kode di bawah ini pada kolom postingan kamu

<div class="accordion">
  <div class="accordion__item">
    <h3 class="accordion__title js-title">Judul Konten</h3>
    <p class="accordion__copy accordion__copy--open js-copy">KONTEN_KAMU_DI SINI</p>
  </div>
  
  <div class="accordion__item">
    <h3 class="accordion__title js-title">Judul Konten</h3>
    <p class="accordion__copy js-copy">KONTEN_KAMU_DI SINI</p>
  </div>
  
  <div class="accordion__item">
    <h3 class="accordion__title js-title">Judul Konten</h3>
    <p class="accordion__copy js-copy">KONTEN_KAMU_DI SINI</p>
  </div>
  
  <div class="accordion__item">
    <h3 class="accordion__title js-title">Judul Konten</h3>
    <p class="accordion__copy js-copy">KONTEN_KAMU_DI SINI</p>
  </div>
  
  <div class="accordion__item">
    <h3 class="accordion__title js-title">Judul Konten</h3>
    <p class="accordion__copy js-copy">KONTEN_KAMU_DI SINI</p>
  </div>
</div>

Silahkan ganti teks yang saya beri tanda dengan isi konten kamu

2. Publikasikan

Comments

Popular posts from this blog

Cara Membuat Menu FAQ Accordion Di Blog