Cara Membuat Tabs Dengan JQUERY dan CSS di Blogger

  • Whatsapp

Cara Membuat Tabs Dengan JQUERY dan CSS di Blog – 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%.

Baca Kuy!! Cara Blogger Memperoleh Penghasilan Selain dari Google Adsense

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 JQUERY 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(){
$('ul.tabs').each(function(){
var
$active,
$content, $links = $(this).find('a');
$active
=
$($links.filter('[href="'+location.hash+'"]')[0]
||
$links[0]);
$active.addClass('active');
$content
=
$($active[0].hash);
$links.not($active).each(function
() {
$(this.hash).hide();
});
$(this).on('click',
'a',
function(e){
$active.removeClass('active');
$content.hide();
$active
= $(this);
$content
=
$(this.hash);
$active.addClass('active');
$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

Yakin Gak Kepo? Ngeblog, Kegiatan Di Waktu Luang Tapi Bisa Dapat Uang

Berikut tadi tuturial atau cara mudah untuk membuat slide tabs di blog menggunakan fungsi jquery dan sedikit tambahan css untuk mempercantik tampilan.

Sudah saya sebutkan diatas bahwa skrip ini tidak terlalu memberatkan loading blog saat dimuat oleh user / visitor.

Jika ada pertanyaan atau request artikel lainnya silakan via kolom komentar dibawah ini agar nanti bisa dibuatkan kalau ada waktu.

Tinggalkan Balasan

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

13 Komentar

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