Halaman

    Social Items


Cara Membuat Accordion Menu Responsive Pada Postingan Blog - Hallo readers... kebetulan admin lagi senggang, jadi admin onbloging mau sharing tutorial blog nih.

Tutorial kali ini seputar mempercantik konten blog kamu, yaitu membuat Accordion atau Sub Menu. Biasanya Accordion ini dipasang untuk menu navigasi blog, tetapi di sini onbloging mau buat postingan yang menggunakan accordion.

Nah, contoh demo nya bisa kamu klik tombol demo di bawah ini yah


Fungsinya untuk apa sih ? naah ini penting, agar tidak sembarangan menggunakannya,,hhee.. Accordion di postingan berfungsi jika kamu membuat konten yang menggunakan sub banyak, misalnya level atau jenis yang banyak.

Accordion ini ga memberatkan blog kamu loh, karena ini hanya dibuat menggunakan CSS saja, tanpa Javascript. Jadi lebih ringan yah...

Jadi jika kamu tertarik untuk menggunakannya, langsung saja ikuti tutorial di bawah ini

Cara Membuat Accordion Menu Responsive Pada Postingan Blog


Sebelumnya kamu harus sudah memasang FontAwesome pada blog kamu, jika belum silahkan salin kode di bawah ini dan letakkan tepat sebelum </head>

https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

1. Login Blogger > Tema > Edit Tema > Salin kode di bawah ini dan letakkan di atas kode </style>

.accordion {
  max-width: 400px;
  margin: 0 auto;
}
.accordion input{
  display: none;
}
.accordion input + label {
  position: relative;
  display: block;
  cursor: pointer;
  font-weight: 700;
  font-size: 1em;
  padding: 10px 40px;
  color: #ddd;
  background: #363636;
  background: -webkit-linear-gradient(top, #363636 0%, #363636 50%, #454545 90%, #363636 100%);
}
.accordion label i {
  font-size: 0.9em;
  position: absolute;
  left: 15px;
  top: 14px;
}
.accordion label i.fa-chevron-down {
  right: 20px;
  left: auto;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease;
}
.accordion input:checked + label {
  background: #0B94BF;
  color: #fff;
}
.accordion input:checked + label i.fa-chevron-down{
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg);
}
.accordion input + label:hover {
  background: -webkit-linear-gradient(top, #009CCE 0%, #009CCE 50%, #00779D 90%, #009CCE 100%);
  color: #fff;
}
.accordion .item {
  transform: scaleY(0);
  transform-origin: top;
  max-height: 0px;
  overflow: hidden;
  position: relative;
  border: 1px solid #bbb;
  padding: 0 15px;
  font-weight: normal;
  font-size: 14px;
  background: #fff;
  color: #000;
  transition: all 0.3s ease-in-out;
}
#item1:checked ~ #content1,
#item2:checked ~ #content2,
#item3:checked ~ #content3,
#item4:checked ~ #content4 {
  max-height: 350px;
  transform: scaleY(1);
}
.accordion .item h4, .accordion .item p{
  margin: 0;
  padding: 0;
}
.accordion .item h4 {
  padding: 10px;
  border-bottom: 1px solid #bbb;
}
.accordion .item p {
  padding: 10px 0;
}

PENERAPANNYA


1. Silahkan buat postingan dan ketik di mode HTML yah bukan compose, dan salin kode di bawah ini

<div class = "accordion">
    <input type = "checkbox" id = "item1" name = "accordion1">
    <label for = "item1"><i class = "fa fa-check"></i>Content 1<i class = "fa fa-chevron-down"></i></label>
    <div id = "content1" class = "item">
      <h4>Title 1</h4>
      <p>KONTEN DI SINI
      </p>
    </div>
    <input type = "checkbox" id = "item2" name = "accordion1">
    <label for = "item2"><i class = "fa fa-check"></i>Content 2<i class = "fa fa-chevron-down"></i></label>
    <div id = "content2" class = "item">
      <h4>Title 2</h4>
      <p>KONTEN DI SINI
      </p>
    </div>
    <input type = "checkbox" id = "item3" name = "accordion1">
    <label for = "item3"><i class = "fa fa-check"></i>Content 3<i class = "fa fa-chevron-down"></i></label>
    <div id = "content3" class = "item">
      <h4>Title 3</h4>
      <p>KONTEN DI SINI
      </p>
    </div>
    <input type = "checkbox" id = "item4" name = "accordion1">
    <label for = "item4"><i class = "fa fa-check"></i>Content 4<i class = "fa fa-chevron-down"></i></label>
    <div id = "content4" class = "item">
      <h4>Title 4</h4>
      <p>KONTEN DI SINI
      </p>
    </div>
  </div>

Silahkan ganti teks sesuai dengan judul konten dan isi konten kamu

2. Publikasikan

Cara Membuat Accordion Menu Responsive Pada Postingan Blog


