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

4 Style Animasi Menu Tab View CSS3 Pada Blog

4 Style Animasi Menu Tab View CSS3 Pada Blog
4 Style Animasi Menu Tab View CSS3 Pada Blog – menu tab view pada pembahasan kali ini terdiri dari 4 style effect yang berbeda. Lebih dulu kita akan mengenal tab view, lalu apa itu tab view? Menu tab view adalah suatu navigasi menu pada blog yang terdiri dari beberapa tab heading untuk untuk mengelompokkan dan kemudian menampilkan label yang didalamnya tanpa harus berpindah window dan tanpa proses loading karena pada tab konten akan secara langsung menampilkan secara otomatis dan dengan interface yang simple dan efisien. Jadi pada dasarnya jika pada tab heading tersebut saat diklik oleh tombol mouse maka tidak perlu harus menunggu waktu lama untuk melihat isi konten namun secara otomatis konten akan langsung muncul dengan sendirinya. Menu tab view bisa digunakan untuk beberapa fungsi dan didalamnya tidak harus berupa teks, melainkan dengan isi gambar juga bisa. Banyak dari para blogger menggunakan menu tab view untuk mengelompokkan sebuah link halaman dengan struktur konten yang panjang dan untuk menyingkat halamannya mereka menggunakan menu tab view. Lalu bagaimana untuk memasang menu tab view kedalam blog? Berikut adalah tutorial cara membuat dan memasang kedalam blog yang bisa anda pilih salah satu dari 4 Style Animasi Menu Tab View CSS3 Pada Blog.

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).
Menu Tab View CSS3 Pada Blog
.menutabviews1 {position: relative;}
.menutabviews1 input {position: absolute;z-index: 1000;width: 120px;height: 40px;left: 0px;top: 0px;opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);cursor: pointer;}
.menutabviews1 input#tab-2{left: 120px;}
.menutabviews1 input#tab-3{left: 240px;}
.menutabviews1 input#tab-4{left: 360px;}
.menutabviews1 label {background: #000;background: -moz-linear-gradient(top, #000 0%, #52e052 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#52e052));
background: -webkit-linear-gradient(top, #000 0%,#52e052 100%);background: -o-linear-gradient(top, #000 0%,#52e052 100%);
background: -ms-linear-gradient(top, #000 0%,#52e052 100%);background: linear-gradient(top, #000 0%,#52e052 100%);
font-size: 15px;line-height: 40px;height: 40px;position: relative;padding: 0 20px;float: left;display: block;width: 80px;
color: #fff;letter-spacing: 1px;text-transform: uppercase;font-weight: bold;text-align: center;text-shadow: 1px 1px 1px #fff;
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);}
.menutabviews1 label:after {papercontent1: '';background: #52e052;position: absolute;bottom: -2px;left: 0;width: 100%;height: 2px;display: block;}
.menutabviews1 input:hover + label {background: #000;}
.menutabviews1 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;}
.menutabviews1 input:checked + label {background: #52e052;z-index: 6;}
.clear-shadow {clear: both;}
.papercontent1 {background: #E9FBE9;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;}
.papercontent1 div {position: absolute;top: 0;left: 0;padding: 10px 40px;z-index: 1;opacity: 0;-webkit-transition: opacity linear 0.1s;
-moz-transition: opacity linear 0.1s;-o-transition: opacity linear 0.1s;-ms-transition: opacity linear 0.1s;transition: opacity linear 0.1s;}
.menutabviews1 input.tab-selector-1:checked ~ .papercontent1 .papercontent1-1,
.menutabviews1 input.tab-selector-2:checked ~ .papercontent1 .papercontent1-2,
.menutabviews1 input.tab-selector-3:checked ~ .papercontent1 .papercontent1-3,
.menutabviews1 input.tab-selector-4:checked ~ .papercontent1 .papercontent1-4 {
z-index: 100;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;
-webkit-transition: opacity ease-out 0.2s 0.1s;-moz-transition: opacity ease-out 0.2s 0.1s;-o-transition: opacity ease-out 0.2s 0.1s;
-ms-transition: opacity ease-out 0.2s 0.1s;transition: opacity ease-out 0.2s 0.1s;}
.papercontent1 div h2,
.papercontent1 div h3{color: #000;}
.papercontent1 div p {font-size: 14px;line-height: 22px;font-style: italic;text-align: left;margin: 0;color: #000;
padding-left: 15px;font-family: Cambria, Georgia, serif;border-left: 8px solid #52e052;}
3. Klik Terapkan ke Blog.

Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.

4. Selanjutnya untuk menampilkan Animasi Menu Tab View CSS3 Pada Blog caranya copy kode HTML dibawah ini, kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode berikut ini didalamnya, atau bisa juga dikolom posting dengan menggunakan mode HTML.
<section class="menutabviews1">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1"> JUDUL 1 </label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2"> JUDUL 2 </label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3"> JUDUL 3 </label>
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
<label for="tab-4" class="tab-label-4"> JUDUL 4 </label>
<div class="clear-shadow"></div>

<div class="papercontent1">
<div class="papercontent1-1">
<h2>JUDUL 1</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent1-2">
<h2>JUDUL 2</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent1-3">
<h2>JUDUL 3</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent1-4">
<h2>JUDUL 4</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
</div>
</section>
Keterangan:
Ganti tulisan warna merah dan biru berdasarkan keterangan yang ada.

Langkah terakhir klik Simpan, maka selesai dan silahkan lihat hasilnya dari cara membuat Animasi Menu Tab View CSS3 Pada Blog.

Tutorial di atas adalah untuk efek Animasi Menu Tab View STYLE 1, untuk membuat Animasi Menu Tab View STYLE 2-4 seperti pada halaman demo maka silahkan copy kode dibawah ini dan cara pemasangannya seperti langkah diatas.

KODE Menu Tab View STYLE 2
CSS
.menutabviews2 {position: relative;}
.menutabviews2 input {position: absolute;z-index: 1000;width: 120px;height: 40px;left: 0px;top: 0px;opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);cursor: pointer;}
.menutabviews2 input#tab-2{left: 120px;}
.menutabviews2 input#tab-3{left: 240px;}
.menutabviews2 input#tab-4{left: 360px;}
.menutabviews2 label {background: #000;background: -moz-linear-gradient(top, #000 0%, #52e052 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#52e052));
background: -webkit-linear-gradient(top, #000 0%,#52e052 100%);
background: -o-linear-gradient(top, #000 0%,#52e052 100%);
background: -ms-linear-gradient(top, #000 0%,#52e052 100%);
background: linear-gradient(top, #000 0%,#52e052 100%);
font-size: 15px;line-height: 40px;height: 40px;position: relative;padding: 0 20px;float: left;display: block;width: 80px;
color: #fff;letter-spacing: 1px;text-transform: uppercase;font-weight: bold;text-align: center;text-shadow: 1px 1px 1px #fff;
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);}
.menutabviews2 label:after {papercontent2: '';background: #52e052;position: absolute;bottom: -2px;left: 0;width: 100%;
height: 2px;display: block;}
.menutabviews2 input:hover + label {background: #000;}
.menutabviews2 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;}
.menutabviews2 input:checked + label {background: #52e052;z-index: 6;-webkit-animation: page 0.2s linear;-moz-animation: page 0.2s linear;
-ms-animation: page 0.2s linear;-o-animation: page 0.2s linear;animation: page 0.2s linear;}
.clear-shadow {clear: both;}
.papercontent2 {background: #E9FBE9;position: relative;width: 100%;height: 370px;z-index: 5;overflow: hidden;
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;}
.papercontent2 div {position: absolute;top: 0;padding: 10px 40px;z-index: 1;opacity: 0;-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;-o-transition: all linear 0.3s;-ms-transition: all linear 0.3s;transition: all linear 0.3s;}
.papercontent2-1, .papercontent2-3 {-webkit-transform: translateX(-250px);-moz-transform: translateX(-250px);-o-transform: translateX(-250px);
-ms-transform: translateX(-250px);transform: translateX(-250px);}
.papercontent2-2, .papercontent2-4 {-webkit-transform: translateX(250px);-moz-transform: translateX(250px);-o-transform: translateX(250px);
-ms-transform: translateX(250px);transform: translateX(250px);}
.menutabviews2 input.tab-selector-1:checked ~ .papercontent2 .papercontent2-1,
.menutabviews2 input.tab-selector-2:checked ~ .papercontent2 .papercontent2-2,
.menutabviews2 input.tab-selector-3:checked ~ .papercontent2 .papercontent2-3,
.menutabviews2 input.tab-selector-4:checked ~ .papercontent2 .papercontent2-4 {
-webkit-transform: translateX(0px);-moz-transform: translateX(0px);-o-transform: translateX(0px);-ms-transform: translateX(0px);
transform: translateX(0px);z-index: 100;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);
opacity: 1;-webkit-transition: all ease-out 0.2s 0.1s;-moz-transition: all ease-out 0.2s 0.1s;-o-transition: all ease-out 0.2s 0.1s;
-ms-transition: all ease-out 0.2s 0.1s;transition: all ease-out 0.2s 0.1s;}
.papercontent2 div h2,
.papercontent2 div h3{color: #000;}
.papercontent2 div p {font-size: 14px;line-height: 22px;font-style: italic;text-align: left;margin: 0;color: #000;padding-left: 15px;
font-family: Cambria, Georgia, serif;border-left: 8px solid #52e052;}
@keyframes "page" {0% {left: 0;}50% {left: 10px;}100% {left: 0;}}
@-moz-keyframes page {0% {left: 0;}50% {left: 10px;}100% {left: 0;}}
@-webkit-keyframes "page" {0% {left: 0;}50% {left: 10px;}100% {left: 0;}}
@-ms-keyframes "page" {0% {left: 0;}50% {left: 10px;}100% {left: 0;}}
@-o-keyframes "page" {0% {left: 0;}50% {left: 10px;}100% {left: 0;}}
HTML
<section class="menutabviews2">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1"> JUDUL 1 </label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2"> JUDUL 2 </label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3"> JUDUL 3 </label>
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
<label for="tab-4" class="tab-label-4"> JUDUL 4 </label>
<div class="clear-shadow"></div>

<div class="papercontent2">
<div class="papercontent2-1">
<h2>JUDUL 1</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent2-2">
<h2>JUDUL 2</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent2-3">
<h2>JUDUL 3</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent2-4">
<h2>JUDUL 4</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
</div>
</section>

KODE Menu Tab View STYLE 3
CSS
.menutabviews3 {position: relative;}
.menutabviews3 input {position: absolute;z-index: 1000;width: 120px;height: 40px;left: 0px;top: 0px;opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);cursor: pointer;}
.menutabviews3 input#tab-2{left: 120px;}
.menutabviews3 input#tab-3{left: 240px;}
.menutabviews3 input#tab-4{left: 360px;}
.menutabviews3 label {background: #000;
background: -moz-linear-gradient(top, #000 0%, #52e052 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#52e052));
background: -webkit-linear-gradient(top, #000 0%,#52e052 100%);
background: -o-linear-gradient(top, #000 0%,#52e052 100%);
background: -ms-linear-gradient(top, #000 0%,#52e052 100%);
background: linear-gradient(top, #000 0%,#52e052 100%);
font-size: 15px;line-height: 40px;height: 40px;position: relative;padding: 0 20px;float: left;display: block;
width: 80px;color: #fff;top: 0px;letter-spacing: 1px;text-transform: uppercase;font-weight: bold;text-align: center;
text-shadow: 1px 1px 1px #fff;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);}
.menutabviews3 label:after {papercontent3: '';background: #52e052;position: absolute;bottom: -8px;left: 0;width: 100%;height: 8px;display: block;}
.menutabviews3 input:hover + label {background: #000;top: -8px;-webkit-transition: top linear 0.2s;-moz-transition: top linear 0.2s;-o-transition: top linear 0.2s;
-ms-transition: top linear 0.2s;transition: top linear 0.2s;}
.menutabviews3 input:hover + label:after{background: #52e052;}
.menutabviews3 input:hover + label ~ .clear-shadow {top: -8px;-webkit-transition: top linear 0.2s;-moz-transition: top linear 0.2s;-o-transition: top linear 0.2s;
-ms-transition: top linear 0.2s;transition: top linear 0.2s;}
.menutabviews3 input:checked:hover + label {top: 0;}
.menutabviews3 input:checked:hover + label:after{background: #52e052;}
.menutabviews3 input:checked:hover + label ~ .clear-shadow {top: 0;background: #52e052;-webkit-transition: none;-moz-transition: none;-o-transition: none;-ms-transition: none;
transition: none;}
.menutabviews3 input.tab-selector-1:hover + label.tab-label-1 ~ .clear-shadow{z-index: 3;}
.menutabviews3 input.tab-selector-2:hover + label.tab-label-2 ~ .clear-shadow {z-index: 2;}
.menutabviews3 input.tab-selector-3:hover + label.tab-label-3 ~ .clear-shadow {z-index: 1;}
.menutabviews3 input.tab-selector-4:hover + label.tab-label-4 ~ .clear-shadow {z-index: 0;}
.menutabviews3 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;}
.menutabviews3 input:checked + label {background: #52e052;z-index: 6;-webkit-transition: top linear 0.2s;-moz-transition: top linear 0.2s;
-o-transition: top linear 0.2s;-ms-transition: top linear 0.2s;transition: top linear 0.2s;}
.clear-shadow {background: #52e052;position: relative;top: 0;height: 10px;margin-bottom: -10px;clear: both;z-index: -2;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2);border-radius: 3px;}
.papercontent3 {background: #e9fbe9;position: relative;width: 100%;height: 370px;z-index: 5;overflow: hidden;
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;}
.papercontent3 div {position: absolute;top: 0;left: 0;bottom: 100%;padding: 10px 40px;overflow: hidden;z-index: 1;opacity: 0;
-webkit-transition: all linear 0.1s;-moz-transition: all linear 0.1s;-o-transition: all linear 0.1s;-ms-transition: all linear 0.1s;transition: all linear 0.1s;}
.menutabviews3 input.tab-selector-1:checked ~ .papercontent3 .papercontent3-1,
.menutabviews3 input.tab-selector-2:checked ~ .papercontent3 .papercontent3-2,
.menutabviews3 input.tab-selector-3:checked ~ .papercontent3 .papercontent3-3,
.menutabviews3 input.tab-selector-4:checked ~ .papercontent3 .papercontent3-4 {
bottom: 0px;z-index: 100;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;
-webkit-transition: all ease-out 0.2s 0.2s;-moz-transition: all ease-out 0.2s 0.2s;-o-transition: all ease-out 0.2s 0.2s;
-ms-transition: all ease-out 0.2s 0.2s;transition: all ease-out 0.2s 0.2s;}
.papercontent3 div h2,
.papercontent3 div h3{color: #000;}
.papercontent3 div p {font-size: 14px;line-height: 22px;font-style: italic;text-align: left;margin: 0;color: #000;padding-left: 15px;
font-family: Cambria, Georgia, serif;border-left: 8px solid #52e052;}
HTML
<section class="menutabviews3">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1"> JUDUL 1 </label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2"> JUDUL 2 </label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3"> JUDUL 3 </label>
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
<label for="tab-4" class="tab-label-4"> JUDUL 4 </label>
<div class="clear-shadow"></div>

<div class="papercontent3">
<div class="papercontent3-1">
<h2>JUDUL 1</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent3-2">
<h2>JUDUL 2</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent3-3">
<h2>JUDUL 3</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent3-4">
<h2>JUDUL 4</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
</div>
</section>

KODE Menu Tab View STYLE 4
CSS
.menutabviews4 {position: relative;}
.menutabviews4 input {position: absolute;z-index: 1000;width: 120px;height: 40px;left: 0px;top: 0px;opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);cursor: pointer;}
.menutabviews4 input#tab-2{top: 40px;}
.menutabviews4 input#tab-3{top: 80px;}
.menutabviews4 input#tab-4{top: 120px;}
.menutabviews4 label {background: #000;
background: -moz-linear-gradient(top, #000 0%, #52e052 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#52e052));
background: -webkit-linear-gradient(top, #000 0%,#52e052 100%);
background: -o-linear-gradient(top, #000 0%,#52e052 100%);
background: -ms-linear-gradient(top, #000 0%,#52e052 100%);
background: linear-gradient(top, #000 0%,#52e052 100%);
font-size: 15px;line-height: 40px;height: 40px;position: relative;padding: 0 20px;display: block;width: 80px;
color: #fff;letter-spacing: 1px;text-transform: uppercase;font-weight: bold;text-align: right;float: left;clear: both;
text-shadow: 1px 1px 1px #fff; border-radius: 3px 0 0 3px; box-shadow: 0px 2px 2px rgba(0,0,0,0.1);}
.menutabviews4 label:after {papercontent4: '';background: #52e052;position: absolute;right: -2px;top: 0;width: 2px;height: 100%;}
.menutabviews4 input:hover + label {background: #000;}
.menutabviews4 label:first-of-type {z-index: 4;}
.tab-label-2 {z-index: 3;}
.tab-label-3 {z-index: 2;}
.tab-label-4 {z-index: 1;}
.menutabviews4 input:checked + label {background: #52e052; z-index: 6;}
.clear-shadow {clear: both;}
.papercontent4 {background: #e9fbe9;position: relative;width: auto;margin: -175px 0 0 120px;height: 400px;z-index: 5;
overflow: hidden;box-shadow: 1px 1px 2px rgba(0,0,0,0.1);border-radius: 3px;}
.papercontent4 div {position: absolute;top: 0;padding: 10px 40px;z-index: 1;opacity: 0;
-webkit-transition: all linear 0.5s;-moz-transition: all linear 0.5s;-o-transition: all linear 0.5s;
-ms-transition: all linear 0.5s;transition: all linear 0.5s;}
.papercontent4 div{-webkit-transform: translateY(-450px);-moz-transform: translateY(-450px);
-o-transform: translateY(-450px);-ms-transform: translateY(-450px);transform: translateY(-450px);}
.menutabviews4 input.tab-selector-1:checked ~ .papercontent4 .papercontent4-1,
.menutabviews4 input.tab-selector-2:checked ~ .papercontent4 .papercontent4-2,
.menutabviews4 input.tab-selector-3:checked ~ .papercontent4 .papercontent4-3,
.menutabviews4 input.tab-selector-4:checked ~ .papercontent4 .papercontent4-4 {
-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);
-ms-transform: translateY(0px);transform: translateY(0px);z-index: 100;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);opacity: 1;-webkit-transition: all ease-out 0.3s 0.3s;
-moz-transition: all ease-out 0.3s 0.3s;-o-transition: all ease-out 0.3s 0.3s;
-ms-transition: all ease-out 0.3s 0.3s;transition: all ease-out 0.3s 0.3s;}
.papercontent4 div h2,
.papercontent4 div h3{color: #000;}
.papercontent4 div p {font-size: 14px;line-height: 22px;font-style: italic;text-align: left;margin: 0;color: #000;
padding-left: 15px;font-family: Cambria, Georgia, serif;border-left: 8px solid #52e052;}
HTML
<section class="menutabviews4">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1"> JUDUL 1 </label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2"> JUDUL 2 </label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3"> JUDUL 3 </label>
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
<label for="tab-4" class="tab-label-4"> JUDUL 4 </label>
<div class="clear-shadow"></div>

<div class="papercontent4">
<div class="papercontent4-1">
<h2>JUDUL 1</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent4-2">
<h2>JUDUL 2</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent4-3">
<h2>JUDUL 3</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent4-4">
<h2>JUDUL 4</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
</div>
</section>

Berlangganan artikel via email

51 Response to "4 Style Animasi Menu Tab View CSS3 Pada Blog"

selamat pagi Sob,,,waah mantab nich untuk di praktekkan nanti...ini tidak berat kan Sob ??? mau promo dikit yaa Sob,,,,saya ada website baru, kalau berkenan bisa cek ke TKP di bisnispulsaku.com...

Balas

sepertinya ini memang mantap juga sobat, saya ijin save dulu sobat.
Tutorial penting yg sangat berguna sekali sobat
terima kasih sudah berbagi

Balas

ganti tampilan neh kayaknya .. keren sob
and tutornya juga mantap abizzz

Balas

Tampilan template baru nih gan? makin keren aja blog nya hehe

Balas

main di css mulu.. puyeng saya.. lebih suka yang praktis tinggal masukin widget .. praktis kan?? hahaha .

Balas

lebih tepatnya ganti kulit..

Balas

ahaha blognya tak pakein masker..

Balas

poko'e mas andes yahud dah :D

Balas
avatar
Anonymous

gmna she cara pemasangan'a.???

qok gk bza.????

Balas

Saya masih pake yg simpel aja om :D

Balas

Contoh penerapannya seperti di blognya mas Andes di sidebar menu feed-cbox ya... keren mas, makasih tutorialnya :)

Balas

Bisa ga, style 4 diterapkan dalam postingan?

Balas

bisa mas kan itu emang buat postingan. copy kode css style 4 lalu pasang seperti langkah diatas. lalu copy kode html kemudian taruh di postingan (mode HTML)

Balas

saya mau koment template nih...keren banget. lebih hidup :D

Balas

Kode CSS nya memang ok, ijin untuk kopas kodenya.

Balas

CSS,, :'(
bikin nangis ni bang,,
pusing sangat ngertiinnya :(

tapi kan ane usaha buat ngerti yea bang :)
yang pnting smangat hehe

Balas

trims banget gan telah sudi mampir ke blog jadul saya....
blogwlkng dan tukar link yuk...

Balas

wihh, keren gan, saya lihat dari demo nya ijin bookmark gan, biar bisa nyoba ntar...

Balas

Ayey . . Coba memahami dulu deh mas .
Btw it otak atik yg bgtuan ga puyeng apa ?
Aku aja liat yg udh jadi lier .
Wkwkkw

Balas

Bahasa di tempat saya "Blungsungi". ckckck

Balas

saya salut dgn blog ini, penyajian gambarnya berbentuk Gif. Pastinya memerlukan waktu dan konsentrasi penuh. Ancung jempol atas ketelian dan kreatifitasnya.

Balas

kunjungan sambil ngopi sobat

Balas

Wow mantap kang... thanks infonya.. ijin colek postingannya yaa.. thanks..

Balas

saya juga kagum ...tau hehe :)

Balas

ada benernya juga sih
tapi kalo pengen yg praktis mulu...nti ndak pinter2 juga dong... hehe :)

Balas

mesti pke bertapa ya mas..buat tutornya
Abisan ide nya cemerlang banget sih...hehe :)

Balas

ya kalo mau langsung masukin widget bisa juga mas2 mbak2. tinggal kasih tag <style> pada awal kode CSS dan di akhiri tag </style> pada akhir kode CSS. lalu taruh kode HTML dibawahnya. selanjutnya langsung masukin widget juga boleh, postingan juga boleh

Balas

sambil senyum aja mengingatmu mas, abisnya mas budi cakep banget sih :D
hohoho (but I am not gay)

Balas

yang di kunjungi juga masih ngopi mas, abisnya mantap sih ujan2.
hohoho

Balas

iya mang silahkan, semoga bermanfaat

Balas

all@ terimakasih atas kunjungan, partisipasi dan supportnya.
keep smile and happy blogging :)

Balas

Indahnya melihat harmonisasi CSS & html seperti kode2 style animasi menu tab di atas ya mas. :D | Btw, template baru nya mayan mas.. :D

Balas

aku suka deg degan kalo ngebahas kayak ginian, apalagi kalo di praktekin... Wow!

Balas

Waw.. Mau ane coba ah.. Keren..

Balas

ganti template ya mas? mantap nih yg sekarang :D
sedikit demi sedikit saya jadi paham bagaimana css dan html ini. pengen banget belajar :d

Balas

mantab nih mas, templatenya keren sob..
comment back ya..

Balas
avatar
Anonymous

Tutorial yg diberikan oleh mas rizky sangat cocok buat saya yang sering dengan gonta-ganti tampilan template, jadi lebih tahu fungsi dari css dalam html.

Balas
avatar
Anonymous

Lha.. lha.. lha.. ada apa ini... hihihi.. :)

Balas

widihhh keren mas,,,

maap ane baru berkunjung lagi tampilan blog ini makin mantap aja mas, gaya UI ya.....???

Balas

apa bedanya masukin css lewat edit html sama lewat tulisan sesuaikan itu..
awalnya kalo mau nambahin css lewat yg praktis gitu tp dikira beda, emang sama ya.. bedanya apaan.

Balas

ngahahaha....

berarti kalian jodoh #ehh.

Balas

habis bikin template kok updatenya macet mas broh.

Balas

sama aja, bedanya cuma yang di klik tulisannya :)
itu kalo lewat sesuaikan ntar kodenya udah otomatis masuk di atas kode ]]></b:skin>
bedanya ya cara simple apa cara ribet :D
hohoho

Balas

aku jadi gak bisa tidur nih, keinget teruss..
hohoho abis di kagumi mas budi sih.

#but I am not gay

Balas

bukan mas.. ini masih pake gaya gangnam style kok.. :D
hohoho

Balas

masih benerin rambut non, rontok nih..
hohoho
udah tenang aja.. tutorial udah tak siapin buat posting tiap hari, ntar 2 minggu gak bakal habis dah.
tinggal masukin ke posting aja nih, seperti biasa updatenya jam 12 malem. postingnya udah terjadwal mbak broh.
hohoho_ slow but sure

Balas

hahaha..masih terkesan ribet mas. Sampean kan jago pemrograman kayak gitu, sekali2 bikin template dong mas. :)

Balas

wuih..mantap. klo bahan udah ada Tinggal ngetik aja ya mas? Apa sudah ada di draft? Tinggal publish dong....saya g bisa seperti itu, bikin artikelnya susah.

Balas

thanks buat tipsnya Gan :) sangat bermamfaat buat saya yg newbie :)

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 "4 Style Animasi Menu Tab View CSS3 Pada Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode