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 :
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.

34 tanggapan:

I know there is something in your head
Any type of comment will be accepted and published. Except spam!
Subscribe to my feed | Subscribe comment feed
Kristina Dian Safitry mengatakan...

akan kupertimbangkan...

edisamsuri mengatakan...

Boleh nih kang...tapi belum bisa sekarang di coba...masih banayk kerjaan...thansk kang atas infonya

Mike.... mengatakan...

boleh..boleh..

nice tips...nanti dicoba ah..

I Ketut Riasmaja mengatakan...

Betul2 Keren tips nya... Simpan dulu, ntar dipraktekin. Tapi kang, saya lihat contoh yang dah terpasang dibagian sidebar box isi tabnya terlalu lebar (melebihi lebar sidebarnya). Apa script yang ini gak gitu kang? Thanks...

JoVie mengatakan...

wah..manggil KANG semua...wakakak..
Gw manggil apa yah Sob?? manggil Pak De' aja deh..hua haha...

Keren nih tipsnya..perlu di coba..padahal gw mau ng'post soal top tab tapi bukan widget...ternyta ini lebih keren...gw promosiin akh...

@ Kristina Dian Safitry : Kok baru "AKAN" mbak??
@ edisamsuri : Kalo sibuk jangan maksain diri, coba aja tahun depan...kekekek
@ Mike : Nanti gw cek udah berubah ato belom blog lo..pasti belom dicoba...
@ I ketut : Iya simpen aja dulu gak perlu di coba...

kesimpulan dari seluruh koment di atas : belom ada yang berani nyoba...WEK!!!

afithk mengatakan...

oke, simpen dulu coba belakangan...

blogspot mengatakan...

wah keren kreasinya.. salut dulur terus berkarya.. saya setuju buat nu lewih mentingkeun SEO..isi tab view nu kudu rada milih2 oge yach..

gus mengatakan...

hehehe dikeluarin (juga) neh jurusnya...
sepertinya saya akan berpaling ke tutorial ini deh.lebih familiar. dan lebih memberi ruang bebas untuk di-otak-atik.

ustadz HTML yang satu ini membikin saya harus bermakmum untuk urusan pengikhlasan ilmu.
kalau boleh usul, kayaknya perlu bikin logo khusus yg mengkampanyekan ilmu untuk semua.

Ah saya jadi ingat perkataan Dr Abul A'la el Maududy asal Pakistan: " saya lebih suka buku buku saya dibajak, diterjemahkan tanpa perlu otoritas ijin saya. karena hanya dengan cara itu setiap org bisa menyerap ilmu (tanpa kemahalan) murah dan kemanfaatan sebuah ilmu (lebih bisa) dirasakan khalayak banyak"

Semangat yg sama diambil Google dg menggratiskan (dan membebaskan modifikasi) fasilitas mesin pencari dan domainnya disaat yahoo perlu menarik bayaran untuk pendirektorian dan pengoptimasian konten pemilik domain.

Atau juga Linux yg merilis konsep open source-nya. disaat Micrsoft sibuk meanadatangani perjanjian anti penggunaan software 'lewat jalur belakang alias backdoor' dengan otoritas kepolisian disemua negara.

Saya kira konsep 'ilmu dan kebebasan berkreasi bukan monopoli sang penemu saja"
karena inti dr temuan hanyalah sekedar keberuntungan sepihak krn "bisa lebih dulu mengumumkan ke publik atas temuannya dibanding kompetitornya.

waduh, seras menulis artikel, neh. maaf ya ustadz kalo kepanjangan komentarnya.

regards

tambal BAN mengatakan...

wah ntar abis nambal saya coba nih...thanks

mardee mengatakan...

ini berpengaruh buat SEO apa ga ya?
trus kira2 nambah berat blog kagak ya? :D
*maap kebanyakan nanya

elmo mengatakan...

duh..masih binun :D

JoVie mengatakan...

Sob ku yang paling jelekkk....
Gw sebenernya salut banget nih ama artikel2 lo...keren2..perlu banyak belajar nih dari lo...and di tiap artikel lo juga low profile banget...

Salut..99x ..fade out...

Hellen mengatakan...

Wah... makasih untuk tipsnya...... :)

ihsan mengatakan...

emang berguna banget bro widget ini....

I Ketut Riasmaja mengatakan...

"@ I ketut : Iya simpen aja dulu gak perlu di coba..."

Ampun pak guru... Saya dah nyoba, tapi gagal lagi-gagal lagi.. Mohon pencerahan..

JoVie mengatakan...

@ I ketut : yang nulis itu bukan Pak Guru..tapi asisten nya Pak Guru..hiks3x (asisten tanpa tanda jasa)...

Biar Pak guru aja yang ngasih pencerahan...

Anang mengatakan...

wew... tak simpen dulu deh triknya... tar kalo dah butuh banget baru dipraktekin.. eniwey bisa jadi referensi ni

Ruth mengatakan...

Bener2 ahli HTML yaa..
Sayangnya otak saya belum cukup gede untuk bisa mencerna tulisan ini... Hehehe...
Tapi hebat deh, bisa bikin tips2 kayak gini.
Keep up the good work, bro.

JoVie mengatakan...

@ Anang : Wah, tamu besar ada disini...Luar Biasa...Ayo Sob, dijamu tuh Mas Anang...
Aduh, Jovie Ngumpet akh...malu, hiks..
Lam kenal mas Anang...

Blogger-Holic mengatakan...

wah.. hebat nih mas firdaus hehehe

tapi apa engga sebaiknya .js nya itu dijadiin satu..? bisa engga ya :)

firdaus.a mengatakan...

@Kristina Dian Safitri : baiklah...
@edisamsuri : sama-sama pa guru :)
@Mike : ok..ok..
@I Ketut Riasmaja : Itu tergantung backgroundnya mas.. Jadi bisa-bisa aja.. Hanya memang, mungkin harus ada penjelasan lebih lanjut mengenai CSS. Bisa mas cari di W3School.com atau yang lainnya. Cari di Bagian CSS mas.
@Jovie : thx sis..
@afith : silahkan mas afith..
@blogspot : haturnuhun kang.. sumuhun..leres eta kang.
@gus : La Haula Wala Quwwata illa billah. Terimakasih gus dukungannya, doakan supaya bisa tetap istiqomah, jika memang cara seperti ini adalah baik. Ilmu juga titipan, maka suatu saat akan diambil kembali. Maka dengan apa saya bisa menahan yang bukan milik saya. Betul gus?
@tambal Ban : Waah.. ini motor saya kok belum selesai juga mas..? :)
@masrdee : Mengenai SEO, tergantung isi TAB-nya. Kalau mengenai berat-tidak. Kan saya sudah ceritakan diatas :)
@Hellen : Sama-sama mbak Hellen :)
@ihsan : Terimakasih mas ihsan.. sekiranya berguna, silahkan dipakai.. :)
@I Ketut Riasmaja : mas..mas.. itu yang ngomong JoVie loh.. bukan saya.. :)
@Anang : *Waduh.. ada mbah.., sok-cool aja ah*
Boleh mas anang.. terima kasih sudah mampir..
*ketahuan ga ya.. *
@Ruth : Halah.. ngga lah.. jauuh kalo dari ahli mah.. kita kan belajar bareng-bareng.. ya kan.. :)
@Blogger-Holic : Sama-sama kita bro, baru belajar.. Kalau masalah .js/javascript, kenapa dipisahkan.. Itu untuk memudahkan pengembangan nantinya. Maksudnya gini, file {jquery-1.2.6.js} itu bisa digunakan untuk membuat bentuk-bentuk element lain, bukan hanya tabView Widget ini. Maka script selain script inti, harus dipisahkan, seperti file {ui.core.js} ini adalah file yang menciptakan effect fade misalnya. Dan begitu seterusnya untuk file lain. Tapi jika memang mas BLogHol ingin menyatukan.. dipersilahkan kok... silahkan dibedah saja.. :)

I Ketut Riasmaja mengatakan...

@Firdaus: "@I Ketut Riasmaja : mas..mas.. itu yang ngomong JoVie loh.. bukan saya.. :)"

He.he.he... jadi malu... *kabuurr*

rida mengatakan...

kang di sayah mah gagal... tampil sih tampil ngan teu berpungsi.. coba dicek.. punteun ah miwarangan..!!

firdaus.a mengatakan...

@rida : Teu sawios bos.
Sudah dicheck.. kode yang dimasukkan kurang sedikit saja kok. coba diperiksa lagi deh. untuk kode yang di sebelum </head> itu ada yang kurang yaitu penutup </script> di tiap-tiap barisnya. Coba di-copy ulang saja.

InsyaAllah jalan.

Wahab mengatakan...

Pertama nga ngerti apa ini eh pas baca jadi maubikin nih....

firdaus.a mengatakan...

@Wahab : Dicoba aja bro wahab.. semoga berhasil. Soalnya banyak yang protes, ga bisa-bisa.. tapi asal teliti bisa kok. Bener.

taufiq mengatakan...

sebenarnya aku suka yang otak-atik html. tapi tips diatas bagus kok. yang inginsaya tanyakan tentang bagaimana masnya bisa membuat posting comment yang seperti ini. coz biasanya kalo blogspot itu kalo comment laqngsung buka halaman komen bukan langsung kayak comment punya masnya. tolong beritau q cara emembuat bentuk comment seperti punya masnya

wong java mengatakan...

oh iya mas misalnya kalo kita pake cara masnya, kira-kira pa nanti da pengaruh waktu kita buka halaman blog kita pa ngk lemot?

firdaus.a mengatakan...

@taufik : untuk membuat komentar "bersambung" dibawah postingan seperti ini, tanpa harus membuka halaman baru, sudah banyak yang menerangkan, coba silahkan ke blognya o-om, untuk posting masalah ini silahkan ke link ini http://www.o-om.com/2008/06/embedded-comment-form-di-bawah.html

@wongjava : Pengaruh mas.. kan sudah saya jelaskan diatas tuh.. he..he.. "Penggunaan javascript yang terlalu berlebihan, PASTI membuat blog kita semakin berat."

BUSBY SEO TEST mengatakan...

hehe, bener tuh bang, mending kek punya saya aja kali ya, ga pake image templatenya hahaha

fauzi mengatakan...

Saya coba di blog saya kok tidak jalan ya mas saat melakukan perpindahan klik ke tab selanjutnya, padahal sudah saya ikuti instruksi dengan benar dan saya cek berulang kali.

adakah yang salah mas?:D

Rizki mengatakan...

Infonya bagus mas. takcoba dulu yah... makasih infonya. mapir ya mas blognolsatu.blogspot.com

darikuuntuknegeriku mengatakan...

Nice post...

Makasih

dannu mengatakan...

ehehehhehehkkkk

Beri Komentar

Silahkan tanggapi tulisan ini. Blognya firdaus mendukung "DO FOLLOW". Artinya, Setiap komentar yang diberikan, akan dibalas dengan backlink dari sini.
(Jangan buang-buang waktu dengan melakukan SPAMMING. Komentar yang ber'bau' SPAM akan dihapus.)

(Atau bila rindu menggunakan Form Komentar Lama Terima Kasih Yang Sebesar-besarnya)


 
Terima Kasih Dunia Atas Segala Inspirasi dan Warna Suara . DuaRibuDuaBelas. MMXII . Firdaus™
Subscribe with Bloglines Blog