Cara Membuat Accordion Menu Responsive Pada Postingan Blog - Hallo readers... kebetulan admin lagi senggang, jadi admin onbloging mau sharing tutorial blog nih.

Tutorial kali ini seputar mempercantik konten blog kamu, yaitu membuat Accordion atau Sub Menu. Biasanya Accordion ini dipasang untuk menu navigasi blog, tetapi di sini onbloging mau buat postingan yang menggunakan accordion.

Nah, contoh demo nya bisa kamu klik tombol demo di bawah ini yah


Fungsinya untuk apa sih ? naah ini penting, agar tidak sembarangan menggunakannya,,hhee.. Accordion di postingan berfungsi jika kamu membuat konten yang menggunakan sub banyak, misalnya level atau jenis yang banyak.

Accordion ini ga memberatkan blog kamu loh, karena ini hanya dibuat menggunakan CSS saja, tanpa Javascript. Jadi lebih ringan yah...

Jadi jika kamu tertarik untuk menggunakannya, langsung saja ikuti tutorial di bawah ini

Cara Membuat Accordion Menu Responsive Pada Postingan Blog


Sebelumnya kamu harus sudah memasang FontAwesome pada blog kamu, jika belum silahkan salin kode di bawah ini dan letakkan tepat sebelum </head>

https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

1. Login Blogger > Tema > Edit Tema > Salin kode di bawah ini dan letakkan di atas kode </style>

.accordion {
  max-width: 400px;
  margin: 0 auto;
}
.accordion input{
  display: none;
}
.accordion input + label {
  position: relative;
  display: block;
  cursor: pointer;
  font-weight: 700;
  font-size: 1em;
  padding: 10px 40px;
  color: #ddd;
  background: #363636;
  background: -webkit-linear-gradient(top, #363636 0%, #363636 50%, #454545 90%, #363636 100%);
}
.accordion label i {
  font-size: 0.9em;
  position: absolute;
  left: 15px;
  top: 14px;
}
.accordion label i.fa-chevron-down {
  right: 20px;
  left: auto;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease;
}
.accordion input:checked + label {
  background: #0B94BF;
  color: #fff;
}
.accordion input:checked + label i.fa-chevron-down{
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg);
}
.accordion input + label:hover {
  background: -webkit-linear-gradient(top, #009CCE 0%, #009CCE 50%, #00779D 90%, #009CCE 100%);
  color: #fff;
}
.accordion .item {
  transform: scaleY(0);
  transform-origin: top;
  max-height: 0px;
  overflow: hidden;
  position: relative;
  border: 1px solid #bbb;
  padding: 0 15px;
  font-weight: normal;
  font-size: 14px;
  background: #fff;
  color: #000;
  transition: all 0.3s ease-in-out;
}
#item1:checked ~ #content1,
#item2:checked ~ #content2,
#item3:checked ~ #content3,
#item4:checked ~ #content4 {
  max-height: 350px;
  transform: scaleY(1);
}
.accordion .item h4, .accordion .item p{
  margin: 0;
  padding: 0;
}
.accordion .item h4 {
  padding: 10px;
  border-bottom: 1px solid #bbb;
}
.accordion .item p {
  padding: 10px 0;
}

PENERAPANNYA


1. Silahkan buat postingan dan ketik di mode HTML yah bukan compose, dan salin kode di bawah ini

<div class = "accordion">
    <input type = "checkbox" id = "item1" name = "accordion1">
    <label for = "item1"><i class = "fa fa-check"></i>Content 1<i class = "fa fa-chevron-down"></i></label>
    <div id = "content1" class = "item">
      <h4>Title 1</h4>
      <p>KONTEN DI SINI
      </p>
    </div>
    <input type = "checkbox" id = "item2" name = "accordion1">
    <label for = "item2"><i class = "fa fa-check"></i>Content 2<i class = "fa fa-chevron-down"></i></label>
    <div id = "content2" class = "item">
      <h4>Title 2</h4>
      <p>KONTEN DI SINI
      </p>
    </div>
    <input type = "checkbox" id = "item3" name = "accordion1">
    <label for = "item3"><i class = "fa fa-check"></i>Content 3<i class = "fa fa-chevron-down"></i></label>
    <div id = "content3" class = "item">
      <h4>Title 3</h4>
      <p>KONTEN DI SINI
      </p>
    </div>
    <input type = "checkbox" id = "item4" name = "accordion1">
    <label for = "item4"><i class = "fa fa-check"></i>Content 4<i class = "fa fa-chevron-down"></i></label>
    <div id = "content4" class = "item">
      <h4>Title 4</h4>
      <p>KONTEN DI SINI
      </p>
    </div>
  </div>

Silahkan ganti teks sesuai dengan judul konten dan isi konten kamu

2. Publikasikan

1 comment:

Silahkan komentar sesuai dengan topik yang di bahas sesuai artikel