Membuat Tab Horisontal Accordion Dengan CSS3 di Blog

Membuat Tab Horisontal Accordion Dengan CSS3 di Blog – sebuah fitur yang simple mudah didapatkan untuk membuat blog menjadi lebih variatif. Dengan menggunakan kode CSS tab horisontal accordion yang sederhana ini siap dipasang untuk digunakan kedalam blog bagi yang berminat.

Layout dengan menampilkan warna silver sebagai warna utama dan warna hitam sebagai warna hover. Saat hover pula akan menampilkan panel yang muncul secara otomatis tanpa harus di klik dan konten akan terlihat secara halus nampak dari sebelah kiri akan menjadi melebar kesebelah kanan. Untuk melihat seperti apa previewnya, silahkan bisa dilihat pada halaman demo dengan klik tombol yang ada dibawah. Apabila setelah melihat halaman demo mungkin timbul minat untuk memasangnya kedalam blog, maka berikut adalah tutorial untuk cara Membuat Tab Horisontal Accordion Dengan CSS3 di Blog:

1. Login ke akun blogger.
2. Copy kode dibawah ini, kemudian klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode di kolom CSS tersebut).

.horizontalaccordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
       height: 300px;
}

.horizontalaccordion>ul>li {
    display:block;
    overflow: hidden;
    float:left;
    margin: 0;
    padding: 0;
    list-style:none;
    width:40px;
    height: 300px;

    /* Decorative CSS */
    background:#f0f0f0;

    /* CSS3 Transitions */
    transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
}

.horizontalaccordion>ul>li>h3 {
    display:block;
    float:left;
    margin: 0;
    padding:10px;
    height:19px;
    width:280px;

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

    /* CSS3 Transform Rotate & Translate */
    white-space:nowrap;
    -moz-transform: rotate(90.0deg) translate(-40px,0px);  /* FF3.5+ */
    -moz-transform-origin: 0 100%;
    -o-transform: rotate(90.0deg) translate(-40px,0px);  /* Opera 10.5 */
    -o-transform-origin: 0 100%;
    -webkit-transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
    -webkit-transform-origin: 0 100%;
    transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
    transform-origin: 0 100%;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0);  /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"; /* IE8 */

    /* CSS3 Gradient Effect */
    background: -moz-linear-gradient( top, #999999, #cccccc);
    background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
}

.horizontalaccordion>ul>li>div {
    display:none;
    float:left;
    overflow: auto;
    position:relative;
    top:-40px;
    left:40px;
    *top:0px;       /* IE7 Hack */
    *left:0px;      /* IE7 Hack */
    margin:0;
    width:320px;
    height:280px;
    padding:10px;
}

.horizontalaccordion>ul>li:hover {
    overflow: hidden;
    width: 380px;
}

.horizontalaccordion: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 */
}

.horizontalaccordion:hover>ul>li:hover>div {
    display:block;
}

.horizontalaccordion>ul>li>h3:hover {
    cursor:pointer;
}

3. Klik Terapkan ke Blog.

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

<div class="horizontalaccordion">
<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.