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'/>

Demo