Cara Membuat Tab-View dengan CSS3 dan JQuery

          Kali ini TB4all Akan Memberitahu Bagaimana Cara Membuat Tab-View dengan CSS3 dan JQuery, Tanpa Banyak Basa-Basi TB4all Akan Langsung Memberitahu Cara Membuat Tab-View dengan CSS3 dan JQuery.

Caranya :       ====>>> DEMO


1. Login Ke Akun Blogger Sobat
2. Pilih Design/Rancangan
3. Pilih Edit HTML
4. Cari Kode ]]></b:skin> Untuk Mempermudah Mencarinya Gunakan ( Ctrl+F )
5. Jika Sudah Ketemu Copy-Paste kan Script HTML Dibawah Tepat Di atas Kode ]]></b:skin>


Langsung Copy-Paste Script HTMLnya :

#tabs{ overflow: hidden; width: 100%; margin: 0; padding: 0; list-style: none; font-family: Arial, Helvetica; font-size: small; } #tabs li{ float: left; } #tabs a{ position: relative; background: #ddd; background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); background-image: -webkit-linear-gradient(top, #fff, #ddd); background-image: -moz-linear-gradient(top, #fff, #ddd); background-image: -ms-linear-gradient(top, #fff, #ddd); background-image: -o-linear-gradient(top, #fff, #ddd); background-image: linear-gradient(to bottom, #fff, #ddd); padding: .5em 3.5em; float: left; text-decoration: none; width: auto; color: #444; text-shadow: 0 1px 0 rgba(255,255,255,.8); -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; border-radius: 5px 0 0 0; -moz-box-shadow: 0 2px 2px rgba(0,0,0,.4); -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.4); box-shadow: 0 2px 2px rgba(0,0,0,.4); } #tabs a:hover, #tabs a:hover::after, #tabs a:focus, #tabs a:focus::after{ background: #fff; } #tabs a:focus{ outline: 0; } #tabs a::after{ content:''; position:absolute; z-index: 1; top: 0; right: -.5em; bottom: 0; width: .7em; background: #ddd; background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); background-image: -webkit-linear-gradient(top, #fff, #ddd); background-image: -moz-linear-gradient(top, #fff, #ddd); background-image: -ms-linear-gradient(top, #fff, #ddd); background-image: -o-linear-gradient(top, #fff, #ddd); background-image: linear-gradient(to bottom, #fff, #ddd); -moz-box-shadow: 2px 2px 2px rgba(0,0,0,.4); -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.4); box-shadow: 2px 2px 2px rgba(0,0,0,.4); -webkit-transform: skew(10deg); -moz-transform: skew(10deg); -ms-transform: skew(10deg); -o-transform: skew(10deg); transform: skew(10deg); -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; border-radius: 0 5px 0 0; border:#ddd; } #tabs #current a, #tabs #current a::after{ background: #fff; z-index: 3; } #content { background: #fff; padding: 2em; height: 220px; position: relative; z-index: 2; -moz-border-radius: 0 5px 5px 5px; -webkit-border-radius: 0 5px 5px 5px; border-radius: 0 5px 5px 5px; -moz-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5); -webkit-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5); box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5); } #content p { margin: 0 0 15px 0; }

6. Jika Sudah Cari Kode </body> Seperti Biasa Gunakan Ctrl+F Supaya Lebih Cepat Mencari
7. Jika Ketemu Copy-Paste kan Script HTML diBawah ini Tepat Di atas Kode </body>

Langsung Copy-Paste Script HTMLnya :

<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script> $(document).ready(function() { $("#content div").hide(); // Initially hide all content $("#tabs li:first").attr("id","current"); // Activate first tab $("#content div:first").fadeIn(); // Show first tab content $('#tabs a').click(function(e) { e.preventDefault(); $("#content div").hide(); //Hide all content $("#tabs li").attr("id",""); //Reset id's $(this).parent().attr("id","current"); // Activate this $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab }); })(); </script>

8. Simpan Template Kamu
9. Pilih tab Design > add Gadget > HTML/JavaScript
10. Copy Script Dibawah ini dan Paste kan KeDalam Gadget Yang Buat Tadi

Langsung Copy-Paste Script HTMLnya :


<ul id="tabs"> <li><a href="#" title="tab1">One</a></li> <li><a href="#" title="tab2">Two</a></li> <li><a href="#" title="tab3">Three</a></li> <li><a href="#" title="tab4">Four</a></li> </ul> <div id="content"> <div id="tab1"> <p>Isi Konten Tab 1</p> </div> <div id="tab2"> <p>Isi Konten Tab 2</p> </div> <div id="tab3"> <p>Isi Konten Tab 3</p> </div> <div id="tab4"> <p>Isi Konten Tab 4</p> </div> </div> <p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='www.tb4all.blogspot.com' target='_blank' title='Get this widget !'>:: Get this widget ! ::</a></span></p>

11. Selesai Sudah Tutorial Cara Membuat Tab-View dengan CSS3 dan JQuery.

Jika Sobat Mengalami Kesulitan Dalam Mengerjakannya Sobat Bisa Bertanya Kepada Kami Melalui Kontak Komentar.

Mohon Maaf Bila Ada Kesalahan Terhadap Script Mohon DiBeritahukan Kami Akan Selalu Membantu.