Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Tab Vertikal Accordion Dengan CSS3 di Blog

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).
Membuat Tab Vertikal Accordion Dengan CSS3 di Blog
.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.

Berlangganan artikel via email

12 Response to "Membuat Tab Vertikal Accordion Dengan CSS3 di Blog"

Keren tutornya gan :)

Balas

Bisa langsung dipraktekkan nih mas.. kapan hari saya juga mencari script ini..

Balas

mantap mas accordionnya, layak dicoba, terimakasih banyak sudah berbagi

Balas

saya blm pernah jajal utak atik di tampilan edit html yang baru ...mesti tes lewat blog dumi dulu kali ya mas...buat belajr.. :)
-----
tuturnya ta simpen dulu ya mas...pengen juga nyoba ... nantinya... :)
trims mas andes...dah share kekita kita :)

Balas

Akhirnya ada yang versi horizontal nya nih! Semangat terus menambah tutorial-tutorial berikutnya ya mas. :)

Balas

makasih ya mas...mantep abis acordionnya

Balas

nambah css ya .. nambah load jg dong.

Balas

Terima kasih tutornya, ijin save...

Balas

kenapa ga pasang di blognya mas?

Balas

wah mantap tutornya gan ijin belajar,,

Balas

terimakasih infonya kawan sangat bermanfaat buat blogger pemulamacam sasa... :)

Balas

biar perpindahan tabnya manual gimana gan?

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Tab Vertikal Accordion Dengan CSS3 di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode