Saturday, 13 June 2009
Jodoh dan Takdir
Qais dibuat skizofrenia gara-gara urung menikahi Layla, bunga hatinya. Romeo tewas dengan sukses di sisi Juliet yang mati sementara. Dunia cinta telah melahirkan ribuan judul tragedi. Ada apa?
Fenomena perjodohan selalu menarik, sehingga menu utama rumah produksi sinetron tidak jauh beranjak darinya. Tukang ramal jodoh kebanjran order dari orang iseng ataupun orang gelisah. Padahal kalau mau direnung-renungkan, fenomena perjodohan adalah semata-mata masalah takdir. Bahkan, dengan memahami fenomena ini, kita bisa memahami kenapa takdir itu ada.
Pernahkah, kamu berfikir mengapa kamu ada? Kenapa ayah kamu bernama Paijo dan ibumu bernama Sumiatun? Dan dengan demikian namamu adalah Painem binti Paijo ?
Benar sekali, kawan, karena harus dari perkawinan merekalah kamu dilahirkan. Kamu tidak akan pernah ada kalau Paijo menikah dengan Rani Juliani, misalnya. Artinya, Paijo itu jodohnya ya Sumiatun yang melahirkanmu, bukan Rani si caddy. Kalupun Paijo jadi menikah dengan Rani, maka hasilnya bukan kamu. Sampai di sini paham, bukan?
Begitupun kalau ibumu, dengn jalan apapun tidak mau menikah dengan Bung Paijo, tetapi berkeras memilih Ro'i Martin yang ganteng ya tidak jadi. Soalnya Allah telah merancang dengan seksama bahwa pada tanggal 5 Mei 1987 akan lahir Painem Biyutiful binti Paijo dari Ibu Sumiatun. Nah! Dengan nama itulah penduduk langit dan bumi memanggilmu. Dengan nama itulah Mikail membagi rizkimu.
Pun, begitulah, kelak dari perkawinanmu dengan 'someone' akan dilahirkan anak-anak manusia dengan identitas yang sudah jelas, dengan nasib yang sudah tercatat di Luh al Mahfuzh, kitab niscaya itu.
Misalkan Allah telah tetapkan beberapa masa sesudah hari ini akan lahir seorang bayi bernama Fulan dari hasil perkawinanmu dengan someone tadi... Mungkin saja siapakah someone itu kamu belum tahu saat ini. Kamu tidak kenal dia. Mungkin saja saat ini bahkan kamu sedang mencita-citakan untuk membina keluarga dengan Si Otong, teman kecilmu yang gantengnya tak tertahankan itu, tapi kalau Allah menetapkan bahwa anakmu kelak akan memiliki ayah biologis bernama someone, ya itulah takdir.
Begitulah, paling tidak itulah yang berlaku secara biologis. Maksudku, ketiga anak Ahmad Dhani memang harus ditakdirkan ber-ibu-kan Maia Estianty. Namun mungkin Ahmad Dhani bukan lagi jodohnya Maia setelah itu. Aku memakai nama mereka hanya agar lebih menjelaskan masalah takdir bagi 3 pihak: ayah, ibu dan anak sebagai tiga pihak yang terlibat langsung dalam peristiwa perjodohan antara dua insan manusia berikut takdir mereka masing-masing. Kalau bingung silahkan berkomentar!
Kita ini tidak pernah lepas dari takdir. Kita lari dari satu takdir menuju takdir lain. Harapan semua orang adalah selalu melompat dari balok takdir satu ke balok takdir lain yang lebih baik. Betapapun kita berusaha, berhasil atau gagal itu adalah bagian dari takdir juga. Allah lebih tahu apa yang lebih baik dan mana yang buruk buat hambaNya. Baca juga al Baqarah: 216.
Maha Besar Allah, yang merancang skenario kolosal dengan puluhan miliar tokoh dan kesemuanya mendapatkan peran dan ceritanya dengan rinci. Kita hanya satu dari mereka dan tidak pernah ada urusan yang di sia-siakanNya, bukan?
Kini,Romeo telah memilih takdirnya. Qais semestinya tidak usah menjadi Majnun kalau saja ia tahu ada takdir yang lain.
Wallahu a'lam.
Mengenal Gelombang Otak

Otak kita setiap saat menghasilkan impuls-impuls listrik. Aliran listrik ini, yang lebih dikenal sebagai gelombang otak, diukur dengan dua cara yaitu amplitudo dan frekuensi. Amplitudo adalah besarnya daya impuls listrik yang diukur dalam satuan micro volt. Frekuensi adalah kecepatan emisi listrik yang diukur dalam cycle per detik, atau hertz. Frekuensi impuls menentukan jenis gelombang otak yaitu beta, alfa, theta, dan delta. Jenis atau kombinasi dan jenis gelombang otak menentukan kondisi kesadaran pada suatu saat.
Pandangan keliru yang selama ini ada dalam benak banyak orang adalah otak hanya menghasilkan satu jenis gelombang pada suatu saat. Saat kita aktif berpikir kita berada pada gelombang beta. Kalau kita rileks kita berada di alfa. Kalau sedang ngelamun, kita di theta. Dan, kalau tidur lelap kita berada di delta. Pandangan itu salah. Hasil penelitian menunjukkan bahwa pada suatu saat, pada umumnya, otak kita menghasilkan empat jenis gelombang secara bersamaan, namun dengan kadar yang berbeda. Dalam kondisi tertentu, misalnya meditasi, kita dapat secara sadar mengatur jenis gelombang otak mana yang ingin kita hasilkan.
Setiap orang punya pola gelombang otak yang unik dan selalu konsisten. Keunikan itu tampak pada komposisi ke empat jenis gelombang pada saat tertentu. Komposisi gelombang otak itu menentukan tingkat kesadaran seseorang. Meskipun pola gelombang otak ini unik, tidak berarti akan selalu sama sepanjang waktu. Kita dapat secara sadar, dengan teknik tertentu, mengembangkan komposisi gelombang otak agar bermanfaat bagi diri kita.
Gelombang Beta
Beta adalah gelombang otak yang frekuensinya paling tinggi. Beta dihasilkan oleh proses berpikir secara sadar. Beta terbagi menjadi tiga bagian, yaitu beta rendah 12-15 Hz, beta 16-20 Hz, dan beta tinggi 21-40 Hz. Kita menggunakan beta untuk berpikir, berinteraksi, dan menjalani kehidupan sehari-hari.
Meskipun beta sering kali “menghilang” saat kita memfokuskan pikiran, beta tetap dibutuhkan agar kita dapat menyadari dan ia di luar diri kita. Bersama dengan gelombang lainnya, beta sangat dibutuhkan dalam proses kreatif. Tanpa beta, semua kreativitas yang merupakan hasil pikiran bawah sadar akan tetap terkunci di bawah sadar, tanpa bisa terangkat ke permukaan dan disadari oleh pikiran.
Walaupun beta merupakan satu komponen yang sangat penting dalam kondisi kesadaran kita, bila kita beroperasi semata-mata hanya dengan jenis gelombang ini, tanpa didukung oleh frekuensi yang lebih rendah, maka akan menghasilkan satu kehidupan yang dipenuhi dengan kekhawatiran, ketegangan, dan proses berpikir yang tidak fokus.
Gelombang Alfa
Alfa adalah jenis gelombang yang frekuensinya sedikit lebih lambat dibandingkan beta, yaitu 8-12 Hz. Alfa berhubungan dengan kondisi pikiran yang rileks dan santai. Dalam kondisi alfa, pikiran dapat melihat gambaran mental secara sangat jelas dan dapat merasakan sensasi dengan lima indra dan apa yang terjadi atau dilihat dalam pikiran. Alfa adalah pintu gerbang bawah sadar.
Pada tahun 60-an dan 70-an, alfa sangat populer dan diklaim sebagai gelombang otak paling penting, yang merupakan kunci untuk mencapai kesadaran yang lebih tinggi. Penelitian dengan menggunakan mind technology modern yang dilakukan oleh banyak pakar terkemuka, antara lain Maxwell Cade dan Anna Wise, membuktikan, bahwa alfa bukanlah jenis gelombang terpenting.
Manfaat alfa yang utama dan paling penting adalah sebagai jembatan penghubung antara pikiran sadar dan bawah sadar. Alfa memungkinkan kita untuk menyadari keberadaan mimpi dan keadaan meditasi terdalam yang kita capai. Tanpa alfa, kita tidak akan dapat mengingat mimpi atau meditasi yang sangat dalam, saat kita terbangun atau selesai bermeditasi.
Gelombang Theta
Theta adalah gelombang otak pada kisaran frekuensi 4-8 Hz, yang dihasilkan oleh pikiran bawah sadar (subconsciaus mind). Theta muncul saat kita bermimpi dan saat terjadi REM (rapid eye movement). Pikiran bawah sadar menyimpan memori jangka panjang kita dan juga merupakan gudang inspirasi kreatif. Selain itu, pikiran bawah sadar juga menyimpan materi yang berasal dan kreativitas yang ditekan atau tidak diberi kesempatan untuk muncul ke permukaan dan materi psikologis yang ditekan. Meskipun kita dapat masuk ke theta dan mengakses berbagai materi yang tersimpan di sana, bila tidak dibantu dengan gelombang alfa dan beta, semua materi itu tidak dapat dikenali oleh pikiran sadar. Semua materi yang berhubungan dengan emosi, baik itu emosi positif maupun negatif, tersimpan dalam pikiran bawah sadar. Emosi-emosi negatif yang tidak terotasi dengan baik, setelah masuk ke pikiran bawah sadar, akhirnya menjadi beban psikologis yang menghambat kemajuan diri seseorang.
Bila kita berhasil masuk ke kondisi theta, kita akan mengalami kondisi meditatif yang sangat dalam. Semua pengalaman meditatif yang selama ini dicari oleh orang yang melakukan praktik meditasi, misalnya keheningan, ketenangan, kedalaman, dan puncak kebahagiaan, dirasakan di dalam theta. Theta adalah “puncak” di dalam “pengalaman puncak”. Saat komponen gelombang lainnya berada dalam takaran yang pas, bersama dengan theta, kita dapat merasakan pengalaman “ah-ha”. Saat kita ingin mengobati dan menyembuhkan tubuh atau pikiran, kita harus masuk ke theta agar dapat mencapai hasil maksimal.
Gelombang Delta
Delta adalah gelombang otak yang paling lambat, pada kisaran frekuensi 0,1-4 Hz, dan merupakan frekuensi dan pikiran nirsadar (unconsciaus mind). Pada saat kita tidur lelap, otak hanya menghasilkan gelombang delta agar kita dapat istirahat dan memulihkan kondisi fisik. Pada orang tertentu, saat dalam kondisi sadar, delta dapat muncul bersama dengan gelombang lainnya. Dalam keadaan itu, delta bertindak sebagai “radar’ yang mendasari kerja intuisi, empati, dan tindakan yang bersifat insting. Delta juga memberikan kebijakan dengan level kesadaran psikis yang sangat dalam.
Gelombang delta sering tampak dalam diri orang yang profesinya bertujuan membantu orang lain. Orang yang perlu memahami kondisi mental, psikologis, atau emosi orang lain. Orang yang berprofesi sebagai “penyembuh” dan orang yang sangat mengerti orang lain biasanya mempunyai gelombang delta dalam kadar yang tinggi. Delta muncul tidak hanya saat kita memperhatikan orang lain, namun juga muncul saat kita berusaha mengerti ide atau konsep, objek atau seni, atau apa saja yang membutuhkan kesadaran nirsadar yang dalam.
Delta juga disebut dengan orienting response karena berfungsi mengarahkan kita dalam hal waktu dan ruang. Delta berfungsi sebagai sistem peringatan dini untuk merasakan adanya ancaman atau bahaya. Delta memungkinkan kita untuk “melihat” informasi yang tidak dapat ditangkap oleh pikiran sadar. Dari sudut pandang negatif, delta juga dapat digunakan untuk kondisi berhati-hati yang berlebihan (hypervigilance). Sikap hati-hati yang berlebihan, atau lebih tepat disebut dengan kepekaan, berguna untuk anak yang mengalami abuse untuk memastikan kondisi emosi orangtuanya. Dari pengamatannya, anak itu akan tahu apakah orangtuanya akan memukul atau menghukum dirinya. Masalah akan timbul bila anak bertumbuh dengan delta yang berlebihan dan secara terus-menerus “membaca” kondisi emosi di lingkungan sekitarnya dan berusaha mengendalikan kondisi ini demi keselamatan hidupnya.
Orang dewasa yang terlalu peka, sebagai hasil dan mengembangkan sikap berhati-hati secara berlebihan sejak kecil dapat secara positif mengarahkan kepekaannya ini pada kemampuan persepsi psikis dan penyembuhan. Hal itu dapat dicapai karena radar delta yang telah sangat berkembang dalam dirinya. Delta juga dihubungkan dengan konsep collective unconscious.
Gelombang beta, alfa theta, dan delta adalah komponen pembentuk kesadaran kita. Keempat gelombang itu beropenasi dalam satu jalinan komposisi rumit yang menentukan kondisi kesadaran kita dalam suatu saat.
Pikiran Bawah Sadar
Kita memiliki 2 jenis pikiran, pikiran sadar dan pikiran bawah sadar yang sebenarnya merupakan suatu kesatuan. Kedua pikiran ini saling bekomunikasi dan bekerja dalam waktu bersamaan, secara paralel.
Pikiran sadar memiliki empat fungsi utama, yaitu
1. Mengidentifikasi informasi yang masuk
2. Membandingkan
3. Menganalisis
4. Memutuskan
Saya tidak menjelaskan keempat fungsi utama pikiran sadar di atas. Bukankah setiap hari Anda mengalami proses pikiran tersebut? Saya yakin Anda sudah faham. Kita langsung fokus ke penjelasan pikiran bawah sadar. Milton Erickson, seorang maestro hypnotherapy, mengutarakan hasil pengamatannya terhadap pikiran bawah sadar sebagai berikut.
1. Kemampuan pikiran bawah sadar terpisah dan pikiran sadar
Pikiran bawah sadar bekerja terpisah dari pikiran sadar. Meskipun pikiran sadar dan bawah sadar bekerja secara paralel, proses kesadaran dan proses berpikir yang berlangsung pada masing-masing pikiran serta respons yang diberikan adalah dua hal yang berbeda. Kedua pikiran ini bekerja saling mempengaruhi.
Pikiran bawah sadar dapat mendengar atau melihat hal- hal yang tidak tertangkap oleh pikiran sadar. Pikiran bawah sadar bisa memikirkan satu hal yang berbeda dengan yang dipikirkan oleh pikiran sadar. Pikiran bawah sadar memiliki ketertarikan pada hal yang ia sukai, meski hal itu belum tentu menarik bagi pikiran sadar. Pikiran bawah sadar dapat mengendalikan aktivitas fisik tanpa disadari oleh pikiran sadar dan dapat mengungkapkan ide atau pemikiran yang berada di luar jangkauan persepsi pikiran sadar.
Biasanya, walaupun tidak berarti selalu, proses dan aktivitas pikiran bawah sadar mendukung atau meneruskan kegiatan dan keinginan pikiran sadar. Pada kondisi tertentu, pikiran bawah sadar dapat bertindak mandiri, lepas dan pengaruh pikiran sadar, mengungkapkan keinginannya, dan melakukan suatu tindakan yang tidak berhubungan dengan proses berpikir yang terjadi di pikiran sadar.
2. Pikiran bawah sadar adalah gudang penyimpanan informasi
Sering kali, orang sebenarnya mempunyai begitu banyak pengetahuan, tetapi mereka tidak tahu jika mereka tahu. Pengetahuan yang dimaksud bisa meliputi informasi yang berhubungan dengan fisik, emosi, psikologis, atau intelektual yang dulunya diperoleh secara sadar, melalui suatu upaya yang keras, namun setelah itu, pengetahuan itu seakan akan hilang karena telah berada di luar wilayah pengamatan pikiran sadar.
Satu contoh sederhana adalah kemampuan berjalan tegak. Kemampuan ini adalah suatu kecakapan yang diperoleh melalui proses pembelajaran yang tidak mudah. Orang dewasa, walaupun mereka melakukan aktivitas “berjalan” setiap hari, mereka tidak sadar bahwa mereka bisa karena mereka telah berhasil mempelajari cara berjalan saat mereka masih kecil. Contoh lain adalah orang dapat belajar tanpa sadar bahwa mereka telah belajar sesuatu dan dapat menggunakan apa yang telah mereka pelajari secara otomatis. Jenis pembelajaran ini dapat terjadi karena pikiran bawah sadar merupakan sistem kesadaran dan pemrosesan informasi yang paralel dan terpisah dari pikiran sadar.
3. Pikiran bawah sadar adalah potensi yang belum digunakan
Setiap manusia normal terlahir dengan membawa sistem saraf dan fisik yang rumit yang mampu melihat, mengamati, memikirkan, dan memberikan respons. Namun, dalam proses tumbuh-kembang seorang manusia, hanya sebagian kecil saja dari seluruh potensi untuk mengamati, mengerti, dan memberikan respons yang berkembang sepenuhnya dalam pikiran sadar. Semua potensi yang belum tergali dan berkembang berada di luar kendali pikiran sadar dan masuk ke dalam kendali pikiran bawah sadar.
Kemampuan pikiran bawah sadar jauh melebihi pikiran sadar dalam hal kemampuan persepsi, konseptual, emosi, dan respons. Pikiran bawah sadar berisi segala hal yang diabaikan, ditolak, atau tidak diperhatikan oleh pikiran sadar ditambah dengan semua hal yang ada di pikiran sadar. Pikiran bawah sadar dapat mengakses dan menggunakan segala sesuatu yang ada di pikiran sadar, sedangkan pikiran sadar umumnya tidak dapat menjangkau isi dan potensi pikiran bawah sadar.
4. Pikiran bawah sadar sangat cerdas
Pikiran bawah sadar jauh lebih cerdas, bijaksana, dan cepat daripada pikiran sadar. Pikiran bawah sadar dapat menjangkau lebih banyak informasi daripada pikiran sadar dan dapat menganalisis dan meninjau ulang suatu informasi tanpa pengaruh bias dan rasa bangga, prasangka, atau pengharapan. Dengan kata lain, pikiran bawah sadar mewakili suatu potensi intelektual yang berfungsi pada kapasitas puncak.
Meskipun pikiran bawah sadar sangat cerdas, hal itu tidak berarti ia tidak pernah berbuat salah. Kadang-kadang, pikiran bawah sadar bisa menarik satu kesimpulan yang keliru atau tidak logis karena terpengaruh oleh keterbatasan yang berhubungan dengan persepsi dan fisik.
5. Pikiran bawah sadar bersifat sangat sadar
Salah satu aspek paling penting, yang bersifat paradoks, dan pikiran bawah sadar yaitu pikiran bawah sadar tidak selalu bersifat tidak sadar. Sebaliknya, pikiran bawah sadar sebenarnya sangat sadar dan responsif terhadap setiap kejadian. Pikiran bawah sadar dikatakan tidak sadar dalam pengertian bahwa pikiran sadar tidak sadar akan keberadaan, kegiatan atau operasi, upaya komunikasi, dan pengaruh pikiran bawah sadar terhadap pikiran, persepsi, dan perilaku. Pikiran bawah sadar diberi nama demikian karena (pikiran sadar) kita tidak sadar akan keberadaan pikiran ini.
Saat dua orang berinteraksi, pikiran bawah sadar mereka saling sibuk mengamati kegiatan bawah sadar lawan bicaranya, tanpa pikiran sadar mereka tahu apa yang sedang terjadi. Komunikasi bawah sadar mempunyai efek pengaruh yang sama kuat, bahkan bisa lebih kuat daripada pengaruh komunikasi dengan pikiran sadar.
6. Pikiran bawah sadar mengamati dan memberikan respons dengan jujur
Bias, prasangka, penghakiman, pengharapan, pengelompokkan persepsi, dan kerangka berpikir konseptual adalah sifat pikiran sadar. Pikiran bawah sadar terbebas dan pengaruh pengaruh di atas dan mampu menghasilkan kesadaran realita yang lebih objektif. Persepsi dan pengetahuan pikiran bawah sadar tentang realita bersifat langsung, tidak bias, dan apa adanya. Pikiran bawah sadar menyerap dan mengerti realita berdasarkan pengalaman nyata sebagaimana adanya, tanpa harus melewati proses pemberian makna atau penjelasan yang rumit, seperti yang dilakukan pikiran sadar. Pikiran bawah sadar tidak menyaring atau mendistorsi suatu informasi agar bisa sesuai dengan aturan atau acuan berpikir tertentu.
Kemampuan persepsi, pemahaman, dan respons pikiran bawah sadar sama dengan yang ditunjukkan oleh seorang anak kecil yang masih polos, yang belum memiliki prasangka, bias, pengharapan, dan aturan yang kaku seperti orang dewasa.
7. Pikiran bawah sadar bersifat seperti anak kecil
Anak-anak lebih banyak berhubungan atau menggunakan pikiran bawah sadar mereka daripada orang dewasa. Pada saat masih kecil, pikiran sadar anak belum berkembang sepenuhnya sehingga anak perlu mengakses pikiran bawah sadar mereka untuk membantu mereka belajar dan berkembang. Dengan demikian, sifat dan perilaku anak mencerminkan pikiran bawah sadar orang dewasa. Anak-anak sering kali lebih responsif terhadap proses bawah sadar dan lebih awas dalam pengamatan mereka dibandingkan dengan orang dewasa.
8. Pikiran bawah sadar adalah sumber emosi
Emosi sering kali muncul secara mendadak, tidak diinginkan, dan tidak dapat dimengerti oleh pikiran sadar. Secara umum, emosi muncul dan pikiran bawah sadar. Emosi adalah bentuk ekspresi yang mencerminkan perasaan atau reaksi pikiran bawah sadar terhadap suatu situasi, yang berhubungan dengan kepribadian individu.
Emosi bersifat tidak logis, tidak rasional, dan tidak sadar. Emosi bersifat alamiah dan merupakan satu bentuk komunikasi bawah sadar yang sangat bermanfaat. Emosi memberitahu bagaimana perasaan kita terhadap sesuatu, meskipun kita tidak sadar atas apa yang kita rasakan.
9. Pikiran bawah sadar bersifat universal
Proses dan sifat kerja pikiran bawah sadar satu orang dan yang lain pada umumnya sama, tidak terpengaruh oleh kebangsaan, latar belakang budaya, atau sejarah. Pikiran bawah sadar seseorang dapat berkomunikasi secara efektif dengan pikiran bawah sadar orang lain melebihi kemampuan pikiran sadar.
Pikiran bawah sadar sebenarnya merupakan suatu gambaran fakta bahwa semua orang, pada awalnya, hanyalah manusia biasa, pada saat dilahirkan, yang sama-sama membawa kemampuan mental dan fisik yang dapat dikembangkan dan juga membawa kemampuan belajar alamiah.
Isi pikiran bawah sadar setiap orang tentunya berbeda, tergantung pada pengalaman, lingkungan, dan hasil pembelajaran individu tersebut. Namun, bentuk, struktur, atau pola respons yang bersifat mendasar pada setiap pikiran bawah sadar manusia sangat mirip satu dengan yang lain. Bisa dikatakan bahwa manusia pada dasarnya sangat berbeda, namun juga sangat mirip.
Wednesday, 29 April 2009
ngeblog pake handphone (hp), sungguh mengenaskan
Halo sobat skalian, wah kita brjumpa lagi nh di blog tutorial ini, tapi kali ini saya tdk memberikan tutorial tapi seputar kesengsaraan ngeblog saya pake handphone (hp) yang akhr2 ini saya lakukan seperti saat posting postingan ini.. Uh.. Ditambah lagi tadi sempet mengulang ketikan ala ibu jari menari, hehehe.. Gara2 sempet kepencet tombol delete kelamaan.. Uhghh..
Tapi udah dulu yah sob, ibu jari saya udah pegel bnget nh. Hehe.. Dan seperti biasa kalo ingin bertanya seputar nge blog me ngeblog silahkan tanya kan aja yah di komentar dibawah ini, karena saya akan tetep meng update blog dengan tutorial2 yang sipz dan keren.. Ditunggu ajah yah, n bye kawan..
Tapi udah dulu yah sob, ibu jari saya udah pegel bnget nh. Hehe.. Dan seperti biasa kalo ingin bertanya seputar nge blog me ngeblog silahkan tanya kan aja yah di komentar dibawah ini, karena saya akan tetep meng update blog dengan tutorial2 yang sipz dan keren.. Ditunggu ajah yah, n bye kawan..
ngeblog pake handphone (hp), sungguh mengenaskan
Halo sobat skalian, wah kita brjumpa lagi nh di blog tutorial ini, tapi kali ini saya tdk memberikan tutorial tapi seputar kesengsaraan ngeblog saya pake handphone (hp) yang akhr2 ini saya lakukan seperti saat posting postingan ini.. Uh.. Ditambah lagi tadi sempet mengulang ketikan ala ibu jari menari, hehehe.. Gara2 sempet kepencet tombol delete kelamaan.. Uhghh..
Tapi udah dulu yah sob, ibu jari saya udah pegel bnget nh. Hehe.. Dan seperti biasa kalo ingin bertanya seputar nge blog me ngeblog silahkan tanya kan aja yah di komentar dibawah ini, karena saya akan tetep meng update blog dengan tutorial2 yang sipz dan keren.. Ditunggu ajah yah, n bye kawan..
Tapi udah dulu yah sob, ibu jari saya udah pegel bnget nh. Hehe.. Dan seperti biasa kalo ingin bertanya seputar nge blog me ngeblog silahkan tanya kan aja yah di komentar dibawah ini, karena saya akan tetep meng update blog dengan tutorial2 yang sipz dan keren.. Ditunggu ajah yah, n bye kawan..
Sunday, 1 March 2009
cara membuat teks area ( text area )
Untuk kesempatan kali ini saya akan memberikan contoh cara pembuatan text area ( teks area ) untuk blogspot anda. Tapi sebelum saya langsung memberikan contoh pembuatannya.. ada baiknya saya akan jelaskan terlebih dahulu kegunaan dari teks area ini. Jika anda adalah seorang bloger, maksudnya orang yang suka ngeblog dan sering melakukan blog walking ( keliling keliling dari satu blog ke blog lainnya ) sangat cocok sekali jika anda menyiapkan teks area di blog anda yang berisikan tag pembentuk link yang menuju blog anda... tau kan cara membuat link..? kalo belom tau silahkan klik disini dan anda pelajari sebentar.. Nah setelah anda bisa membuat link buat blog anda sendiri ada baiknya jika link blog anda yang barusan anda buat anda suguhkan kepada pengunjung blog anda dengan menggunakan teks area ini, pasti dech pengunjung blog anda yang ingin bertukeran link dengan anda pasti tidak terasa kerepotan karena sudah anda siapakan. Nah udah taukan apa manfaat teks area..?, contoh yang barusan saya gambarkan barusan adalah cuman sebagai contoh aja dan bisa anda kembangkan dan manfaatkan lebih lanjut lagi
Sekarang waktunya kita untuk praktek, langsung aja lihat contoh yang pertama dibawah ini, karena dalam pembuatan teks area nantinya akan saya bagi menjadi beberapa tingkatan yang mempunya functional tersendiri.. ni dia contohnya..
Hasilnya akan nampak seperti dibawah ini
Keterangan :
rows = tinggi
cols = lebar
Hasilnya akan nampak sperti dibawah ini.
Hasilnya akan nampak seperti dibawah ini..., anda klik aja di bagian teksareanya
Hasilnya akan nampak dibawah ini, letakkan mouse anda di wilayah teks area dibawah ini agar menegetahui efek hightlight nya..
Oiya.. hampir lupa, kalo ingin merubah lebar dan tinggi tampilan textarea silahakn ganti angka angka pada kata " rows " dan " cols "
Nah contoh contoh diatas adalah sebagai contoh aja dan sebagai pembelajaran dan bisa anda kembangkan sendiri sesui dengan fungsional nya..
Moga aja membantu yah, n kalo masih bingung atau bahkan sudah berhasil membuat ini dan ingin koar koar disini juga silahkan.. monggo mas.. hehehe..
Sampai jumpai di tutorial tutorial yang menarik lainnya di http://master-blog-ayiek.blogspot.com ini
Sekarang waktunya kita untuk praktek, langsung aja lihat contoh yang pertama dibawah ini, karena dalam pembuatan teks area nantinya akan saya bagi menjadi beberapa tingkatan yang mempunya functional tersendiri.. ni dia contohnya..
- Pembuatan teks area standar / default
<textarea rows="5" cols="25" style="display: inline;" name="txt">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini</textarea>
Hasilnya akan nampak seperti dibawah ini
Keterangan :
rows = tinggi
cols = lebar
- Pembuatan textarea dengan button / tombol higtlight
<center><form name="copy"><input value="Klik Tandai" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/><textarea rows="5" cols="25" style="display: inline;" name="txt">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini</textarea></form></center>
Hasilnya akan nampak sperti dibawah ini.
- Pembuatan teksarea dengan onclick hightligt
<textarea rows="5" cols="25" style="display: inline;" name="txt" onclick="this.focus();this.select()">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini</textarea>
Hasilnya akan nampak seperti dibawah ini..., anda klik aja di bagian teksareanya
- pembuatan textarea sensitif hightlight
<textarea rows="5" cols="25" onfocus="this.select()" style="display: inline;" onmouseover="this.focus()" name="txt" onclick="this.focus();this.select()">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini</textarea>
Hasilnya akan nampak dibawah ini, letakkan mouse anda di wilayah teks area dibawah ini agar menegetahui efek hightlight nya..
Oiya.. hampir lupa, kalo ingin merubah lebar dan tinggi tampilan textarea silahakn ganti angka angka pada kata " rows " dan " cols "
Nah contoh contoh diatas adalah sebagai contoh aja dan sebagai pembelajaran dan bisa anda kembangkan sendiri sesui dengan fungsional nya..
Moga aja membantu yah, n kalo masih bingung atau bahkan sudah berhasil membuat ini dan ingin koar koar disini juga silahkan.. monggo mas.. hehehe..
Sampai jumpai di tutorial tutorial yang menarik lainnya di http://master-blog-ayiek.blogspot.com ini
Wednesday, 25 February 2009
Skin mp3 player generator untuk blog dan friendster
Haloo sbat semuanya... gimana nih kabar.... wah maaf saya dah hampir sebulan ga update blog ini @ tutorial ngeblog di blogger blogspot karena alasan klasik. yaitu males, tapi malesnya nih karena beralasan yaitu suasanya pikiran yang ga bisa di ajak kompromi... halah... sama aja kang... ALASANN!!! hehehhe. Tapi saat ini saya akan membawa kabar gembira buat sobat sekalian yang suka menmpercantik atau menghiasi blognya dengan background suara musik.. yah lebih tepatnya telah ada fasilitas baru di blog http://ex-musik.blogspot.com yaitu fasilitas untuk memilih skin mp3 player dengan cara mengenerate alamat url file mp3 yang sudah di sediakan di blog tersebut atau bahkan anda bisa mengambil url file mp3 dari website lainnya, misalkan dari website file mp3 hosting ziddu.com atau 4share.com dan banyak lagi web file hosting lainnya.. wah enak ga... coba aja dan tengok... hehehehe... Tapi untuk saat ini masih cuman ada beberapa pilihan skin player yaitu tepatnya lima jenis skin (tampilan)... tapi insya allah akan di kembangkan lagi kalo ada waktu yang mendukung.. So ga usah bingung bingung lagi mngenai penjelasan diatas, jikalau masih bingung anda langsung aja kunjungi blognya di sini, kemudianh baca panduannya disana.. oke.. kalo masih bingung juga, tanyakan aja sekalian sama adminya.. dengan senang hati pasti adminnya mengajari cara menggunakan widget Skin mp3 player generator tersebut..
Sunday, 1 February 2009
cara membuat slideshow untuk blogspot dengan javascript
Haloo sobat sobat semuanya.... gimana nih kabarnya... untuk kali ini saya akan membahas " cara membuat slideshow untuk blogspot dengan javascript " , tapi sebelumnya sorry nih saya baru posting tutorial lagi setelah absen nggak bikin postingan tutorial berminggu minggu, karena apa ko saya absen..? mau tau..? iya nih kemaren saya dapet proyek bikin web berbasis blog dan baru 2 hari ini sudah mulai up, kalo mau tau nih alamatnya http://mizarmusik.com web tersebut sengaja saya buat dengan CMS wordpress karena si ouners web tersebut ingin webnya mudah di indeks oleh mesin pencari yang mana akan membawa dampak keuntungan jika ada banyak pengunjung dan berminat dengan produk/jasa yang di tawarkan oleh ouners web tersebut... Trus kenapa ko pake wordpress..? anda tau sendiri kan CMS wordpres adalah CMS yang powerful dan SEO friendly.. nah selain ouners web tersebut bisa mempromosikan bisnisnya, tetapi mereka juga bisa mendokumentasikan hal hal penting seperti even2 yang pernah dilaksanan perusahaan tersebut lewat postingan blog dan juga bisa membantu men seo kan web mereka melalui postingan postingan yang mereka dokumentasikan ( anda tau sendirikan kalo mesin pencari suka web / blog yang update! )
Trus sekarang apa kaitannya dengan tutorial yang mau dibahas sekarang ini, iya sih nggak begitu terkait.. tapi anda bisa melihat contoh slideshow di web yang saya garap kmaren yang mana pembuatannya akan saya bahas di tutorial ini.. ( ada kan kaitannya.. hehehe )
Dan ga panjang lebar nih, langsung aja lihat contoh scriptnya dan jika berminat langsung aja dicopy lalu praktekkan kedalam halaman blog anda, dan jangan lupa mengikuti langkah2nya dibawah ini agar nggak ngawur... hehehe...
Kita lihat seksama scriptnya dibawah ini..
Langkah pertama anda copy style cssnya dibawah ini, kemudian masukkan kedalam bagian style css blog anda jika bingung silahkan cari code seperti ini
]]></b:skin> lalu taruh tepat diatasnya code tersebut...
Kemdian setelah anda memasng code css nya kemudian langkah selanjutnya adalah anda copy script javascript dibawah ini, lalu masukkan tepat dibawah code ]]></b:skin> ( ingat..! dibawahnya code ]]></b:skin>, kalo yang css nya ditaruh di atasnya.. pokoknya kebalikannya ) ini nih scriptnya, langsung copy aja
Kemudian untuk tahap yang terakhir, anda masukkan code dibawah ini kedalam sidebar blog anda... dengan cara menambahkan gadget baru yang pilihan html/javascript ... tapi sebelumnya ada beberapa yang musti anda ganti dan ikuti aja keterangan dibawahnya..
Keterangan :
pada script diatas ada yang perlu anda ganti yaitu alamat poto yang akan anda tampilkan.. yang kebetulan alamat poto diatas aadalah alamat poto saya... hehhe... ganti aja dengan alamat poto milik anda, dan jika perlu ubah juga ukuran width/lebar dan height/tinggi nya.. ( cari aja alamat poto ditas yang ber ekstensi .jpg .. ok )
Nah setelah selesai semua, silahkan lihat hasilnya... jika di bagian sidebar blog anda tampilan menu slideshownya kelihatan nggak rata, itu karena di bagian sidebar blog anda ada perintah <:ul> dan <li> , nah jika anda pengen tampil rata anda cari code css side bar ul dan li nya kemudian anda hapus... ( tapi pikir yang matang sebelum anda menghapusnya, tapi saya nggak akan kasih penjelasannya kenapa yang pasti menurut saya sih ga papa... hehehe ) hapus aja yang seperti ini
nah moga berhasil yah.. kalo masih bingung dan ragu silahkan ditanyakan aja yah... n kalo bahkan udah sukses dan mentereng silahkan kasih kabar juga yah... biar sama sama puas... hehehe...
gud luk...
Trus sekarang apa kaitannya dengan tutorial yang mau dibahas sekarang ini, iya sih nggak begitu terkait.. tapi anda bisa melihat contoh slideshow di web yang saya garap kmaren yang mana pembuatannya akan saya bahas di tutorial ini.. ( ada kan kaitannya.. hehehe )
Dan ga panjang lebar nih, langsung aja lihat contoh scriptnya dan jika berminat langsung aja dicopy lalu praktekkan kedalam halaman blog anda, dan jangan lupa mengikuti langkah2nya dibawah ini agar nggak ngawur... hehehe...
Kita lihat seksama scriptnya dibawah ini..
Langkah pertama anda copy style cssnya dibawah ini, kemudian masukkan kedalam bagian style css blog anda jika bingung silahkan cari code seperti ini
]]></b:skin> lalu taruh tepat diatasnya code tersebut...
.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/
}
.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
}
.indentmenu ul li a:hover{
background:red;
}
.indentmenu ul li a:visited{
color: blue;
}
.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#000000;
}
.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/
}
.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
}
.indentmenu ul li a:hover{
background:red;
}
.indentmenu ul li a:visited{
color: blue;
}
.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#000000;
}
.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}
Kemdian setelah anda memasng code css nya kemudian langkah selanjutnya adalah anda copy script javascript dibawah ini, lalu masukkan tepat dibawah code ]]></b:skin> ( ingat..! dibawahnya code ]]></b:skin>, kalo yang css nya ditaruh di atasnya.. pokoknya kebalikannya ) ini nih scriptnya, langsung copy aja
<script type='text/javascript'>
//<![CDATA[
//** Tab Content script v2.0- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Updated Oct 7th, 07 to version 2.0. Contains numerous improvements:
// -Added Auto Mode: Script auto rotates the tabs based on an interval, until a tab is explicitly selected
// -Ability to expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted
// -Ability to dynamically select a tab either based on its position within its peers, or its ID attribute (give the target tab one 1st)
// -Ability to set where the CSS classname "selected" get assigned- either to the target tab's link ("A"), or its parent container
//** Updated Feb 18th, 08 to version 2.1: Adds a "tabinstance.cycleit(dir)" method to cycle forward or backward between tabs dynamically
//** Updated April 8th, 08 to version 2.2: Adds support for expanding a tab using a URL parameter (ie: http://mysite.com/tabcontent.htm?tabinterfaceid=0)
////NO NEED TO EDIT BELOW////////////////////////
function ddtabcontent(tabinterfaceid){
this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
this.enabletabpersistence=true
this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array
this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)
this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")
}
ddtabcontent.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}
ddtabcontent.setCookie=function(name, value){
document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
}
ddtabcontent.prototype={
expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers
this.cancelautorun() //stop auto cycling of tabs (if running)
var tabref=""
try{
if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
tabref=document.getElementById(tabid_or_position)
else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr
tabref=this.tabs[tabid_or_position]
}
catch(err){alert("Invalid Tab ID or position entered!")}
if (tabref!="") //if a valid tab is found based on function parameter
this.expandtab(tabref) //expand this tab
},
cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )
if (dir=="next"){
var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0
}
else if (dir=="prev"){
var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1
}
if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function
this.cancelautorun() //stop auto cycling of tabs (if running)
this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])
},
setpersist:function(bool){ //PUBLIC function to toggle persistence feature
this.enabletabpersistence=bool
},
setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")
this.selectedClassTarget=objstr || "link"
},
getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to
return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref
},
urlparamselect:function(tabinterfaceid){
var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\d+)", "i")) //check for "?tabinterfaceid=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},
expandtab:function(tabref){
var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
//Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/s+/, "")+"," : ""
this.expandsubcontent(subcontentid)
this.expandrevcontent(associatedrevids)
for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
}
if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array
},
expandsubcontent:function(subcontentid){
for (var i=0; i<this.subcontentids.length; i++){
var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)
subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value
}
},
expandrevcontent:function(associatedrevids){
var allrevids=this.revcontentids
for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface
//if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it
document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"
}
},
setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)
for (var i=0; i<this.hottabspositions.length; i++){
if (tabposition==this.hottabspositions[i]){
this.currentTabIndex=i
break
}
}
},
autorun:function(){ //function to auto cycle through and select tabs based on a set interval
this.cycleit('next', true)
},
cancelautorun:function(){
if (typeof this.autoruntimer!="undefined")
clearInterval(this.autoruntimer)
},
init:function(automodeperiod){
var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)
var selectedtab=-1 //Currently selected tab index (-1 meaning none)
var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index
this.automodeperiod=automodeperiod || 0
for (var i=0; i<this.tabs.length; i++){
this.tabs[i].tabposition=i //remember position of tab relative to its peers
if (this.tabs[i].getAttribute("rel")){
var tabinstance=this
this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers
this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)
this.tabs[i].onclick=function(){
tabinstance.expandtab(this)
tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
return false
}
if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element
this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/s*,s*/))
}
if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){
selectedtab=i //Selected tab index, if found
}
}
} //END for loop
if (selectedtab!=-1) //if a valid default selected tab index is found
this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)
else //if no valid default selected index found
this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr
if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){
this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
}
} //END int() function
} //END Prototype assignment
//]]>
</script>
//<![CDATA[
//** Tab Content script v2.0- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Updated Oct 7th, 07 to version 2.0. Contains numerous improvements:
// -Added Auto Mode: Script auto rotates the tabs based on an interval, until a tab is explicitly selected
// -Ability to expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted
// -Ability to dynamically select a tab either based on its position within its peers, or its ID attribute (give the target tab one 1st)
// -Ability to set where the CSS classname "selected" get assigned- either to the target tab's link ("A"), or its parent container
//** Updated Feb 18th, 08 to version 2.1: Adds a "tabinstance.cycleit(dir)" method to cycle forward or backward between tabs dynamically
//** Updated April 8th, 08 to version 2.2: Adds support for expanding a tab using a URL parameter (ie: http://mysite.com/tabcontent.htm?tabinterfaceid=0)
////NO NEED TO EDIT BELOW////////////////////////
function ddtabcontent(tabinterfaceid){
this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
this.enabletabpersistence=true
this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array
this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)
this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")
}
ddtabcontent.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}
ddtabcontent.setCookie=function(name, value){
document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
}
ddtabcontent.prototype={
expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers
this.cancelautorun() //stop auto cycling of tabs (if running)
var tabref=""
try{
if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
tabref=document.getElementById(tabid_or_position)
else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr
tabref=this.tabs[tabid_or_position]
}
catch(err){alert("Invalid Tab ID or position entered!")}
if (tabref!="") //if a valid tab is found based on function parameter
this.expandtab(tabref) //expand this tab
},
cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )
if (dir=="next"){
var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0
}
else if (dir=="prev"){
var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1
}
if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function
this.cancelautorun() //stop auto cycling of tabs (if running)
this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])
},
setpersist:function(bool){ //PUBLIC function to toggle persistence feature
this.enabletabpersistence=bool
},
setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")
this.selectedClassTarget=objstr || "link"
},
getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to
return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref
},
urlparamselect:function(tabinterfaceid){
var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\d+)", "i")) //check for "?tabinterfaceid=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},
expandtab:function(tabref){
var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
//Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/s+/, "")+"," : ""
this.expandsubcontent(subcontentid)
this.expandrevcontent(associatedrevids)
for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
}
if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array
},
expandsubcontent:function(subcontentid){
for (var i=0; i<this.subcontentids.length; i++){
var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)
subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value
}
},
expandrevcontent:function(associatedrevids){
var allrevids=this.revcontentids
for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface
//if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it
document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"
}
},
setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)
for (var i=0; i<this.hottabspositions.length; i++){
if (tabposition==this.hottabspositions[i]){
this.currentTabIndex=i
break
}
}
},
autorun:function(){ //function to auto cycle through and select tabs based on a set interval
this.cycleit('next', true)
},
cancelautorun:function(){
if (typeof this.autoruntimer!="undefined")
clearInterval(this.autoruntimer)
},
init:function(automodeperiod){
var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)
var selectedtab=-1 //Currently selected tab index (-1 meaning none)
var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index
this.automodeperiod=automodeperiod || 0
for (var i=0; i<this.tabs.length; i++){
this.tabs[i].tabposition=i //remember position of tab relative to its peers
if (this.tabs[i].getAttribute("rel")){
var tabinstance=this
this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers
this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)
this.tabs[i].onclick=function(){
tabinstance.expandtab(this)
tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
return false
}
if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element
this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/s*,s*/))
}
if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){
selectedtab=i //Selected tab index, if found
}
}
} //END for loop
if (selectedtab!=-1) //if a valid default selected tab index is found
this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)
else //if no valid default selected index found
this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr
if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){
this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
}
} //END int() function
} //END Prototype assignment
//]]>
</script>
Kemudian untuk tahap yang terakhir, anda masukkan code dibawah ini kedalam sidebar blog anda... dengan cara menambahkan gadget baru yang pilihan html/javascript ... tapi sebelumnya ada beberapa yang musti anda ganti dan ikuti aja keterangan dibawahnya..
<div style="float:left;margin:0px 10px 0px 0px;padding:0px;" align="center">
<div id="pettabs" class="indentmenu">
<table align="center"><tr><td align="center"><ul>
<li><a href="#" class="selected" rel="tab1">1</a></li>
<li><a href="#" rel="tab2">2</a></li>
<li><a href="#" rel="tab3">3</a></li>
<li><a href="#" rel="tab4">4</a></li>
<li><a href="#" rel="tab5">5</a></li>
<li><a href="#" rel="tab6">6</a></li>
</ul></td></tr></table>
<br style="clear: left"/>
</div>
<div style="width:300px;text-align:justify;padding: 5px; margin-bottom:0px">
<div id="tab1" class="tabcontent">
<img border="1" width="298" src="http://photos-333.friendster.com/e1/photos/33/30/56030333/1_784012359m.jpg" height="190"/>
</div>
<div id="tab2" class="tabcontent">
<img border="1" width="298" src="http://photos-333.friendster.com/e1/photos/33/30/56030333/1_838057322l.jpg" height="190"/>
</div>
<div id="tab3" class="tabcontent">
<img border="1" width="298" src="http://photos-333.friendster.com/e1/photos/33/30/56030333/1_808221049l.jpg" height="190"/>
</div>
<div id="tab4" class="tabcontent">
<img border="1" width="298" src="http://photos-333.friendster.com/e1/photos/33/30/56030333/1_908127135l.jpg" height="190"/>
</div>
<div id="tab5" class="tabcontent">
<img border="1" width="298" src="http://photos-333.friendster.com/e1/photos/33/30/56030333/1_296293459l.jpg" height="190"/>
</div>
<div id="tab6" class="tabcontent">
<img border="1" width="298" src="http://photos-333.friendster.com/e1/photos/33/30/56030333/1_272794548l.jpg" height="190"/>
</div>
</div>
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(3000)
</script>
</div>
<div id="pettabs" class="indentmenu">
<table align="center"><tr><td align="center"><ul>
<li><a href="#" class="selected" rel="tab1">1</a></li>
<li><a href="#" rel="tab2">2</a></li>
<li><a href="#" rel="tab3">3</a></li>
<li><a href="#" rel="tab4">4</a></li>
<li><a href="#" rel="tab5">5</a></li>
<li><a href="#" rel="tab6">6</a></li>
</ul></td></tr></table>
<br style="clear: left"/>
</div>
<div style="width:300px;text-align:justify;padding: 5px; margin-bottom:0px">
<div id="tab1" class="tabcontent">
<img border="1" width="298" src="http://photos-333.friendster.com/e1/photos/33/30/56030333/1_784012359m.jpg" height="190"/>
</div>
<div id="tab2" class="tabcontent">
<img border="1" width="298" src="http://photos-333.friendster.com/e1/photos/33/30/56030333/1_838057322l.jpg" height="190"/>
</div>
<div id="tab3" class="tabcontent">
<img border="1" width="298" src="http://photos-333.friendster.com/e1/photos/33/30/56030333/1_808221049l.jpg" height="190"/>
</div>
<div id="tab4" class="tabcontent">
<img border="1" width="298" src="http://photos-333.friendster.com/e1/photos/33/30/56030333/1_908127135l.jpg" height="190"/>
</div>
<div id="tab5" class="tabcontent">
<img border="1" width="298" src="http://photos-333.friendster.com/e1/photos/33/30/56030333/1_296293459l.jpg" height="190"/>
</div>
<div id="tab6" class="tabcontent">
<img border="1" width="298" src="http://photos-333.friendster.com/e1/photos/33/30/56030333/1_272794548l.jpg" height="190"/>
</div>
</div>
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(3000)
</script>
</div>
Keterangan :
pada script diatas ada yang perlu anda ganti yaitu alamat poto yang akan anda tampilkan.. yang kebetulan alamat poto diatas aadalah alamat poto saya... hehhe... ganti aja dengan alamat poto milik anda, dan jika perlu ubah juga ukuran width/lebar dan height/tinggi nya.. ( cari aja alamat poto ditas yang ber ekstensi .jpg .. ok )
Nah setelah selesai semua, silahkan lihat hasilnya... jika di bagian sidebar blog anda tampilan menu slideshownya kelihatan nggak rata, itu karena di bagian sidebar blog anda ada perintah <:ul> dan <li> , nah jika anda pengen tampil rata anda cari code css side bar ul dan li nya kemudian anda hapus... ( tapi pikir yang matang sebelum anda menghapusnya, tapi saya nggak akan kasih penjelasannya kenapa yang pasti menurut saya sih ga papa... hehehe ) hapus aja yang seperti ini
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
nah moga berhasil yah.. kalo masih bingung dan ragu silahkan ditanyakan aja yah... n kalo bahkan udah sukses dan mentereng silahkan kasih kabar juga yah... biar sama sama puas... hehehe...
gud luk...
Subscribe to:
Posts (Atom)
Kenapa warga rohingya diusir dari negaranya
Warga Rohingya telah mengalami pengusiran dan diskriminasi di Myanmar selama beberapa dekade. Konflik terhadap etnis Rohingya bersumber da...
-
Lirik dan Kunci Gitar Chord Sezairi - It's You Lirik dan Kunci Gitar Chord Sezairi - It's You Intro : C Em F Fm C here we are unde...
-
Lirik dan Kunci Gitar Demi Kowe - Pendhoza Lirik dan Kunci Gitar Demi Kowe - Pendhoza Intro : Am F G C E Am F G C.. C ...
-
Pada 2018, Google memperbaharui regulasinya dengan mengikutsertakan kecepatan loading di perangkat mobile sebagai indikator SEO. Jadi kecepa...