Minggu, 22 Februari 2015

Cara Membuat Tab View jQuery Dengan Sangat Mudah

Cara Membuat Tab View jQuery Dengan Sangat Mudah - Beberapa artikel yang ada di blog ini pernah membahas tentang tab view, baik yang ada di sidebar atau pun dalam artikel blog. Namun khusus tab view yang ada di sidebar yang pernah terpasang di sidebar blog ini sudah tidak ada karena mneyesuaikan dengan perkembangan blog ini yang semakin merosot. Sedangkan tab view yang ada didalam artikel masih bisa diliha di artikel yang sudah ditulis sebelumnya di tab view halaman blog

Cara Membuat Tab View jQuery Dengan Sangat Mudah

Perhatikan gambar diatas yang merupakan Demo dari tab view yang dibuat dengan menggunakan script namun sangat mudah dipasang kedalam blog. Untuk melihat demonya langsung bisa di klik tombol berikut ini


Bagaimana Cara Membuat Tab View jQuery Tersebut?
Dalam membuat tab view ini saya tidak akan menjelaskannya secara gamblang namun jika Anda tertarik untuk membuat dan memasang tab view ini kedalam blog Anda silahkan salin beberapa kode CSS dan kode script berikut ini kedalam template blog. Dan jangan kuatir untuk script, tidak akan memberatkan loading blog. Kode CSS berikut ini disalin kedalam kode CSS yang ada didalam template blog dan sesuaikan value atau nilai yang ada didalam kode berikut ini

ul.tabs{margin:0 -10px;}
.tabs li{list-style:none;display:inline;}
.tabs a{padding:5px 10px;display:inline-block;background:#666;color:#fff;text-decoration:none;}
.tabs a.active {background:#fff;color:#000;}
#tab1,#tab2,#tab3{padding:10px;width:600px;background:#fff;}

Dan salin kode Script berikut sebelum kode </head> yang ada didalam kode template blog

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;ul.tabs&#39;).each(function(){
var $active, $content, $links = $(this).find(&#39;a&#39;);
$active = $($links.filter(&#39;[href=&quot;&#39;+location.hash+&#39;&quot;]&#39;)[0] || $links[0]);
$active.addClass(&#39;active&#39;);
$content = $($active[0].hash);
$links.not($active).each(function () {
$(this.hash).hide();
});
$(this).on(&#39;click&#39;, &#39;a&#39;, function(e){
$active.removeClass(&#39;active&#39;);
$content.hide();
$active = $(this);
$content = $(this.hash);
$active.addClass(&#39;active&#39;);
$content.show();
e.preventDefault();
});
});
});
</script>


Salin markup HTML berikut ini dimanapun yang Anda inginkan, dengan catatan Lebar dan Tinggi yang digunakan sesuai atau disesuaikan dengan nilai lebar yang ada di kode CSS diatas

<ul class='tabs'>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'>
<h3>Section 1</h3>
<p>Ganti dengan tulisan atau gambar atau apapun yang Anda inginkan</p>
</div>
<div id='tab2'>
<h3>Section 2</h3>
<p>Ganti dengan tulisan atau gambar atau apapun yang Anda inginkan</p>
</div>
<div id='tab3'>
<h3>Section 3</h3>
<p>Ganti dengan tulisan atau gambar atau apapun yang Anda inginkan</p>
</div>


Itulah cara mudah membuat tab view dengan jquery yang bisa Anda terapkan kedalam blog Anda. Semoga bermanfaat

Cara Membuat Tab View jQuery Dengan Sangat Mudah Rating: 4.5 Diposkan Oleh: ana sriwahyuni

21 komentar:

  1. script ini bisa digabungkan kan mba, tanpa harus edit HTML Template???

    BalasHapus
  2. perlu dicoba nih biar tambah pinter modif blog

    BalasHapus
  3. Whahahah layak dicoba nih
    Hiehiheiheiee

    BalasHapus
    Balasan
    1. iya mas, silahkan dicoba ya semoga bermanfaat :)

      Hapus
  4. ini bisa jadi salah satu alternatif menghemat ruang postingan ya mbak. Biar gk terlalu panjang. Hehehe.

    BalasHapus
    Balasan
    1. benar mas Indra, biasanya dipasang pada sidebar :) silahkan dicoba mas

      Hapus
  5. sederhana ya mbak...tapi menarik dan bisa juga ditempatkan dalam halaman posting.
    kadang yang begini ini lebih banyak fungsinya dan lebih mudah untuk diterap. tinggal ganti warna yang terang kayaknya lebih menarik biar kelihatan kinclong gitu mbak. heeee

    BalasHapus
    Balasan
    1. iya mas, dan silahkan dimodifikasi karena sebenarnya banyak macamnya juga tabs view seperti diatas dan yg saya share hanya yg sederhana saja :)

      Hapus
  6. dulu pernah pasang TabView, cuma mungkin kodenya jaman dulu mah memberatkan loading blog. melihat kode Tab View suguhan dari sini sepertinya lebih simpel dan yakin ngga akan memberatkan, betulkah perkiraan saya bu?

    BalasHapus
    Balasan
    1. tidak mas, karena yang saya share ini hanya menggunakan script yg sederhana saja.. :)

      Hapus
  7. Saya tertarik untuk memasangnya pada postingan.....namu kepikiran juga takutnya memperlambat loading blog, soalnya tempalte yang saya gunakan cukup loadignnya

    BalasHapus
    Balasan
    1. silahkan di coba mas dan kode diatas tidak mempengaruhi loading blog karena yang saya share ini hanya menggunakan script yg sederhana saja.. :)

      Hapus
    2. jadi gitu ya mbak ana, okelah, nanti akan saya coba mumpung lagi online

      Hapus
  8. terimakasih atas infonya gan
    http://tokoobatherbal23.com/obat-herbal-benjolan-di-ketiak/

    BalasHapus
  9. kode ini tinggal di tambahkan aja ya mbak tanpa harus mengedit html?
    perlu di coba nih tipsnya.terimakasih udah share :)

    BalasHapus
  10. Thanks infonya gan, sangat membantu :)
    http://kedaiacemaxs.com/

    BalasHapus
  11. wah, sekarang udah mahir dalam penempatan jquery ya mbak, keren deh, penuh dengan kreatif :)

    BalasHapus
  12. Nice artikelnya sangat bermanfaat sekali :)
    ijin share http://jellygamatgoldg31.com/

    BalasHapus
  13. perlu dicoba nih , Ini gax membuat loading blog jadi berat kan mbak ? . ijin praktek dlu mbak ,trims :)

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia