Cara Membuat Tabs Dengan JQUERY dan CSS di Blogger

Cara Membuat Tabs Dengan JQUERY dan CSS di Blogger – Udah lama saya gak nongol nongol di blog untuk update artikel terbaru, yang pastinya bukan karena saya malas atau udah gak mau dan tidak peduli lagi dengan blog ini.
Karena seminggu kebelakang saya disibukan dengan yang namanya uas (Ujian Akhir Semester), yang tidak bisa saya tinggalkan dan sampai-sampai tidak ada waktu untuk membuka blog.
Tidak akan banyak yang akan saya sampaikan pada kesempatan kali ini, karena saya akan memberikan sebuah tutorial cara membuat menu atau navigasi tabs di blogger.
Ketika kalian membuat dan mempublikasikan sebuah artikel yang isinya cukup banyak, mungkin hal ini akan membuat pengunjung bosan untuk membacanya.

Tetapi dengan menggunakan salahsatu navigasi tabs akan lebih mudah dan tentunya halaman yang dimuatpun tidak terlalu panjang, bahkan bisa berkurang hingga 80%.

Dan penggunaan tabs ini juga tidak akan mempengaruhi proses loading halaman menjadi sangat lambat dikarenakan banyaknya script-script yang dimasukan kedalam tabs ini.
Sebelum memulainya, pastikan bahwa didalam template sobat sudah terpasang script JGUERY nya, karena tanpa script ini tabs tidak akan bisa berjalan. Berikut adalah langkah-langkahnya :
 

Simpan kode CSS dibawah ini sebelum kode ]]></b:skin>

.../* Tabs*/
ul.tabs{margin:1%;
border-radius:3px; margin-bottom:0px;}
.tabs
li{list-style:none;display:inline;}
.tabs
a{padding:5px 10px;display:inline-block;background:#4682B4;color:#ffffff;text-decoration:none;}
.tabs
a.active {background:#27d1a6;color:#ffffff;}
#tab1,#tab2,#tab3,#tab4,#tab5{padding:10px;width:100%;background:#27d1a6;color:#ffffff;...


Kemudian simpan kode Java Script dibawah ini sebelum </head>
 ...<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>... 


Lalu kalian simpan kode HTML berikut ini ditempat yang kalian inginkan. di sidebar,postingan atau halaman pendukung.

 ..<ul class="tabs">
<li><a
href="https://www.blogger.com/blogger.g?blogID=6173980089138089794#tab1">Tab
1</a></li>
<li><a
href="https://www.blogger.com/blogger.g?blogID=6173980089138089794#tab2">Tab
2</a></li>
<li><a
href="https://www.blogger.com/blogger.g?blogID=6173980089138089794#tab3">Tab
3</a></li>
</ul>
<div id="tab1">
<h3>
Section 1</h3>
Ganti dengan tulisan atau gambar atau apapun yang Anda inginkan</div>
<div id="tab2">
<h3>
Section 2</h3>
Ganti dengan tulisan atau gambar atau apapun yang Anda inginkan</div>
<div id="tab3">
<h3>
Section 3</h3>
Ganti dengan tulisan atau gambar atau apapun yang Anda inginkan</div>.

Jika pada blog kalian belum terpasang jquery, kalian bisa menambahkan script ini untuk memasangnya. Simpan kode jquery ini sebelum </head>. <script src=’http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js’ type=’text/javascript’/> atau <script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’ type=’text/javascript’/>

WAJIB DIKETAHUI : Iklan yang tampil pada halaman situs ini sepenuhnya diatur oleh pihak google, kami hanya menyediakan slot kosong. Jadi apabila ada iklan yang kurang berkenan atau menyinggung perasaan anda harap informasikan kepada kami melalui formulir kontak web ini untuk selanjutnya akan kami sampaikan ke pihak Google

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

13 Komentar

  1. silahkan yg mau coba, ambil aja hehe 😀 fr

  2. ijin coba gan kayanya keren nih

  3. hahaha,, mantap juga nih yang udah pada ngomentar di artikel ini, semoga bermanfaat 😀

  4. wahh.., Mantap neh Tutorial.,, Work lagi

    Cara Membuat Tabs Dengan JQUERY dan CSS di Blogger

  5. Iya,, makasih juga udah mampir

  6. Ohh iya,, saya coba tambahkan script jquery nya lagi.. sebelumnya makasih ya Om

  7. Sama kyak punya saya, udah ada tapi gak work. Setelah saya tambahkan lagi script jquerynya baru bisa jalan.. coba aja ditambah lagi

  8. Apa templatenya udah dipasang jquery??

  9. Cara Membuat Tabs Dengan JQUERY dan CSS di Blogge

  10. Kemungkinan besar gk akan jalan Gan.Tapi coba aja dulu

  11. Kalo semua scriptnya disatuin di compose bisa gk ya???