Cara Membuat Menu FAQ Accordion Di Blog



Cara Membuat Menu FAQ Accordion Di Blog - Pada kesempatan ini, saya akan membagikan tutorial membuat F.A.Q di blog dengan tampilan yang cantik dan keren, yaitu menggunakan fitur accordion.

Accordion ini tidak menggunakan javascript, hanya CSS saja sehingga tidak memberatkan blog kamu yah. Apa sih F.A.Q itu ? untuk apa F.A.Q ? semua jawaban ini silahkan cek google yah, karna saya hanya membagikan cara mempercantiknya saja.

DEMO

Cara Membuat Menu FAQ Accordion Di Blog


1. Log in blogger > Tema > Edit Tema > Salin kode di bawah ini tepat di atas kode </style>


.content {
  width: 80%;
  padding: 0;
  margin: 0 auto;
}

.centerplease {
  margin: 0 auto;
  max-width: 270px;
  font-size: 40px;
}

/*Question*/
.question {
  position: relative;
  background: #f9f9f9;
  margin: 0;
  padding: 10px 10px 10px 50px;
  display: block;
  width:100%;
  cursor: pointer;
}
/*Answer*/
.answers {
  padding: 0px 15px;
  margin: 5px 0;
  width:100%!important;
  height: 0;
  overflow: hidden;
  z-index: -1;
  position: relative;
  opacity: 0;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;
}

.questions:checked ~ .answers{
  height: auto;
  opacity: 1;
  padding: 15px;
  
}

/*FAQ Toggle*/
.plus {
  position: absolute;
  margin-left: 10px;
  z-index: 5;
  font-size: 2em;
  line-height: 100%;
  -webkit-user-select: none;    
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;

}

.questions:checked ~ .plus {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);

}

.questions {
  display: none;
  
}

PENERAPANNYA


1. Silahkan buat postingan atau buat halaman baru

2. Salin kode di bawah ini dan pindahkan ke kolom HTML bukan mode compose

<div>
  <input type="checkbox" id="question1" name="q"  class="questions">
  <div class="plus">+</div>
  <label for="question1" class="question">
    This is the question that will be asked?
  </label>
  <div class="answers">
This is the answer of the question.. keep it short.</div>
</div>

<div>
  <input type="checkbox" id="question2" name="q" class="questions">
  <div class="plus">+</div>
  <label for="question2" class="question">
    Short?
  </label>
  <div class="answers">
    short!
  </div>
</div>
  
<div>
  <input type="checkbox" id="question3" name="q" class="questions">
  <div class="plus">+</div>
  <label for="question3" class="question">
    Keep answers short. But in case of...If the question is long, the text wraps.  
  </label>
  <div class="answers">
    This is the answer!
  </div>
</div>

3. Selanjutnya edit dahulu teks yang ingin kamu masukan

4. Publikasikan

Comments

Popular posts from this blog

Cara Membuat Menu Accordion Di Postingan Blog Responsive