12 Oktober 2013

Menu Tab View CS3

2 ulasan:
 

Cara pemasangan

1.Login ke akaun blogger anda.
2.Klik Template --> Edit HTML.
3.Cari kod ]]></b:skin>
4.Copy dan paste kod dibawah diatas kode ]]></b:skin> tersebut

.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;}
5.Gunakan kod html ini untuk mengaktifkan tab menu cs3
<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"> TAJUK 1 </label> <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /> <label for="tab-2" class="tab-label-2"> TAJUK 2 </label> <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" /> <label for="tab-3" class="tab-label-3"> TAJUK 3 </label> <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" /> <label for="tab-4" class="tab-label-4"> TAJUK 4 </label> <div class="clear-shadow"></div> <div class="papercontent4"> <div class="papercontent4-1"> <h2>TAJUK 1</h2> <p> TEKS DISINI </p> </div> <div class="papercontent4-2"> <h2>TAJUK 2</h2> <p> TEKS DISINI </p> </div> <div class="papercontent4-3"> <h2>TAJUK 3</h2> <p> TEKS DISINI </p> </div> <div class="papercontent4-4"> <h2>TAJUK 4</h2> <p> TEKS KORANG DISINI </p> </div> </div> </section>

2 ulasan:

  1. lama tak main dengan codingggggggg T_T

    BalasPadam
    Balasan
    1. Oh ya ke?Boleh la mulakan balik buat eksperimen hehe,saya sedia membantu kalau boleh :)

      Padam

TERIMA KASIH UNTUK KOMENKOMEN TERBARU

 
© 1986. Aideal Fitri - fitri1986 Malaysian Blogger