Membuat Animasi Tab View dengan CSS3

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Junior Iqfar Blog's | Membuat Animasi Tab View dengan CSS3 | Telah lama saya tidak menulis artikel tentang tips blogging, dan sekarang alhamdulillah bisa terlaksana walaupun ada sedikit rasa malas yang mengikuti.

Pada artikel ini saya menulis tentang Cara Membuat Animasi Tab View dengan CSS3 dan tampilannya sangat atraktif sekali karena menggunakan CSS3 dan tidak kalah seperti menggunakan jQuery. Bila sobat blogger ingin menggunakan widget tab view ini sobat bisa melihat demo dulu.

Membuat Animasi Tab View dengan CSS3Klik disini untuk melihat demo Membuat Animasi Tab View dengan CSS3

Memasang kode CSS dan Javascript di template blog

1. Masuk akun blogger sobat
2. Kemudian klik Rancangan, Edit HTML
3. Centang Expand Template Widget
4. Carilah kode di bawah ini dengan tombol CTRL + F

]]></b:skin>

5. Kemudian copy kode di bawah ini

tabs {
position: relative;
margin: 40px auto;
width: 750px;
}
.tabs input {
position: absolute;
z-index: 1000;
width: 120px;
height: 40px;
left: 0px;
top: 0px;
opacity: 0;
cursor: pointer;
}
.tabs input#tab-2{
left: 120px;
}
.tabs input#tab-3{
left: 240px;
}
.tabs input#tab-4{
left: 360px;
}
.tabs label {
background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
font-size: 15px;
line-height: 40px;
height: 40px;
position: relative;
padding: 0 20px;
float: left;
display: block;
width: 80px;
color: #385c5b;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
border-radius: 3px 3px 0 0;
box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}
.tabs input:hover + label {
background: #5ba4a4;
}
.tabs label:first-of-type {
z-index: 4;
box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}
.tab-label-2 {
z-index: 3;
}
.tab-label-3 {
z-index: 2;
}
.tab-label-4 {
z-index: 1;
}
.tabs input:checked + label {
background: #fff;
z-index: 6;
}
.content {
background: #fff;
position: relative;
width: 100%;
height: 370px;
z-index: 5;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;
}
.content div {
position: absolute;
top: 0;
left: 0;
padding: 10px 40px;
z-index: 1;
opacity: 0;
transition: all linear 0.1s;
}
.content div h2,
.content div h3{
color: #398080;
}
.content div p {
font-size: 14px;
line-height: 22px;
font-style: italic;
text-align: left;
margin: 0;
color: #777;
padding-left: 15px;
font-family: Cambria, Georgia, serif;
border-left: 8px solid rgba(63,148,148, 0.1);
}
.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
z-index: 100;
opacity: 1;
transition: all ease-out 0.2s 0.1s;
}

6. Dan letakkan di atas kode

]]></b:skin>

7. Kemudian cari lagi kode di bawah ini dengan tombol CTRL + F

</head>

8. Sobat copy kode di bawah ini

<script src='https://dl.dropbox.com/u/22738692/AnimasiTabViewDenganCSS3/script.js' type='text/javascript'/>

9. Dan paste atau letakkan sebelum

</head>

10. Simpan template sobat

Memasang kode HTML

1. Setelah memasang kode CSS di template sekarang sobat memasang kode HTML untuk ditampilkan
2. Klik Dasbor
3. Kemudian klik Rancangan, Elemen Lama
4. Klik tambah gadget
5. Pilih dan klik HTML/Javascript
6. Kemudian copy kode di bawah ini

<section class="tabs">
    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
    <label for="tab-1" class="tab-label-1">Tab View 1</label>
     
    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
    <label for="tab-2" class="tab-label-2">Tab View 2</label>
     
    <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
    <label for="tab-3" class="tab-label-3">Tab View 3</label>
     
    <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
    <label for="tab-4" class="tab-label-4">Tab View 4</label>
             
    <div class="clear-shadow"></div>
                 
    <div class="content">
        <div class="content-1">
     <h2>Tampilan H2</h2>
             <p>Some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content</p>
     <h3>Tampilan H3</h3>
             <p>Some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content</p>
        </div>
        <div class="content-2">
     <h2>Tampilan H2</h2>
             <p>Some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content</p>
     <h3>Tampilan H3</h3>
             <p>Some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content</p>
        </div>
        <div class="content-3">
     <h2>Tampilan H2</h2>
             <p>Some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content</p>
     <h3>Tampilan H3</h3>
             <p>Some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content</p>
        </div>
        <div class="content-4">
     <h2>Tampilan H2</h2>
             <p>Some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content</p>
     <h3>Tampilan H3</h3>
             <p>Some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content</p>
        </div>
    </div>
</section>

7. Letakkan / paste di kotak content
8. Simpan

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait