Efisiensi Sudut Ruang Blog di Blogspot

Tak perlulah dijelaskan lagi sebabnya pemilihan judul aneh diatas, postingan yang lalu sudah sempat saya ungkapkan sebabnya. Tapi jika ingin jelas, yang pasti kali ini kita akan berbicara tentang TabView Widget. Salam hormat setinggi-tingginya kali ini untuk Kang Agus Ramadhani (O-om) dengan TabView Widget buatan beliau, yang secara tidak langsung juga memacu keinginan saya untuk menulis ini. Untuk itu, sebelum "menggunakan" TabView Widget disini, tidak bosan bagi saya untuk menyarankan kawan-kawan untuk lebih dulu mencoba Widget dari O-om. (Again and again) Buatlah Blog saya ini menjadi Prioritas terakhir.

TabView Widget ini adalah buah dari salah satu library JavaScript, bernama jQuery, yang sekarang kemudian teradaptasi menjadi jQuery UI. Banyak yang bisa dilakukan dengan jQuery ini. Salah satunya adalah untuk membuat TabView Widget. Untuk yang belum mengerti apa itu "TabView Widget", bisa melihat hasil karya O-OM, atau Hoctro atau bisa melihat di hasil akhir nanti dibawah. Memang jalur yang ditempuh bisa bermacam-macam. Untuk jQuery seperti ini mulanya adalah ide Klaus Hartl, yang sekarang termasuk bagian dari jQuery UI project. Sebenarnya kita bisa saja meng-aplikasikan langsung dari situsnya (saya juga merekomendasikan). Hanya saja, saya khawatir Blog kita akan terlalu berat, mengingat effect yang dihasilkannya juga cukup beragam. Sehingga harus saya lakukan "pemadatan", dan sedikit modifikasi supaya lebih mudah kita pergunakan. Semoga TabView Widget ini dapat diterima dan ikut menghiasi kreasi kita. Tapi sekali lagi saya ingatkan "Selalu dahulukan efisiensi, daripada penampilan. Penggunaan javascript yang terlalu berlebihan, PASTI membuat blog kita semakin berat. Jangan buru-buru dipraktekkan, pertimbangkan dulu baik buruknya".

Sebelumnya harap bersiap-siap, pembicaraan kita kali ini akan sangat panjang.

Langkah ke-nol. Download file-file berikut, simpan, lalu upload ke server kawan-kawan :

• http://eosscript.googlepages.com/ui.tabs.css
• http://eosscript.googlepages.com/ui.core.js
• http://eosscript.googlepages.com/ui.tabs.js
• http://eosscript.googlepages.com/jquery-1.2.6.js
• http://eosscript.googlepages.com/tab.png
• http://eosscript.googlepages.com/loading.gif
  

Tenang, tidak perlu risau, file-file ini kecil ukurannya. File-file diatas, sebenarnya bisa saja langsung digunakan (saya mempersilahkan), hanya saja saya merekomendasikan agar kawan-kawan menggunakan server sendiri supaya (nantinya) tidak overload, karena dipakai bersamaan. Saran saya, gunakan Googlepages, yang menyediakan space untuk menyimpan file. Relatif lebih mudah bagi kita pengguna blogger, karena (seperti sudah pernah saya bilang) Googlepages, menggunakan Google ID juga, yang tentunya sudah dimiliki kawan-kawan pengguna Blogspot. Tapi sebagai contoh saya menggunakan alamat ini, jika kawan-kawan sudah meng-upload file tersebut, silahkan ganti URL-nya dengan alamat kawan-kawan sendiri (ingat, tempatkan di folder yang sama).

Yup, here there are...

1. Setelah Sign-in dan masuk ke Dashboard, Klik Layout > Edit HTML, lalu beri tanda centang(thick) di "Expand Widget Templates". BACKUP templates kawan-kawan, lalu cari kode </head> dan letakkan kode dibawah ini diatasnya/sebelumnya :
   

   ”<!-- script tabview --><link href='http://eosscript.googlepages.com/ui.tabs.css' rel='stylesheet' type='text/css'/>
   <script src='http://eosscript.googlepages.com/jquery-1.2.6.js' type='text/javascript'/>
   <script src='http://eosscript.googlepages.com/ui.core.js' type='text/javascript'/>
   <script src='http://eosscript.googlepages.com/ui.tabs.js' type='text/javascript'/>
   <script type='text/javascript'>
   $(function() {
   $('#container-1 > ul').tabs({ event: 'mouseover' });
   $('#container-2 > ul').tabs({ fx: { opacity: 'toggle' } });
   $('#rotate > ul').tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 2000);
   });</script>
   <!-- script tabview ends -->

   
   (yang saya tandai warna merah itu, bisa diubah sesuai tempat kawan-kawan menyimpan file-file tersebut)
   Kemudian "save template". (jika gagal, ulang lagi dengan lebih hati-hati)
   
   
2. Script sudah, sekarang tinggal memasukkan widget-nya itu itu sendiri. Klik Layout > Page Element lalu Add Page Element di tempat kawan-kawan ingin menempatkan widget ini. Biasanya sidebar lebih cocok. Pilih HTML/JavaScript kemudian Add To Blog. Di jendela pop-up HTML ini, masukkan salah satu dari tiga kode berikut :
   
   Kode A (Mouse Hover Trigger) :
   

   ”<table border="0" width="100%" cellspacing="0" cellpadding="4" bgcolor="#eaeaea"><tr><td>
   <div id="container-1">
   <ul>
   <li><a href="#fragment-1"><span>Satu</span></a></li>
   <li><a href="#fragment-2"><span>Dua</span></a></li>
   <li><a href="#fragment-3"><span>Tiga</span></a></li>
   </ul>
   <div id="fragment-1">Isi Tab Satu</div>
   <div id="fragment-2">Isi Tab Dua</div>
   <div id="fragment-3">Isi Tab Tiga</div>
   </div>
   </td></tr></table>
   <a style="font-size:11px" href="http://eosmate.blogspot.com/2008/07/efisiensi-sudut-ruang-blog-di-blogspot.html">[Blognya firdaus]</a><a style="font-size:11px" href="http://www.stilbuero.de/">[jQuery | Klaus Hartl]</a>
   

   
   Kode B (Fade Effect) :
   

   ”<table border="0" width="100%" cellspacing="0" cellpadding="4" bgcolor="#eaeaea"><tr><td>
   <div id="container-2">
   <ul>
   <li><a href="#fragment-4"><span>Satu</span></a></li>
   <li><a href="#fragment-5"><span>Dua</span></a></li>
   <li><a href="#fragment-6"><span>Tiga</span></a></li>
   </ul>
   <div id="fragment-4">Isi Tab Satu</div>
   <div id="fragment-5">Isi Tab Dua</div>
   <div id="fragment-6">Isi Tab Tiga</div>
   </div>
   </td></tr></table>
   <a style="font-size:11px" href="http://eosmate.blogspot.com/2008/07/efisiensi-sudut-ruang-blog-di-blogspot.html">[Blognya firdaus]</a><a style="font-size:11px" href="http://www.stilbuero.de/">[jQuery | Klaus Hartl]</a>
   

   
   
   Kode C (Auto-Rotate) :
   

   ”<table border="0" width="100%" cellspacing="0" cellpadding="4" bgcolor="#eaeaea"><tr><td>
   <div id="rotate">
   <ul>
   <li><a href="#fragment-7"><span>Satu</span></a></li>
   <li><a href="#fragment-8"><span>Dua</span></a></li>
   <li><a href="#fragment-9"><span>Tiga</span></a></li>
   </ul>
   <div id="fragment-7">Isi Tab Satu</div>
   <div id="fragment-8">Isi Tab Dua</div>
   <div id="fragment-9">Isi Tab Tiga</div>
   </div>
   </td></tr>
   </table>
   <a style="font-size:11px" href="http://eosmate.blogspot.com/2008/07/efisiensi-sudut-ruang-blog-di-blogspot.html">[Blognya firdaus]</a><a style="font-size:11px" href="http://www.stilbuero.de/">[jQuery | Klaus Hartl]</a>
   

   
   Setelah itu, lalu Save.
   
   
3. Nikmati hasilnya. Proses belajar tidak pernah sia-sia kawan. Tidak percaya? Lihat hasilnya di bawah ini

{live-preview sudah dipindah}

(Preview disini hanya sementara, dan akan dihapus. Jika kawan-kawan sudah tidak mendapati contoh TabView disini atau tampilan yang tidak sesuai, silahkan lihat di sini, lalu lihat source halaman tersebut)

Fyuhh. Apakah sudah selesai? Bisa sudah bisa belum. Yang sekarang harus kita lakukan adalah mengisinya (mengubah Judul dan isi tab). Yang perlu kawan-kawan lakukan hanya mengubah Judul Tab (Satu, Dua, atau Tiga) dan Isi Tab (Isi Tab Satu, Isi Tab Dua, atau Isi Tab Tiga) pada masing-masing kode A, B maupun C.

Untuk Isi Tab, itu semua terserah kawan-kawan bisa diisi dengan apa saja. Gambar, Blogroll, atau sekedar teks. Tampilan bisa diubah, terutama bagi kawan-kawan yang mengerti css. Itulah sebabnya, ada baiknya file diatas tadi di download kawan-kawan sendiri, sehingga memungkinkan untuk melakukan modifikasi lebih luas. Jika gagal (sekali lagi) jangan panik. Lakukan restore template dengan backup-an kawan-kawan lalu mulai lagi dari awal, dan lebih berhati-hati.

Terimakasih sudah sudi meluangkan waktu sampai di ujung akhir tulisan ini. Saya mohon untuk memberi applause bagi O-OM dan Klaus. Selamat mencoba (bagi yang ingin mencoba).

#PS:

• Dengan tidak mengurangi rasa hormat, saya MEMPERBOLEHKAN kawan-kawan untuk menghapus Link credit untuk Saya dan Klaus di bawah TabView Widget Ini. Hal ini adalah wujud komitment saya untuk tidak membuat "Hak Karya Cipta" milik saya. Kode diatas, diperbolehkan untuk diubah oleh kawan-kawan, termasuk Link Ke Blog Saya ini, juga BOLEH dihilangkan.
• Ini sama sekali bukan kampanye untuk menghilangkan "Hak Karya Cipta". Saya berusaha tetap menghormati "Hak Karya Cipta" orang lain. Maka saya juga menghimbau kawan-kawan untuk tetap menghargai "Hak Karya Cipta" orang lain selain saya.