Membuat Tab Vertikal Accordion Dengan CSS3 di Blog

Membuat Tab Vertikal Accordion Dengan CSS3 di Blog – jika pada pembahasan yang sebelumnya sudah membahas tentang cara membuat tab horisontal accordion maka kurang lengkap rasanya apabila kita tidak membahas mengenai tab vertikal accordion menggunakan kode CSS.

Fitur dari tab vertikal accordion ini semuanya sama dengan yang ada pada tab horisontal accordion, hanya saja pada tab vertikal accordion ini berbentuk melebar kebawah saat hover. Tab vertikal accordion ini memiliki beragam fungsi, tergantung dari apa yang dikehendaki dan di inginkan tentunya yang sesuai dengan kebutuhan blog. Fitur yang sederhana dan ramping membuat tab vertikal accordion ini menjadi lebih terkesan minimalis namun apa daya jika setelah terpasang di blog malah menjadi tampilan dinamis. Untuk itu, maka berikut adalah tutorial langkah-langkah tentang cara Membuat Tab Vertikal Accordion Dengan CSS3 di Blog:

1. Login ke akun blogger.
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode CSS didalam kolom tersebut).

.verticalaccordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
       width: 500px;
}

.verticalaccordion>ul>li {
    display:block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style:none;
    height:40px;
    width: 500px;

    /* Decorative CSS */
    background-color:#f0f0f0;

    /* CSS3 Transition Effect */
    transition: height 0.3s ease-in-out;
    -moz-transition: height 0.3s ease-in-out;
    -webkit-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;

}

.verticalaccordion>ul>li>h3 {
    display:block;
    margin: 0;
    padding:10px;
    height:19px;

    /* Decorative CSS */
    border-top:#f0f0f0 1px solid;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration:none;
    text-transform:uppercase;
    color: #000;
    background: #cccccc;

    /* CSS3 Gradient Effect */
    background: -moz-linear-gradient( top, #999999, #cccccc);
    background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";   /* IE 8 */
}

.verticalaccordion>ul>li>div {
    margin:0;
    overflow: auto;
    padding:10px;
    height:220px;
}

.verticalaccordion>ul>li:hover {
    height: 280px;
}

.verticalaccordion:hover>ul>li:hover>h3 {
    /* Decorative CSS */
    color:#fff;
    background: #000000;

    /* CSS3 Gradient Effect */
    background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
    background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";   /* IE 8 */
}

.verticalaccordion>ul>li>h3:hover {
    cursor:pointer;

3. Klik Terapkan ke Blog.

Selanjutnya apabila akan menampilkan Tab Vertikal Accordion Dengan CSS3 ini kedalam postingan maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:

<div class="verticalaccordion">
<ul>
    <li>
        <h3>Heading 1</h3>
        <div> Kolom isi konten untuk Panel 1 </div>
    </li>
    <li>
        <h3>Heading 2</h3>
        <div> Kolom isi konten untuk Panel 2 </div>
    </li>
    <li>
        <h3>Heading 3</h3>
        <div> Kolom isi konten untuk Panel 3 </div>
    </li>
    <li>
        <h3>Heading 4</h3>
        <div> Kolom isi konten untuk Panel 4 </div>
    </li>
</ul>
</div>

Keterangan:

• Silahkan ubah tulisan yang berwarna merah dengan judul yang disukai.
• Silahkan ubah tulisan yang berwarna biru dengan konten sesuai keinginan.
• Apabila ingin ditampilkan sebagai widget maka langkahnya seperti biasa, klik Tata Letak > Tambah Widget > HTML/JavaScript kemudian paste kode yang ada diatas tersebut pada kolom yang tersedia.