Multi tab view yang belakangan ini lagi trend tidak hanya dipakai situs besar-situs akan tetapi bloger juga tidak ketinggalan karena bentuk dan tampilan sangat praktis. Tab view walaupun bentuknya hanya satu kotak akan tetapi dapat dipergunakan untuk menampilkan informasi yang berbeda pada masing-masing tab.
Sarana ini sangat bagus untuk menampilkan informasi judul-judul posting-posting tertentu seperti, artikel terbaru, artikel terpopular dan atau terkomentar.
Tabview ini tidak hanya dapat ditempatkan pada side bar akan tetapi juga ditampilkan pada bagian atas atau bawah halaman posting. Walaupun tampilan tab view berbeda dengan tab menu horizontal atau dropdown menu akan tetapi kedua media ini sama-sama dapat difungsikan sebagai sarana untuk menampilkan teks atau hamalan posting. Contoh tampilan tab view seperti terlihat pada gambar di samping.
Tabview yang dibahas kali ini adalah multi tab view dibuat menggunakan JQuery (UI/API/1.8/Tabs).
Cara membuat multi tab view menggunakan JQuery API/1.8/Tabs dapat ditempuh dengan dua cara dengan hasil yang sama yaitu:
Pertama,
1. Sign in di blog
2. Klick Rancangan
3. Klick Edit HTML
4. Tempatkan kode di bawah ini dalam kodde template blog anda
di atas atau sebelum </head>. Untuk mudah menemukannya pakai Ctrl F dan masukan teks </head> dalam teks box yang muncul pada bagian bawah layar komputer/laptop yang digunakan lalu klick.
Ini kode yang ditempatkan di atas </head>
Tabview yang dibahas kali ini adalah multi tab view dibuat menggunakan JQuery (UI/API/1.8/Tabs).
Cara membuat multi tab view menggunakan JQuery API/1.8/Tabs dapat ditempuh dengan dua cara dengan hasil yang sama yaitu:
Pertama,
1. Sign in di blog
2. Klick Rancangan
3. Klick Edit HTML
4. Tempatkan kode di bawah ini dalam kodde template blog anda
di atas atau sebelum </head>. Untuk mudah menemukannya pakai Ctrl F dan masukan teks </head> dalam teks box yang muncul pada bagian bawah layar komputer/laptop yang digunakan lalu klick.
Ini kode yang ditempatkan di atas </head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
5. Klick Save Template untuk meyimpan perubahan
6. Setelah muncul pesan Perubahan Anda telah disimpan pada bagian atas halaman template kemudian Klick lagi untuk kembali ke halaman Rancangan
7. Klick Add gadget/tambah gadget
8. Pilih HTML/Javascript
9. Copy lalu paste kode di bawah ini dalam gadget HTML/Javascript
Ini kode yang disimpan dalam gadget HTML/JavaScript.
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>Artikel terbaru</span></a></li>
<li><a href="#fragment-2"><span>Terpopule</span></a></li>
</ul>
<div id="fragment-1">
Untuk menempatkan kode script link
</div>
<div id="fragment-2">
Untuk menempatkan kode script link
</div>
</div>
<ul>
<li><a href="#fragment-1"><span>Artikel terbaru</span></a></li>
<li><a href="#fragment-2"><span>Terpopule</span></a></li>
</ul>
<div id="fragment-1">
Untuk menempatkan kode script link
</div>
<div id="fragment-2">
Untuk menempatkan kode script link
</div>
</div>
8. Klick Simpan untuk menyimpan perubahan
Sedangkan cara kedua yaitu tanpa menempatkan kode JQuery (UI/API/1.8/Tabs) dalam kode template blog (<head> seperti yang dijelaskan di atas.
Cara kedua ini cukup menempatkan kedua kode JQuery (UI/API/1.8/Tabs) di atas dalam gadget HTML/Javascript dengan catatan kedua kode di atas digabungkan menjadi satu. Sedangkan tempat untuk menuliskan kode atau script link dalam gadget HTML/Javascript sama seperti yang diuraikan di atas.
Sedangkan cara kedua yaitu tanpa menempatkan kode JQuery (UI/API/1.8/Tabs) dalam kode template blog (<head> seperti yang dijelaskan di atas.
Cara kedua ini cukup menempatkan kedua kode JQuery (UI/API/1.8/Tabs) di atas dalam gadget HTML/Javascript dengan catatan kedua kode di atas digabungkan menjadi satu. Sedangkan tempat untuk menuliskan kode atau script link dalam gadget HTML/Javascript sama seperti yang diuraikan di atas.
Teks fragment-1 dapat diganti sesuai dengan teks yang diinginkan dengan catatan <a href="#fragment-1"> harus sama dengan <div id="fragment-1">. Kenapa harus sama karena kedua teks tersebut adalah satu kesatuan.
Ini gabungan dari kedua kode di atas apabila ingin menempatkan pada gadget HTML/JavaScript.
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#fragment-1">Terbaru</a></li>
<li><a href="#fragment-2">Terkomentari</a></li>
</ul>
<div id="fragment-1">
Untuk menempatkan kode script link
</div>
<div id="fragment-2">
Untuk menempatkan kode script link
</div>
<div id="fragment-2">
Untuk menempatkan kode script link
</div>
</div>
Dari kedua cara yang dijelaskan di atas silahkan memilih salah satu yang menurut anda lebih mudah.
Referensi: JQuery.com
0 komentar:
Posting Komentar
Terima kasih atas kunjungan anda. Silahkan berikan komentar tentang artikel ini. Akan tetapi perlu dimaklumi bahwa Komentar yang tergolong iseng tidak akan ditampilkan. Untuk mendapatkan jawaban langsung pada kotak masuk Email anda, klick teks Subscribe by Email. Atas atensi dan partisipasinya terima kasih.