Cara Membuat Menu Accordion Di Postingan Blog Responsive

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.


dan untuk contoh yang saya gunakan untuk postingan adalah


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

DomaiNesia

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

Related Posts

Load comments

Comments