Cara Membuat Multi Level Vertical Accodion Menu di Blogger

Cara Membuat Multi Level Vertical Accodion Menu di Blogger - Halo, sobat Infamous semua. Apa kabar? Kembali lagi Infamous Blog akan membagikan sedikit Tips Blogger untuk kalian semua. Pada kesempatan kali ini saya akan berbagi tentang Cara Membuat Multi Level Vertical Accodion Menu di Blogger, bagi kamu yang penasaran bisa disimak ulasannya dibawah ini.

Cara Membuat Multi Level Vertical Accodion Menu di Blogger ini sebenarnya sangatlah mudah, meski begitu widget menu vertical accordion ini memiliki tampilan yang sangat menarik. Kita bisa menggunakan widget seperti untuk keperluan link menu pada blog kita. Baiklah, tidak usah panjang lebar lagi, bagi kamu yang penasaran dengan tampilan widget menu vertical accordion ini bisa lihat di live preview.

Bagaimana, menarik bukan menu vertical accordion ini? Nah, bagi kamu yang ingin mencoba memasang widget menu vertical accordion ini, kamu bisa langsung mengikuti langkah-langkah sederhana dibawah ini. Selamat mencoba!

Cara Membuat Multi Level Vertical Accodion Menu di Blogger

Pertama, hal yang harus sobat lakukan untuk bisa menerapkan menu vertical accordion ini diblog kalian. Sobat harus menambahkan sedikir kode CSS dibagian template blog kalian, untuk lebih jelasnya bisa dilihat kode css-nya dibawah ini. Silahkan buka dashborad blog kalian > Template > Edit HTML > lalu cari kode ]]></b:skin> dan paste-kan kode CSS dibawah ini tepat diatas kode ]]></b:skin> tersebut.

.cd-accordion-menu {
  width: 90%;
  max-width: 600px;
  background: #4d5158;
  margin: 4em auto;
  box-shadow: 0 4px 40px #70ac76;
}
.cd-accordion-menu ul {
  /* by default hide all sub menus */
  display: none;
}
.cd-accordion-menu li {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cd-accordion-menu input[type=checkbox] {
  /* hide native checkbox */
  position: absolute;
  opacity: 0;
}
.cd-accordion-menu label, .cd-accordion-menu a {
  position: relative;
  display: block;
  padding: 18px 18px 18px 64px;
  background: #4d5158;
  box-shadow: inset 0 -1px #555960;
  color: #ffffff;
  font-size: 1.6rem;
}
.no-touch .cd-accordion-menu label:hover, .no-touch .cd-accordion-menu a:hover {
  background: #52565d;
}
.cd-accordion-menu label::before, .cd-accordion-menu label::after, .cd-accordion-menu a::after {
  /* icons */
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.cd-accordion-menu label {
  cursor: pointer;
}
.cd-accordion-menu label::before, .cd-accordion-menu label::after {
  background-image: url(http://mybloggerlab.com/Images/cd-icons.svg);
  background-repeat: no-repeat;
}
.cd-accordion-menu label::before {
  /* arrow icon */
  left: 18px;
  background-position: 0 0;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.cd-accordion-menu label::after {
  /* folder icons */
  left: 41px;
  background-position: -16px 0;
}
.cd-accordion-menu a::after {
  /* image icon */
  left: 36px;
  background: url(http://mybloggerlab.com/Images/cd-icons.svg) no-repeat -48px 0;
}
.cd-accordion-menu input[type=checkbox]:checked + label::before {
  /* rotate arrow */
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.cd-accordion-menu input[type=checkbox]:checked + label::after {
  /* show open folder icon if item is checked */
  background-position: -32px 0;
}
.cd-accordion-menu input[type=checkbox]:checked + label + ul,
.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
  /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
  /* show children when item is checked */
  display: block;
}
.cd-accordion-menu ul label,
.cd-accordion-menu ul a {
  background: #35383d;
  box-shadow: inset 0 -1px #41444a;
  padding-left: 82px;
}
.no-touch .cd-accordion-menu ul label:hover, .no-touch
.cd-accordion-menu ul a:hover {
  background: #3c3f45;
}
.cd-accordion-menu > li:last-of-type > label,
.cd-accordion-menu > li:last-of-type > a,
.cd-accordion-menu > li > ul > li:last-of-type label,
.cd-accordion-menu > li > ul > li:last-of-type a {
  box-shadow: none;
}
.cd-accordion-menu ul label::before {
  left: 36px;
}
.cd-accordion-menu ul label::after,
.cd-accordion-menu ul a::after {
  left: 59px;
}
.cd-accordion-menu ul ul label,
.cd-accordion-menu ul ul a {
  padding-left: 100px;
}
.cd-accordion-menu ul ul label::before {
  left: 54px;
}
.cd-accordion-menu ul ul label::after,
.cd-accordion-menu ul ul a::after {
  left: 77px;
}
.cd-accordion-menu ul ul ul label,
.cd-accordion-menu ul ul ul a {
  padding-left: 118px;
}
.cd-accordion-menu ul ul ul label::before {
  left: 72px;
}
.cd-accordion-menu ul ul ul label::after,
.cd-accordion-menu ul ul ul a::after {
  left: 95px;
}
.cd-accordion-menu.animated label::before {
  /* this class is used if you're using jquery to animate the accordion */
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}

Setelah kita menambahkan kode css di atas, jangan lupa untuk menyimpan tamplate blog kalian. Nah, langkah selanjutnya untuk dapat menampilkan menu vertical accordion di blog, kita harus menambahkan script HTML berikut ini dibagian widget html/javascript di blog kita. Silahkan buka Blogger > Layout > Add a Gadget > Add HTML/JavaScript > kemudian paste kode HTML dibawah ini kedalam konten box widget tersebut. Jangan lupa untuk menyimpan widget tersebut.

<ul class="cd-accordion-menu">
<li class="has-children">
<input type="checkbox" name ="group-1" id="group-1" checked>
<label for="group-1">Group 1</label>

 <ul>
 <li class="has-children">
 <input type="checkbox" name ="sub-group-1" id="sub-group-1">
<label for="sub-group-1">Sub Group 1</label>

<ul>
<li><a href="#0">Link Menu</a></li>
<li><a href="#0">Link Menu</a></li>
<li><a href="#0">Link Menu</a></li>
</ul>
</li>
<li><a href="#0">Link Menu</a></li>
<li><a href="#0">Link Menu</a></li>
</ul>
</li>

<li><a href="#0">Link Menu</a></li>
<li><a href="#0">Link Menu</a></li>
</ul> <!-- www.infamous.web.id -->

Selian dibagian sidebar blog, kalian juga bisa meletakkan script diatas sesuai keinginan kalian untuk dapat menampilkan widget menu vertical accordion. Namun hal yang perlu diperhatikan yaitu kesesuaian widget dan tata letak nantinya.

Bagaimana, cukup mudah bukan? Saya rasa itu saja yang bisa saya bagikan untuk kesempatan kali ini. Semoga artikel tentang Cara Membuat Multi Level Vertical Accodion Menu di Blogger ini bisa bermanfaat untuk kalian semua. Nah, bagi kamu yang memiliki masalah atau pertanyaan seputar artikel diatas, silahkan ajukan pertanyaan kalian dikotak komentar dibawah ini. Selamat mencoba!