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

Membuat Tab Horisontal Accordion Dengan CSS3 di Blog

Membuat Tab Horisontal Accordion Dengan CSS3 Part 1
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).
Membuat Tab Horisontal Accordion Dengan CSS3 Part 1
.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.

Berlangganan artikel via email

17 Response to "Membuat Tab Horisontal Accordion Dengan CSS3 di Blog"

keren banget mas tutorialnya. ijin praktek di blog dummy ku yah? heheheh

Balas

Mesti banyak nih...blog dumy nya ya mbak :)

Balas

kunjugan sala kenal wah bagus nice info saya save ya di miccrosoft ya............ kunjungi balik yahsalamkenal..

Balas

Pengen coba juga nih mas andes....cuma masih melajarin tampilan barunya edit html blogger... (masih binggung)...
Trims ya mas :)

Balas

saya juga sedang bermain css 3, cari ilmu disini juga xD

Balas

jadi makin kren ya sobat, kunjungan pagi sobat

Balas

Kelihatan kyak slider harmonika jd asik bang..mkasih tutor yg sempurna bang

Balas

keren banget bro,, tapi ini nggak cocok di blog aku, pengen make ini tapi apa daya tangan tak sampai. informasi yang bermanfaat.

Balas

wah keren nih mas, sayangnya gbsa praktekinnya. hehe

Balas

Keren, ijin untuk boomark dulu.

Balas

wah mantap kalau seperti ini sobat,
tutorialnya sangat berguna sekali nih, bisa membantu
terima kasih sudah berbagi

Balas

Pada umumnya tab / menu accordion dibuat vertikal, ini justru horizontal ya bro. Asyik slider tab nya, hanya saja arah tulisan title tab nya jadi miring-miring gitu ya. :D

Btw, jadi banyak postingan tutorial nih di blog mas Andes. Jadi betah mantengin nya. :)

Balas

ups..apik banget ya jadinya, bisa tambah keren nich tampilan blog dengan menu accordion ini :-)

Balas

salam kenal juga sobat, infonya memang nice dan hasilnya juga oke, bagus ..
saya juga numpang mampir disini sambil belajar sobat

Balas

tulisan warna biru diganti dengan kode html atau cukup judul saja? misalnya sy mau ganti heading 1 dengan guest book gimana caranya mas? maklum newbie

Balas

tulisan warna biru bisa diganti sama kode html mbak, kalo mau buat guest book maka kode guest book-nya dimasukin kesitu mbak, tulisan yang warna biru di replace.
untuk heading/tulisan warna merah bisa dikasih link mbak, tulisan warna merah diganti dengan <a href="URL TUJUAN" target="_blank">TEKS/JUDUL</a>

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 Horisontal Accordion Dengan CSS3 di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode