Tab Horisontal Accordion Dengan CSS3

DEMO

Tab Horisontal Accordion Dengan CSS3 di Blog – Dengan menggunakan kode CSS tab horisontal accordion yang sederhana ini siap dipasang di blog Sobat. 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. Berikut adalah tutorial untuk cara Tab Horisontal Accordion Dengan CSS3

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 {<br /> margin: 0;<br /> padding: 0;<br /> list-style:none;<br /> height: 300px;<br /> }<br /> <br /> .horizontalaccordion>ul>li {<br /> display:block;<br /> overflow: hidden;<br /> float:left;<br /> margin: 0;<br /> padding: 0;<br /> list-style:none;<br /> width:40px;<br /> height: 300px;<br /> <br /> /* Decorative CSS */<br /> background:#f0f0f0;<br /> <br /> /* CSS3 Transitions */<br /> transition: width 0.3s ease-in-out;<br /> -moz-transition: width 0.3s ease-in-out;<br /> -webkit-transition: width 0.3s ease-in-out;<br /> -o-transition: width 0.3s ease-in-out;<br /> }<br /> <br /> .horizontalaccordion>ul>li>h3 {<br /> display:block;<br /> float:left;<br /> margin: 0;<br /> padding:10px;<br /> height:19px;<br /> width:280px;<br /> <br /> /* Decorative CSS */<br /> border-left:#f0f0f0 1px solid;<br /> font-family: Arial, Helvetica, sans-serif;<br /> text-decoration:none;<br /> text-transform:uppercase;<br /> color: #000;<br /> background:#cccccc;<br /> <br /> /* CSS3 Transform Rotate & Translate */<br /> white-space:nowrap;<br /> -moz-transform: rotate(90.0deg) translate(-40px,0px); /* FF3.5+ */<br /> -moz-transform-origin: 0 100%;<br /> -o-transform: rotate(90.0deg) translate(-40px,0px); /* Opera 10.5 */<br /> -o-transform-origin: 0 100%;<br /> -webkit-transform: rotate(90.0deg) translate(-40px,0px); /* Saf3.1+, Chrome */<br /> -webkit-transform-origin: 0 100%;<br /> transform: rotate(90.0deg) translate(-40px,0px); /* Saf3.1+, Chrome */<br /> transform-origin: 0 100%;<br /> filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0); /* IE6,IE7 */<br /> -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"; /* IE8 */<br /> <br /> /* CSS3 Gradient Effect */<br /> background: -moz-linear-gradient( top, #999999, #cccccc);<br /> background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));<br /> }<br /> <br /> .horizontalaccordion>ul>li>div {<br /> display:none;<br /> float:left;<br /> overflow: auto;<br /> position:relative;<br /> top:-40px;<br /> left:40px;<br /> *top:0px; /* IE7 Hack */<br /> *left:0px; /* IE7 Hack */<br /> margin:0;<br /> width:320px;<br /> height:280px;<br /> padding:10px;<br /> }<br /> <br /> .horizontalaccordion>ul>li:hover {<br /> overflow: hidden;<br /> width: 380px;<br /> }<br /> <br /> .horizontalaccordion:hover>ul>li:hover>h3 {<br /> /* Decorative CSS */<br /> color:#fff;<br /> background:#000000;<br /> <br /> /* CSS3 Gradient Effect */<br /> background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */<br /> background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */<br /> }<br /> <br /> .horizontalaccordion:hover>ul>li:hover>div {<br /> display:block;<br /> }<br /> <br /> .horizontalaccordion>ul>li>h3:hover {<br /> cursor:pointer;<br /> }

3. Klik Terapkan ke Blog.
Selanjutnya bila akan menampilkan Tab Horisontal Accordion Dengan CSS3 ini kedalam postingan maka langkahnya menggunakan mode HTML kemudian masukan kode dibawah ini:

<div class="horizontalaccordion">
<ul>
    <li>
        <h3>Anak Bengkel 1</h3>
        <div>Kolom isi Anak Bengkel untuk Panel 1</div>
    </li>
    <li>
        <h3>Anak Bengkel 2</h3>
        <div>Kolom isi Anak Bengkel untuk Panel 4</div>
    </li>
    <li>
       <h3>Anak Bengkel 3</h3>
        <div>Kolom isi Anak Bengkel untuk Panel 4</div>
    </li>
    <li>
        <h3>Anak Bengkel 4</h3>
        <div>Kolom isi Anak Bengkel untuk Panel 4</div>
    </li>
</ul>
</div>

Keterangan:

• Silahkan ubah tulisan yang berwarna KUNING dengan judul
• Silahkan ubah tulisan yang berwarna HIJAU dengan konten sesuai keinginan Sobat.
• 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.

---

Share

Like

G+

Tweet

Tweet

---

Artikel Terkait

---

Silahkan Memberikan Komentar Jika Ada Hal Yang Kurang Dipahami Dengan Topik Yang Telah Sobat Baca. Biasakan Berkomentar Dengan:

۞ Sopan dan Bahasa Yang Mudah Dipahami.
۞ Tidak Memasukkan Link Aktif Dalam Form Komentar.
۞ Berkomentar Sesuai Artikel Atau Postingan.
۞ Berilah Informasi, Jika Script Atau Link Yang Tidak Berfungsi Dan Mati.
۞ komentar Jorok / Kasar / SARA / PORNO Anggap Sebagai SPAM.