Gudang Ilmu

Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

Cara Membuat Screenshout Panjang

Akhir-akhir ini saya terlalu sering mempost soal matematika, jadi karena saya sudah bosan ngepost maematika, saya akan ngepost tutorial aja...

Cara mem-print screen atau membuat screenshot itu mudah. Tetapi kalau membuat print screen dan butuh screenshot yang panjang, misalnya untuk langkah-langkah yang tidak dapat dijelaskan bila screenshotnya terlalau kecil, atau layar anda yang terlalu kecil (mungkin jika anda memakai netbook). Cara membuat print screen yang memanjang (kebawah ataupun kesamping) bisa dilakukan dengan program MS Paint (tidak perlulah itu namanya photoshop) (haha)

Pada contoh kali ini kita akan mencoba memprintscreen salah satu post di halaman blog Wordpress saya dengan tanpa sidebar.

Berikut langkah-langkahnya.

1. Buka halaman yang ingin anda screenshoot. Lalu tekan Print Screen. Lalu paste di paint.

2. Jika sudah dicopy ke paint, potong lagi halaman yang benar-benar diperlukan (biasanya yang tidak diperlukan berupa iklan atau sidebar) menggunakan select tool lalu copy. Buka jendela paint yang baru, lalu paste.

3. Berikut ini halaman yang sudah dipotong sesuai keperluan.

4. Buka lagi halaman yang tadi anda screenshoot, lalu scroll mouse. Pastikan minimal 1/5 bagian yang tadi diatas ada (terlihat) sebelum di-printscreen. Lalu printscreen-lah.

5. Buka paint yang berisi halaman yang sudah dipotong tadi, lalu perlebar/perpanjang area kerja dengan men-drag titik biru yang ada dibawah area kerja seperti ini. (jika anda hendak memprintscreen kesamping maka titik biru yang dikanan yang digeser) Drag sekitar 4x (karena mouse mencapai batas bawah dari layar)

6. Buka lembar paint yang lain, paste hasil screenshot, lalu potong sesuai keperluan. Lalu paste di lembar paint yang berisi halaman pertama. Sebelum mempaste pastikan pilihan pemilihan objek terpilih yang bawah.

7. Jika sudah di paste, dalam kondisi terpilih, aturlah supaya halaman perpanjangan menempel pas dengan halaman pertama.

8. Ulangi langkah sebelumnya. Jika terdapat celah berwarna putih seperti gambar dibawah, cukup geser titik biru dibawah/disamping lembar kerja.

9. Berikut ini contoh hasilnya.

Mungkin jika ada hal yang kurang jelas, bisa ditanyakan, tetapi harap sabar karena saya tidak online setiap saat. Oh ya, sebaiknya latar yang digunakan oleh web berwarna polos atau backgroundnya tidak diam ditempat (jika discroll mouse background tidak bergerak). Selamat sabtu malam (wave) (karena malam minggu terlalu mainstream) (lmao)

KLIK DISINI UNTUK BACA SELENGKAPNYA

Perbaikan Emot Plurk (Dan Update)

Emot Plurk yang kemarin ternyata gagal diterapkan. Apa pasal? (aha) Ternyata server gambarnya sudah tidak ada lagi.

Untuk memperbaikinya lakukan langkah berikut.

1. Login Blogger, lalu masuk jendela **Edit HTML**

2. Backup dulu template anda.

3. Cari kode ini:

s = s.replace(/:-\)\)/g, "<img id='new' src='http://forum.plurk-id.org/Smileys/default/joyful.gif' style='border:0; margin:0; padding:0;'/>");
.........**jauh kebawah hingga...**............
s = s.replace(/\(morning\)/g, "<img id='new' src='http://statics.plurk.com/91cf07e3aa16738943fa1147940b48ea.gif' style='border:0; margin:0; padding:0;'/>");

4. Ganti kode yg panjang itu (dari awal hingga akhir) (goodluck) dengan:

s = s.replace(/:-\)\)/g, "<img src='http://statics.plurk.com/ff124032f8cc3a9d43b99e661f8fcb4d.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/:-\)/g, "<img src='http://statics.plurk.com/99ef3957ef779718546752b749bdeabd.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/:-D/g, "<img src='http://statics.plurk.com/3385896779bf1c13188bf92ca516878e.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(lol\)/g, "<img src='http://statics.plurk.com/615f18f7ea8abc608c4c20eaa667883b.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/:-p/g, "<img src='http://statics.plurk.com/2d5e21929e752498e36d74096b1965e1.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(woot\)/g, "<img src='http://statics.plurk.com/13b15aa49358be8f47b58552401d7725.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/;-\)/g, "<img src='http://statics.plurk.com/57c69f50e40a283dcd2e7b56fc191abe.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/:-o/g, "<img src='http://statics.plurk.com/8eb05ca7a32301ba16c9496bcad893c4.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/X-\(/g, "<img src='http://statics.plurk.com/261c0fe4a88417146ae0292d697a5f52.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/:-\(/g, "<img src='http://statics.plurk.com/11eed61b41a3e935773476ac33bc00d9.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/:'-\(/g, "<img src='http://statics.plurk.com/72ddf2c585fe77dd0be731b19624d8cb.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/:-&amp;/g, "<img src='http://statics.plurk.com/2884b8d0e496c06136c86e9c9599edae.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(K\)/g, "<img src='http://statics.plurk.com/9454d15bcaf411b159dcc147ebc3f0eb.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(angry\)/g, "<img src='http://statics.plurk.com/a5ae31c4185bc60cd006650dc10f8147.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(annoyed\)/g, "<img src='http://statics.plurk.com/35b16fc25623670e41c2be6bf8ac38c7.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(wave\)/g, "<img src='http://statics.plurk.com/4afd784c0df9f7a3ceacb92beca543f6.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(bye\)/g, "<img src='http://statics.plurk.com/4afd784c0df9f7a3ceacb92beca543f6.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/B-\)/g, "<img src='http://statics.plurk.com/c1c9870cf653fa3cd103d2eb0f519ccb.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(cozy\)/g, "<img src='http://statics.plurk.com/d1a6f08507b126ec6a215e6a2372e8bb.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(sick\)/g, "<img src='http://statics.plurk.com/5495d64ccb898ca596b061168fa0374a.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(:/g, "<img src='http://statics.plurk.com/b82e3225c92a764d225429a6487d9f04.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(goodluck\)/g, "<img src='http://statics.plurk.com/65271ac2126706bc09d31ff67c525d67.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(griltongue\)/g, "<img src='http://statics.plurk.com/a709dab8ddd26bd222466d31bd549579.png' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(mmm\)/g, "<img src='http://statics.plurk.com/e3baa9d0d78c35e955a6b07c39f530fa.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(hungry\)/g, "<img src='http://statics.plurk.com/0f96595ed7733393b93a3d67aa4f2f4f.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(music\)/g, "<img src='http://statics.plurk.com/919b87048fdf7bd59dae457f4284b20b.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(tears\)/g, "<img src='http://statics.plurk.com/96872d481bbfe87aad5aed976c7de4ee.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(tongue\)/g, "<img src='http://statics.plurk.com/56336bb821c4766001816639e55e5811.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(unsure\)/g, "<img src='http://statics.plurk.com/6cb1dc388b9259565efedef8f336d27d.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(highfive\)/g, "<img src='http://statics.plurk.com/a9560787e93f4f8890e4bd38696ba537.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(dance\)/g, "<img src='http://statics.plurk.com/a55bdb344892676b0fea545354654a49.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(blush\)/g, "<img src='http://statics.plurk.com/9939dd585cf0e8d39e7912a98a9ce727.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(bigeyes\)/g, "<img src='http://statics.plurk.com/8073c1716e75d32eb79f97a9f521fa01.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(funkydance\)/g, "<img src='http://statics.plurk.com/373cd2f23dab7528d4875170d13d64f7.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(idiot\)/g, "<img src='http://statics.plurk.com/8863234ebea13f109c9b15ba19a4531c.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(lonely\)/g, "<img src='http://statics.plurk.com/8738c7a1c402f41b5319abe504ce9687.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(scenic\)/g, "<img src='http://statics.plurk.com/db4c4a7d141fdcaca4d4b11f8fb360db.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(hassle\)/g, "<img src='http://statics.plurk.com/ced6d40bebe2d424b59322b311fc04bb.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(panic\)/g, "<img src='http://statics.plurk.com/b62d1e55e8311af5bc7526c595ac1dbb.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(okok\)/g, "<img src='http://statics.plurk.com/9b6f4864c822e1a97c98507c2b41a74f.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(yahoo\)/g, "<img src='http://statics.plurk.com/e49c8ae965452550c98fc7f99741ae0d.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(cry\)/g, "<img src='http://statics.plurk.com/318416eab5a856bddb1e106a21ff557a.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(doh\)/g, "<img src='http://statics.plurk.com/e8ed6c7eed76d2acd9dbf469f29fbec2.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(brokenheart\)/g, "<img src='http://statics.plurk.com/2b3593aea68efa7a00b4ef2850f98b8a.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(drinking\)/g, "<img src='http://statics.plurk.com/ed3620ff28a02e3dc9ac4ffa8e6ae2e6.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(girlkiss\)/g, "<img src='http://statics.plurk.com/08a43d50691a1ed22706fc92f568fa07.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(rofl\)/g, "<img src='http://statics.plurk.com/8600839dc03e6275b53fd03a0eba09cf.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(money\)/g, "<img src='http://statics.plurk.com/e6bb16b6ef386c5f23900b103dbdba31.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(rock\)/g, "<img src='http://statics.plurk.com/1c890273544559b17f090d09238fa763.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(nottalking\)/g, "<img src='http://statics.plurk.com/f053074bcce500fbd1e2327d49748a6d.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(party\)/g, "<img src='http://statics.plurk.com/1f44d3984a094fceae1f1a016a730fc9.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(sleeping\)/g, "<img src='http://statics.plurk.com/2f7c90ce56fb4a70e34c04d8d7692dd0.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(thinking\)/g, "<img src='http://statics.plurk.com/900f3dd0adaad9142d567caf6bfb1311.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(bringit\)/g, "<img src='http://statics.plurk.com/95ace5ba1097301b5206a9e0fb431624.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(worship\)/g, "<img src='http://statics.plurk.com/95e69aa508d4bb435706b9db0a610dad.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(applause\)/g, "<img src='http://statics.plurk.com/a08ed27ec14b48d4703f53f7eb94834b.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/8-\)/g, "<img src='http://statics.plurk.com/85ef5fa01a6a67a525429f8bf4279fe7.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(gym\)/g, "<img src='http://statics.plurk.com/986ecf2b1ae69072e0195b0a58545900.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(heart\)/g, "<img src='http://statics.plurk.com/150e3f367a063d3baf9720719d78d778.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(devil\)/g, "<img src='http://statics.plurk.com/3fabe74e992888be701de2a9d80c180a.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(lmao\)/g, "<img src='http://statics.plurk.com/92b595a573d25dd5e39a57b5d56d4d03.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(banana_cool\)/g, "<img src='http://statics.plurk.com/4f01bac8a707e5450307f97065ec0fa7.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(banana_rock\)/g, "<img src='http://statics.plurk.com/48515125401120316abb97666458d05b.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(evilgrin\)/g, "<img src='http://statics.plurk.com/aabbc82c2b0dc72bfbce2f82c97a95e8.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(headspin\)/g, "<img src='http://statics.plurk.com/b0b0596acce9ffc1f2a27548aa642eaf.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(heart_beat\)/g, "<img src='http://statics.plurk.com/52991d7ff65a05526454bd1170a0f14c.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(ninja\)/g, "<img src='http://statics.plurk.com/846277f0a154dc95a08594b7d32a5ccd.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(haha\)/g, "<img src='http://statics.plurk.com/843739a95294fd0bf4c958840b46408f.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(evilsmirk\)/g, "<img src='http://statics.plurk.com/22416dced8b59446db8cd366cc925d09.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(eyeroll\)/g, "<img src='http://statics.plurk.com/e3f0f67ca3af62e34f13abf1d036a010.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(muhaha\)/g, "<img src='http://statics.plurk.com/84f94a47fcaf1df0a5f17a1cfa52fa64.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(taser\)/g, "<img src='http://statics.plurk.com/44117848701cd748460921cfea5c3781.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(rammi\)/g, "<img src='http://statics.plurk.com/44117848701cd748460921cfea5c3781.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(banana_ninja\)/g, "<img src='http://statics.plurk.com/88f6dda8d290f66a923c1116a2a2b4ab.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(beer\)/g, "<img src='http://statics.plurk.com/eeaf87c619a0221ec9fa06413fd2d5dc.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(coffee\)/g, "<img src='http://statics.plurk.com/48ec47723cb34be3fcbc914e591e69cd.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(fish_hit\)/g, "<img src='http://statics.plurk.com/259a728a690204148037fbee7e2ca2d3.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(muscle\)/g, "<img src='http://statics.plurk.com/4383af0e055bce112176c5104deeaadf.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(smileydance\)/g, "<img src='http://statics.plurk.com/70722ab5756c3b89c86d85feab91725d.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(fireworks\)/g, "<img src='http://statics.plurk.com/7256dae81d56d150120ccd0c96dd2197.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(goal\)/g, "<img src='http://statics.plurk.com/47d20905d017c396d67b4a30c9ac9b10.png' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(bzzz\)/g, vuvuzela[kocok]);
s = s.replace(/\(dance_bzz\)/g, "<img src='http://statics.plurk.com/4ad099fba019942f13058610ff3fc568.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(Русский\)/g, "<img src='http://statics.plurk.com/deda4d9f78ad528d725e3a6bfbf6352f.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(code\)/g, "<img src='http://statics.plurk.com/0efc4d55d28704f4370ef874ae906161.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(morning\)/g, "<img src='http://statics.plurk.com/91cf07e3aa16738943fa1147940b48ea.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(yarr\)/g, "<img src='http://statics.plurk.com/4c40d16a0d369b895c08f2e33d062ec8.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(no_dance\)/g, "<img src='http://statics.plurk.com/feb43dbbbf2763905571060be9a496d1.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(dance_yarr\)/g, "<img src='http://statics.plurk.com/6de58c967f1c2797d250a713ba50eddd.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(droid_dance\)/g, "<img src='http://statics.plurk.com/b3b9856e557fcc2700fd41c53f9d4910.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(banana_gym\)/g, "<img src='http://statics.plurk.com/5b51892d7d1f392d93ea7fe26e5100f4.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(code_okok\)/g, "<img src='http://statics.plurk.com/8855f56400a936db07f348d9290adaac.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(gym_okok\)/g, "<img src='http://statics.plurk.com/fcd28d7d78ec1f828c76930fa63270e6.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(hungry_okok\)/g, "<img src='http://statics.plurk.com/71acd802cc931649dd9a371ccf70bad2.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(yarr_okok\)/g, "<img src='http://statics.plurk.com/3acbaf42504fff32c5eac4f12083ce56.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(angry_okok\)/g, "<img src='http://statics.plurk.com/6675254cd7449b1847a93b0024127eae.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(dance_okok\)/g, "<img src='http://statics.plurk.com/a555399b40c379adca5b6f5bad5bf732.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(music_okok\)/g, "<img src='http://statics.plurk.com/74030f05f06547a3d26b02ccbf0bbac7.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(wave_okok\)/g, "<img src='http://statics.plurk.com/bac8c8392f7ca8f5ac74612be4d08b74.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(taser_okok\)/g, "<img src='http://statics.plurk.com/88fac5a4b99110a35d4e4794dad58ab4.gif' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(fuu\)/g, "<img src='http://statics.plurk.com/cfdd2accc1188f5fbc62e149074c7f29.png' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(yay\)/g, "<img src='http://statics.plurk.com/1bd653e166492e40e214ef6ce4dd716f.png' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(bah\)/g, "<img src='http://statics.plurk.com/9c5c54081547d2ad903648f178fcc595.png' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(troll\)/g, "<img src='http://statics.plurk.com/f73b773aa689647cb09f57f67a83bb89.png' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(jazzhands\)/g, "<img src='http://statics.plurk.com/6928f3117658cc38d94e70519a511005.png' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(pokerface\)/g, "<img src='http://statics.plurk.com/e2998ca75f80c1c4a5508c549e3980a6.png' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(aha\)/g, "<img src='http://statics.plurk.com/8590888362ae83daed52e4ca73c296a6.png' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(yea\)/g, "<img src='http://statics.plurk.com/4a61085f1c6a639f028cd48ae97d07d0.png' style='border:0; margin:0; padding:0;'/>");
s = s.replace(/\(whatever\)/g, "<img src='http://statics.plurk.com/cfd84315ebceec0c4389c51cf69132bd.png' style='border:0; margin:0; padding:0;'/>");

5. Simpan

Buka blog dan lihat hasilnya (pokerface)
KLIK DISINI UNTUK BACA SELENGKAPNYA

[Wordpress] Menambah Tombol Share Ke Plurk

Jika biasanya saya membawakan tema seputar Blogspot, maka sekarang saya akan membahas tentang WordPress.

Di WP yang gratisan (wp.com) terdapat beberapa keterbatasan. Misalya tidak dapat mengedit HTML (spt. di blogspot), dll. Tetapi juga memiliki beberapa kelebihan.

Nah, sekarang saya akan menerangkan cara menambah tombol share ke Plurk pada WP.

1. Login ke WP, lalu masuk ke dasbor

2. Klik Sharing yang terletak pada bagian Pengaturan pada bagian kiri halaman dasbor.

3. Klik Add a new service.

4. Pada Service Name isikan Plurk, dan pada Sharing URL isikan dengan http://plurk.com/?status=%post_url%+%28%post_title%%29. Lalu pada Icon URL isikan dengan https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWL5ufRuKL89g8RpsL9okVoiyF90Nlyigfvw_F1W69vtoI9IfNoJwlRMWy4rVS5Oje7dZBjQ0TZ4EtaEglTnwqNZAdWKRTZzb-sYudBgiSJl20Jw5G8omEvSYHk1vHLH2uK4MZ9a8NFnU/s320/plurk.png atau URL icon lainnya (ukurannya 16x16 piksel). Kemudian klik Create Share

5. Lalu akan tampil tombol Plurk pada bagian Available Services. Drag tombol tersebut ke bagian Enabled Serivces.

6. Klik Simpan Perubahan dan lihat hasilnya
KLIK DISINI UNTUK BACA SELENGKAPNYA

Dasar-dasar CSS #5

Ini adalah seri terakhir dari Seri Dasar-dasar CSS. Sebelumnya silakan baca edisi terdahulu:

Dasar-dasar CSS #1
Dasar-dasar CSS #2
Dasar-dasar CSS #3
Dasar-dasar CSS #4

Pada edisi terakhir ini akan dijelaskan tentang beberapa properti yang belum dibahas, penyingkatan CSS yang biasanya digunakan untuk kompresi, dan penggunaan keterangan !important.

1. Beberapa Properti

Pertama-tama kita akan membahas tentang beberapa properti yang belum dibahas. Yaitu:

1. cursor yaitu untuk kursor/penunjuk mouse. Valuenya yaitu:

crosshair: yaitu gambar pointer yang berbentuk seperti tanda plus.
text: yaitu gambar pointer yang kalau seperti pada microsoft word (berbentuk seperti pointer teks).
wait: yaitu gambar jam pasir seperti kalau loading program.
default: yaitu gambar pointer biasa (panah).
help: yaitu gambar pointer dengan tanda tanya (seperti pernah diaplikasikan untuk trik membuat help/keterangan).
n-resize: yt gambar kursor yang seperti untuk memperlebar/memperkecil suatu objek (seperti pada paint). Arahnya menghadap ke utara.
ne-resize: sama seperti n-resize tetapi arahnya menghadap ke timur laut.
e-resize: arahnya menghadap ke timur.
se-resize: arahnya menghadap ke tenggara.
s-resize: bentuknya sama seperti n-resize.
sw-resize: bentuknya sama seperti ne-resize.
w-resize: bentuknya sama seperti e-resize.
nw-resize: sama dengan se-resize.
none: tidak memakai kursor.
url('URLGAMBARCURSOR'): cursor memakai gambar (ganti URLGAMBARCURSOR dengan URL gambar cursor yang diinginkan). (Baca juga: Cara Membuat Custom Cursor)

2. list-style: Tampilan daftar. Ada 3 properti untuk tampilan daftar.

list-style-position: Posisi tampilan daftar. Nilainya inside untuk didalam dan outside: untuk diluar.
list-style-type: Bentuk bullet. Nilainya:
- disc: tampilan bullet seperti bentuk bulat penuh.
- square: tampilan bentuk kotak.
- circle: bentuk bulat tetapi hanya outsidenya.
- decimal: berbentuk angka (1, 2, 3, dst. seperti penggunaan tag <ol>).
- upper-roman: berbentuk angka romawi dengan huruf besar (I, II, III, dst.)
- lower-roman: berbentuk angka romawi dengan huruf kecil (i, ii, iii, dst.)
- upper-alpha: berbentuk alfabet dengan huruf besar (A, B, C, dst.)
- lower-alpha: berbentuk alfabet dengan huruf kecil (a, b, c, dst.)
- none: tidak memakai bullet
list-style-image: url('URLGAMBARBULLET'): Gambar bullet. Ganti URLGAMBARBULLET dengan URL dari gambar bullet yang diinginkan.

3. overflow: kondisi jika isi konten melewati batas width/height yang telah ditentukan. Misalnya width ditentukan 100px dan height 100px tetapi ternyata melewati batas tersebut. Nah, nilai dari overflow ini adalah:

visible: yaitu isi konten yang melewati batas tetap ditampilkan.
hidden: yaitu isi konten yang melewati batas tidak ditampilkan sehingga yang ditampilkan hanya teks yang masih berada didalam batasnya.
auto: yaitu jika kelebihan maka akan ditampilkan scroll-nya. Jika tidak ya maka tidak.
scroll: yaitu baik kelebihan ataupun tidak maka akan tetap ditampilkan scrollnya, tetapi jika tidak kelebihan maka scrollnya nonaktif.

4. opacity: yaitu transparansi objek. Biasanya diikuti dengan properti filter: Alpha(Opacity=x, FinishOpacity=y); Dengan ketentuan x = nilai yang ditentukan properti opacity (1 = padat/tdk transparan, 0 = tidak kelihatan, antara 0 s/d 1 = transparan) dan y = 100x dari nilai x. Misal:

body{
opacity:0.5;
filter: Alpha(Opacity=0.5, FinishOpacity=50);
}

Berikut contoh penggunaan properti diatas.

<html>
<head>
<title>Belajar CSS - Part 5</title>
<style>

</style>
</head>
<body>
<ul class="class1">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
<ul class="class2">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
<div id="id1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<br/>
<div id="id2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<br/>
<div id="id3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
</body>
</html>

Buat file seperti contoh diatas dengan notepad lalu save as dengan nama dasar dasar css 5 properti.html dan ganti dropdown Save As Type dengan All Files lalu save dan buka di browser. Kira-kira hasilnya seperti ini.

2. Penyingkatan CSS

Ternyata nggak cuma SMS aja yang disingkat. (goodluck) CSS pun bisa disingkat. Penyingkatan dilakukan supaya lebih cepat diload. Ada beberapa macam penyingkatan.

1. Penyingkatan properti.

Beberapa properti yang bisa disingkat:

font
border
background (image)
margin
padding

Penyingkatan font

Sintaks penyingkatannya seperti ini.

font: font-weight font-size font-family;

Misal:

font: bold 24px Verdana,Helvetica;

Ket:

Yang perlu diperhatikan, untuk penulisan font-family terutama yang merupakan font generik, diantara font-font generik jangan ada spasi.

Penyingkatan border

Sintaks:

border: border-style border-width border-color;

Misal:

border: solid 1px #CCC;

Ket:

Untuk mendefinisikan border hanya untuk border atas, kanan, bawah, maupun kiri, maka gunakan ,code>border-top, border-right, border-bottom, border-left ketimbang hanya border saja (pada bagian properti).

Penyingkatan background

Sintaks:

border: url('URLGAMBAR') background-repeat position-x position-y;

Ket:

Ganti URLGAMBAR dengan URL background.

position-x adalah posisi horizontal, sedangkan position-y adalah posisi vertikal. Misal:

border: url('http://i49.tinypic.com/2qmqcmc.jpg') repeat-y left 100px;

Penyingkatan Margin/Padding

Untuk margin/padding ada beberapa kondisi.

1. Jika kondisinya nilai margin/padding semua sama, maka sintaksnya: margin/padding: nilai_seluruhnya; Misal: margin: 10px; (nilai margin atas/bawah/kanan/kiri = 10px)
2. Jika nilai beda semua, maka sintaksnya: margin/padding: nilai_atas nilai_kanan nilai_bawah nilai_kiri; Misal: padding: 3px 4px 5px 6px; (3px padding atas, 4px kanan, 5px bawah, 6px kiri)
3. Jika nilai margin/padding atas dan bawah sama, dan juga nilai kiri/kanan juga sama, maka sintaksnya: margin/padding: nilai_atas nilai_kanan; Misal: margin: 5px 10px; (margin atas/bawah 5px, kana/kiri 10px)

2. Penyingkatan tag/class/id.

Jika ada 2 ID yang mempunyai properti sama, maka disingkat saja.

Misal

#id1{
color:#CCC;
width:200px;
}
.class1{
color:#FFF;
width:200px;
}

Maka disingkat jadi:

#id1, .class1{
width:200px;
}
#id1{
color:#CCC;
}
.class1{
color:#FFF;
}

Contoh penggunaan penyingkatan:

<html>
<head>
<title>Belajar CSS - Part 4</title>
<style>

</style>
</head>
<body>
<div class="class1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<div id="id1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<br/>
<div id="id2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.

</div>
<br/>
<div id="id3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
</body>
</html>

Lalu hasil eksekusi di browser akan seperti ini.

3. Penggunaan !important

Keterangan !important digunakan untuk menerangkan pentingnya suatu properti, sehingga properti tersebut yang didahulukan. Sintaksnya seperti ini.

selector{
properti:value; !important
}

Saya jelaskan dulu. Begini. Jika ada selector yang sama dengan property sama tetapi value yang berbeda, maka value yang disebutkan terakhir akan diprioritaskan. Misal:

#id1{
color:blue;
}
#id1{
color:green;
}

Maka #id1 akan berwarna hijau, karena dituliskan terakhir. Lain cerita dengan yang ini.

#id1{
color:blue; !important
}
#id1{
color:green;
}

Maka #id1 akan berwarna biru. Nah, kalau yang ini?

#id1{
color:blue;
}
#id1{
color:green; !important
}

Ya pasti berwarna hijau lah, orang disebutinnya terakhir, pake !important lagee... (lmao) (haha)

Nah, kalo yang ini?

#id1{
color:blue; !important
}
#id1{
color:green; !important
}

Ya sama kayak yang tadi: ijo! (haha)

!important ini sangat berguna untuk anda yang suka mengoprek CSS, misalnya dalam penggunaan layout Plurk atau Multiply. Dimana mungkin sudah disetting duluan CSS-nya oleh pembuat situs. Jadi jika gagal berubah layoutnya padahal sintaks kodenya sudah bener, maka bisa gunakan !important ini.

Berikut contoh penggunaannya.

<html>
<head>
<title>Belajar CSS - Part 4</title>
<style>

</style>
</head>
<body>
<div id="id1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<div id="id2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<div id="id3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<div id="id4">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
</body>
</html>

Berikut hasil eksekusinya di browser.

Akhirnya serial Dasar-dasar CSS habis juga. Memang lumayan panjang yang edisi #5 tetapi semoga bermanfaat. Dan tetap stay tune di Gudang Ilmu... (goodluck)
KLIK DISINI UNTUK BACA SELENGKAPNYA

Widget Dalam Menu Bar/Navigasi

Kalau dulu saya pernah membuat postingan tentang navigasi menu dan navigasi dropdown menu, kalau ini masih berkutat seputar navigasi, tetapi navigasi ini merupakan pengembangan dari navigasi dropdown menu, yaitu navigasi dropdown menu yang bisa diselipi widget. Contohnya seperti gambar diatas.

(woot) Kalau begitu bagus dong? Tentu saja. Ini bisa menghemat tampilan blog jadi lebih hemat tempat.

Gimana caranya gan?

Begini...

1. Login ke Blogger, lalu klik link Rancangan > Edit HTML.

2. Backup dulu template anda.

3. Cari kode ]]></b:skin> lalu masukkan kode ini diatasnya.

/*--Navigasi--*/
#navigasi{
background:black; /* Warna latar belakang */
width:580px; /* Lebar navigasi */
height:auto;
margin:0;
padding:0;
}
#navigasi ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#navigasi li{
list-style:none;
float:left;
}
#navigasi li a, #navigasi li a:link, #navigasi li a:visited{
color:yellow; /* Warna teks */
display:block;
padding:9px 10px 9px 10px;
font-size: 14px;
font-family: verdana;
text-decoration:none;
}
#navigasi li a:hover{
background:yellow; /* Warna latar belakang saat mouse hover */
color:black; /*Warna link saat mouse hover */
}
#navigasi li ul{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu biasa yg berisi link */
visibility:hidden;
}
#navigasi li ul li a, #navigasi li ul li a:link, #navigasi li ul li a:visited{
float:none;
background:black;
width:200px; /* Lebar submenu biasa yg berisi link */
border-width:1px;
border-style:solid;
border-color:#ffff66; /* Warna border */
}
#navigasi li ul li a:hover{
background:yellow; /* Latar belakang link submenu saat mouse hover */
color:black; /* Warna link submenu saat mouse hover */
}
#navigasi li:hover ul{
left:auto;
visibility:visible;
}
#navigasi li ul.widgetmenu{
padding:10px;
color:yellow; /* Warna teks submenu widget */
font-family: verdana;
background:black; /* Latar belakang submenu widget */
height:auto;
font-size:12;
width:auto;
border:1px solid #ffff66; /* Warna border */
width:300px; /* Lebar submenu yang berisi widget */
}
#navigasi .widgetmenu a, #navigasi .widgetmenu a:link, #navigasi .widgetmenu a:visited{
display:inline;
padding:0;
border:0;
height:auto;
width:auto;
}
#navigasi .widgetmenu a:hover{
font-size:12;
text-decoration:underline;
color:yellow; /* Warna link submenu widget saat hover */
font-family: verdana;
background:black;
height:auto;
width:auto;
}

4. Cari kode </head> lalu masukkan kode berikut diatasnya.

<script>
var auahgelap = '';
function petakumpet(id)
{
var menu = document.getElementById(id);
var sangmantan = menu.className;
if (sangmantan == 'ngumpet')
{
if (auahgelap != '')
{
var terlalu = document.getElementById(auahgelap);
terlalu.className = 'ngumpet';
}
menu.className = 'muncul';auahgelap = id;
}
else{menu.className = 'ngumpet';
}
}
function umpetpetak(id)
{
var menu = document.getElementById(id);
var sangmantan = menu.className;
if (sangmantan != 'ngumpet')
{
if (auahgelap == '')
{
var terlalu = document.getElementById(auahgelap);
terlalu.className = 'muncul';
}
menu.className = 'ngumpet';auahgelap = id;
}
else{
menu.className = 'muncul';
}
}
</script>

5. Cari kode yang mirip2 kode berikut.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='C A Minor D Minor ke G ke C Lagi (Header)' type='Header'/>
</b:section>
</div>

6. Dibawahnya, taruh kode berikut.

<div id='navigasi'>
<ul id='navigasi'>
<li><a href='#'>Home</a></li>
<li onmouseout='petakumpet("submenu1")' onmouseover='umpetpetak("submenu1")'>
<a href='#'>Other Blogs</a>
<div class='ngumpet' id='submenu1'>
<ul>
<li><a href='#'>My Blog</a></li>
<li><a href='#'>Info Musik</a></li>
<li><a href='#'>Berita Dunia Maya</a></li>
<li><a href='#'>Belajar SEO</a></li>
</ul>
</div>
</li>
<li onmouseout='petakumpet("submenu2")' onmouseover='umpetpetak("submenu2")'>
<a href='#'>Search</a>
<div class='ngumpet' id='submenu2'>
<ul class='widgetmenu'>
<li>
Ketikkan kata kunci yang anda cari lalu tekan tombol <b>Cari</b>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='200' name='q' onblur='if (this.value == "") {this.value = "Cari...";}' onfocus='if (this.value == "Cari...") {this.value = ""}' type='text' value='Cari...'/><input class='buttonsubmit' name='submit' type='submit' value='Cari'/></form>
</li>
</ul>
</div>
</li>
<li onmouseout='petakumpet("submenu3")' onmouseover='umpetpetak("submenu3")'>
<a href='#'>Buku Tamu</a>
<div class='ngumpet' id='submenu3'>
<ul class='widgetmenu'>
<li>

<iframe frameborder='0' height='400' scrolling='auto' src='http://www6.shoutmix.com/?mrizkifadillah' title='mrizkifadillah' width='200'>
<a href='http://www6.shoutmix.com/?mrizkifadillah'>View shoutbox</a>
</iframe>
<br/>
<a href='http://www.shoutmix.com' title='Get your own free shoutbox chat widget at ShoutMix!'>ShoutMix chat widget</a>

</li>
</ul>
</div>
</li>
</ul>
</div>

Ket:
- Pada kode <li onmouseout='petakumpet("submenu1")' onmouseover='umpetpetak("submenu3")'> perhatikan bagian submenu1. Jika pada kode dibawahnya terdapat kode <div class='ngumpet' id='submenu2'> maka ganti submenu1 dengan submenu2
- Jika ingin membuat menu yang tidak ada dropdown (misalnya link home) tulis saja seperti ini: <li><a href='#'>Home</a></li>.
- Tanda # adalah link yang diinginkan. Jika tidak ingin memakai link, biarkanlah saja begitu. Jika ingin memakai link, ganti dengan URL yang diinginkan.
- Ganti "Home", "Other Blog", "Search", dll dengan anchor link yang diinginkan. Begitu juga dengan "My Blog", "Info Musik", dll.
- Jika submenu itu berupa widget, maka ganti kode <ul> yang dibawah kode <div class='ngumpet' id='submenu1'> dengan <ul class='widgetmenu'>
- Jika submenu berupa link, maka biarkan saja kode <ul> tersebut.

7. Simpan. (klik Simpan Template)

Untuk contohnya bisa dilihat di http://www.demo.emeref.co.cc/2010/11/test-navigasi-link.html. Selamat mencoba! (code)
KLIK DISINI UNTUK BACA SELENGKAPNYA

Modifikasi (Tampilan) Label ala WordPress

Tampilan label di Blogger memang sudah berubah. Kini sudah bisa berupa list (daftar) atau berupa cloud. Bisa juga ditampilkan jumlah postingannya. Tetapi bila diaplikasikan kedalam mode cloud, maka tampilannya akan menjadi tidak harmonis.

Alternatifnya, adalah menampilkan jumlah postingan dengan title (tooltip) seperti pada blog berflatform WordPress. Seperti dibawah contohnya.

Nah. Dengan title/tooltip ini juga bisa digunakan untuk mendongkrak seo. Dengan menggunakan keterangan "Lihat seluruh tulisan dalam [namalabel]" Seperti dibawah contohnya.

Apakah bisa diaplikasikan di Blogspot? Jawabannya adalah BISA! (rock) Bahkan bisa dikombinasikan dengan menampilkan jumlah postingan sekaligus nama labelnya. Seperti dalam blog ini contohnya. (Silahkan lihat label pada blog ini)

Haduh... kebanyakan intermezzonya nih... (idiot) kapan dong mulainya???

Oke. Pertama-tama...

1. Login ke Blogger, lalu klik Rancangan > Edit HTML.

2. Backup dulu template anda karena pekerjaan ini termasuk beresiko.

3. Kalau sudah dibackup, silakan klik checkbox kecil Expand Template Widget.

4. Cari kode berikut.

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

5. Lalu ubah menjadi seperti ini.

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.count + " posts under " + data:label.name'><data:label.name/></a>

* Ket:

Yang harus diperhatikan adalah bagian expr:title='... dst. yang ditandai dengan warna kuning. Nah, disitu ada beberapa kode. Yaitu:

- expr:title = ekspresi title (abaikan saja).
- data:label.count = jumlah postingan dalam label.
- data:label.name = nama label.

Nah, untuk menambahkan teks gunakan "... teks ...". Jika didepannya ada data (data:label.count atau data:label.name) maka harus ditambah tanda plus (+) sehingga menjadi + "... teks ..." *nb: spasi sebelum kode " (yang mengapit tanda plus) harus benar dan jelas.*. Jika di belakangnya terdepat data, ya begini jadinya: "... teks ..." + . Jika memang teks tersebut diapit oleh data (didepan maupun dibelakang ada data) maka codenya jadi: + "... teks ..." +

Misal: ingin yang seperti gambar pertama diatas maka kodenya:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.count + " topik"'><data:label.name/></a>

Atau ingin seperti gambar kedua:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='"Lihat seluruh tulisan dalam " + data:label.name'><data:label.name/></a>

6. Lalu cari semua kode berikut (menggunakan fitur pencarian di Browser dengan menekan Ctrl + F)

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

7. Lalu ganti semua kode diatas seperti langkah 5. (semua kode diatas harus diganti dengan kode yang sama seperti langkah 5)

8. Simpan. (klik Simpan Template)

9. Lihat hasilnya! Bagaimana? Silakan bagi pengalamannya dengan komentar di sini. (goodluck)
KLIK DISINI UNTUK BACA SELENGKAPNYA

Troubleshooting: Cara Memasang Emot Plurk Ke Blog

Saya sudah memosting cara memasang emot plurk ke blog, tetapi banyak yang masih belum bisa menerapkan cara tersebut. Padahal saya rasa kodenya sudah oke. Ternyata penyebabnya adalah perbedaan struktur HTML dalam template mereka.

Kalau begitu, bagi yang tidak bisa memakai kode tersebut silahkan pakai trik berikut.

**PASTIKAN TRIK CARA MEMASANG EMOTICON PLURK DI BLOG TELAH DITERAPKAN**
**JIKA BELUM, SILAKAN TERAPKAN TERLEBIH DAHULU, LALU COBA**
**JIKA MASIH BELUM BISA, IKUTI LANGKAH BERIKUT!**
**PASTIKAN ANDA MASIH ADA DI JENDELA EDIT HTML**

Cari kode spt ini.

<script type='text/javascript'>
addSmileyById('comments-block');
addSmileyByClass('entry-content');
</script>

Ganti dengan:

<script type='text/javascript'>
addSmileyById('badi');
</script>

Lalu cari kode:

<body>

Ganti dengan:

<body id="badi">

Lalu simpan. (haha)

Sudah? (haha)
KLIK DISINI UNTUK BACA SELENGKAPNYA

Dasar-dasar CSS #4

Sudah lama kita tidak membahas dasar-dasar CSS, untuk seri sebelumnya silakan lihat:
Dasar-dasar CSS #1
Dasar-dasar CSS #2
Dasar-dasar CSS #3
Nah, kali ini kita akan membahas tentang CSS untuk layout.

Sintaks-sintaks CSS untuk layout diantaranya:

1. background: Untuk mengeset background. Ada beberapa sintak untuk background, yaitu:

a. background-color: yaitu warna background.
b. background-image:url('URLGAMBAR.jpg'); yaitu URL gambar yang dijadikan background.
c. background-repeat: bernilai "repeat", "repeat-x", "repeat-y", dan "no-repeat". Maksudnya adalah pengulangan gambar. "repeat" artinya gambar akan diulang, memenuhi layar. "repeat-x" artinya gambar akan diulang sepanjang horizontal, "repeat-y" gambar akan diulang secara vertikal, sedangkan "no-repeat" artinya gambar hanya ditampilkan 1x, tidak akan diulang.
d. background-position: nilainya "nilaihorizontal nilaivertikal". Maksudnya adalah posisi latarbelakang dari layer (bagian div/span/element yang diberi latar). Misal: body{background-position:10px 30px} maka latar belakang dari bagian body akan diberi jarak 10 piksel antara batas pinggir kiri body dan 30piksel dari batas pinggir atas body. Anda juga bisa mengisinya dengan "top" "middle" "bottom" untuk nilaihorizontal, dan "left" "center" "right" untuk nilaivertikal (pilih salah satu).
e. background-attachment: Nilainya "fixed" dan "scroll". "fixed" artinya tampilan gambar latar belakang akan tetap sepanjang anda meng-scroll mouse anda.Sedangkan "scroll" kebalikannya.

2. width: Nilainya berupa nilai dalam piksel atau "auto". Untuk menentukan lebar elemen.
3. height: Idem dengan width bedanya height untuk menentukan tinggi elemen.
4. margin: Batas antara suatu element dengan elemen diluarnya. Nilainya bisa berupa auto atau nilai dalam piksel. Sintaksnya begini: margin:marginatas marginkanan marginbawah marginkiri. Atau jika nilai semua margin sama langsung saja margin: nilaimargin.
5. padding: Batas antara suatu batas (border) element dengan unsur element didalam element tersebut. Sintaksnya begini: padding:paddingatas paddingkanan paddingbawah paddingkiri. Atau jika nilai semua margin sama langsung saja padding: nilaimargin.
6. border: ada 3 unsur untuk border yaitu:

a. border-width: lebar dari border
b. border-color: warna dari border
c. border-style: gaya dari border, nilainya "solid" (biasa) "double" (dobel/dua garis) "groove" (groove) "inset" (menjorok kedalam) "outset" (menjorok keluar) "dotted" (bertitik-titik) "dashed" (bergaris-garis)

Jika ingin menspesifikkan dari suatu sisi, maka langsung: border-bottom: gayaborder lebarborder warnaborder (misal: border-bottom:solid 1px black jgn diputer2 ye... (fish_hit)) *border-bottom untuk bagian bawah, sedangkan border-top bagian atas, border-left bagian kiri dan border-right bagian kanan.
7. position: posisi, nilainya "fixed" (tetap, akan melayang terus selama anda menscroll halaman, belum didukung IE (tongue)), "static" (diam, posisi default), "relative" (tergantung objek disekitarnya), "absolute" (dihitung dari pojok kiri atas layar, hampir sama seperti fixed, tetapi tidak akan ikut melayang ketika kita men-scroll mouse) . Setelah menentukan jenis posisi, kita harus menentukan:

a. pilih (top: atau bottom: jika pilih top artinya dihitung dari atas, sedangkan bottom sebaliknya)
b. pilih (left: atau right:. jika pilih left nilai akan dihitung dari kiri, sedangkan right sebaliknya.

8. z-index: z-index adalah posisi suatu elemen dari dasar dokumen, jika tidak diset maka defaultnya 0. Misalnya ada 3 buah buku ditumpuk, maka buku terbawah mempunyai z-index 0, buku ke2 daribawah:1, dan buku teratas:2.
9. visibility: nilainya hanya 2, yaitu "visible" dan "hidden". Visible artinya kelihatan, kalo hidden ya artinya tersembunyi! (ninja)
10. display: nilainya "none" "inline" "block". Jika none maka tidak akan ditampilkan, inline ditampilkan dalam sebaris (biasanya untuk navigasi menu horizontal) dan block akan ditampilkan secara perbaris. Untuk display "none" dan visibility "hidden" perbedaannya adalah, untuk display "none" elemen didalamnya tidak akan ditampilkan, sedangkan visibility "hidden" akan tetap ada ruang untuk elemen tersebut, namun elemennya disembunyikan.

Supaya lebih jelas, silakan bikin file ini dengan notepad lalu simpan dengan nama belajarCSSpart4.html!

<html>
<head>
<title>Belajar CSS - Part 4</title>
<style type="text/css">

</style>
</head>
<body>
<div id="left">
Ini bagian sidebar, bisa diisi dengan apasaja.<br/><br/>
<a href="#">Home</a><br/>
<a href="#">About</a><br/>
<a href="#">Contact</a><br/>
<a href="#">Sitemap</a><br/><br/>
Tetap aje pjgnya 200px meski kontennya bejibun! bejibun! bejibun! bejibun! bejibun isinye!

</div>
<div id="right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<div id="footer">
Belajar CSS - Part 4 | by Muhammad Rizki Fadillah
</div>
<div id="piksed">
Ini bagian fixed...<br/><br/>
Hebat kan, bisa melayang...
</div>
Ada apa ini? <span id="hidden">
Anda-anda pada nggak bakal bisa ngeliat teks ini!
</span> Betul?<br/><br/>
Ada yang tersembunyi? <span id="none">MEMANG BETUL ADA YANG TERSEMBUNYI DISINI! </span>Betulkan?
</body>
</html>

Jika file tersebut dieksekusi, maka hasilnya kira-kira akan seperti berikut.

Dasar-dasar CSS edisi 4 selesai sampai disini. Eits! (nottalking) masih ada 1 edisi lagi, jadi tunggu saja!
KLIK DISINI UNTUK BACA SELENGKAPNYA

Membuat Daftar Indeks di Blog

Anda tahu indeks? Ya anda yang sering membaca ensiklopedia pasti tahu indeks. Indeks adalah daftar kata yang terdapat dalam buku, yang memudahkan pengguna mencari istilah dalam suatu buku. Namun apakah indeks ini bisa dipasang kedalam blog? Jawabannya adalah: bisa! (woot) Gimana caranya?

Sini, akan kutunjukkan cara-caranya! (bringit)

1. Login ke Blogger, lalu buat static page baru, caranya: klik Edit Entri > Edit Laman > Laman Baru.

2. Ganti modus ke mode Edit HTML.

3. Pada bagian isi, ketikkan kode berikut ini.

<style>
/* style for index javascript */
/* Style h3 */
h3.index{
color:#abc;
font-size:24px;
background:none;
padding:0px;
padding-left:10px;
}
a.indeks, a.indeks:visited, a.indeks:hover, a.hrfindeks, a.hrfindeks:visited, a.hrfindeks:hover{
text-decoration:none;
}
a.indeks:hover{
padding-left:5px;
}
a.indeks:hover h3.index{
padding-left:0px;
}
a.indeks:hover{
padding-top:5px;
}
</style>
<script type="text/javascript">
/*------------------------------------
CREDIT

Script Index By Muhammad Rizki Fadillah
http://muhammadrizkifadillah.blogspot.com
http://mrizkifadillah.wordpress.com
http://mrizkifadillah.tumblr.com
http://www.emeref.co.cc
http://facebook.com/mrizkifadillah
http://twitter.com/mrizkifadillah
http://plurk.com/mrizkifadillah
YM:muhammadrizkifadillah

Credit ini boleh dihapus boleh tidak.
------------------------------------*/
document.write('<a href="#indexa" class="hrfindeks">A</a> ');
document.write('<a href="#indexb" class="hrfindeks">B</a> ');
document.write('<a href="#indexc" class="hrfindeks">C</a> ');
document.write('<a href="#indexd" class="hrfindeks">D</a> ');
document.write('<a href="#indexe" class="hrfindeks">E</a> ');
document.write('<a href="#indexf" class="hrfindeks">F</a> ');
document.write('<a href="#indexg" class="hrfindeks">G</a> ');
document.write('<a href="#indexh" class="hrfindeks">H</a> ');
document.write('<a href="#indexi" class="hrfindeks">I</a> ');
document.write('<a href="#indexj" class="hrfindeks">J</a> ');
document.write('<a href="#indexk" class="hrfindeks">K</a> ');
document.write('<a href="#indexl" class="hrfindeks">L</a> ');
document.write('<a href="#indexm" class="hrfindeks">M</a> ');
document.write('<a href="#indexn" class="hrfindeks">N</a> ');
document.write('<a href="#indexo" class="hrfindeks">O</a> ');
document.write('<a href="#indexp" class="hrfindeks">P</a> ');
document.write('<a href="#indexq" class="hrfindeks">Q</a> ');
document.write('<a href="#indexr" class="hrfindeks">R</a> ');
document.write('<a href="#indexs" class="hrfindeks">S</a> ');
document.write('<a href="#indext" class="hrfindeks">T</a> ');
document.write('<a href="#indexu" class="hrfindeks">U</a> ');
document.write('<a href="#indexv" class="hrfindeks">V</a> ');
document.write('<a href="#indexw" class="hrfindeks">W</a> ');
document.write('<a href="#indexx" class="hrfindeks">X</a> ');
document.write('<a href="#indexy" class="hrfindeks">Y</a> ');
document.write('<a href="#indexz" class="hrfindeks">Z</a> ');
document.write('<br/>');
var x=0;
var indeks=new Array;
x=x+1;
indeks[x]="<h3 class='index' id='indexa'>A</h3>";
x=x+1;
indeks[x]="Acak";
x=x+1;
indeks[x]="Ada Band";
x=x+1;
indeks[x]="Ajar";
x=x+1;
indeks[x]="   Belajar";
x=x+1;
indeks[x]="Akar";
x=x+1;
indeks[x]="   Akar Kuadrat";
x=x+1;
indeks[x]="   Akar Pangkat Tiga";
x=x+1;
indeks[x]="Aku";
x=x+1;
indeks[x]="Akun";
x=x+1;
indeks[x]="Aku Takut Anjing";
x=x+1;
indeks[x]="Alexa Band";
x=x+1;
indeks[x]="Alexa Rank";
x=x+1;
indeks[x]="Aneh";
x=x+1;
indeks[x]="Artikel";
x=x+1;
indeks[x]="   Artikel Terkait";
x=x+1;
indeks[x]="Author";

x=x+1;
indeks[x]="Award";
x=x+1;
indeks[x]="<h3 class='index' id='indexb'>B</h3>";
x=x+1;
indeks[x]="Baca";
x=x+1;
indeks[x]="   Bacaan";
x=x+1;
indeks[x]="   Membaca";
x=x+1;
indeks[x]="   Pembaca";
x=x+1;
indeks[x]="Backlink";
x=x+1;
indeks[x]="Band";
x=x+1;
indeks[x]="Bangun Datar";
x=x+1;
indeks[x]="Bangun Ruang";
x=x+1;
indeks[x]="Banner";
x=x+1;
indeks[x]="Berita";
x=x+1;
indeks[x]="Bikin";
x=x+1;
indeks[x]="Bilangan";
x=x+1;
indeks[x]="Bing";
x=x+1;
indeks[x]="Blockquote";
x=x+1;
indeks[x]="Blog";
x=x+1;
indeks[x]="   Blogger";
x=x+1;
indeks[x]="   Blogging";
x=x+1;
indeks[x]="   Blogosphere";
x=x+1;
indeks[x]="   Blog Saya";
x=x+1;
indeks[x]="   Blogspot";
x=x+1;
indeks[x]="   Blogwalking";
x=x+1;
indeks[x]="Bola";
x=x+1;
indeks[x]="Breadcrumbs";
x=x+1;
indeks[x]="Buat";
x=x+1;
indeks[x]="   Membuat";
x=x+1;
indeks[x]="Butuh";
x=x+1;
indeks[x]="<h3 class='index' id='indexc'>C</h3>";
x=x+1;
indeks[x]="Cacah";
x=x+1;
indeks[x]="   Bilangan Cacah";
x=x+1;
indeks[x]="Caption";
x=x+1;
indeks[x]="Cara";
x=x+1;
indeks[x]="Ceramah";
x=x+1;
indeks[x]="Cinta";
x=x+1;
indeks[x]="Ciri-ciri";
x=x+1;
indeks[x]="Copas";
x=x+1;
indeks[x]="CSS";
x=x+1;
indeks[x]="<h3 class='index' id='indexd'>D</h3>";
x=x+1;
indeks[x]="Daftar";

x=x+1;
indeks[x]="   Daftar Isi";
x=x+1;
indeks[x]="Dasar";
x=x+1;
indeks[x]="Dasawarsa";
x=x+1;
indeks[x]="Diameter";
x=x+1;
indeks[x]="Dofollow";
x=x+1;
indeks[x]="Domain";
x=x+1;
indeks[x]="<h3 class='index' id='indexe'>E</h3>";
x=x+1;
indeks[x]="Email";
x=x+1;
indeks[x]="Emeref";
x=x+1;
indeks[x]="Emosi";
x=x+1;
indeks[x]="Emoticon";
x=x+1;
indeks[x]="<h3 class='index' id='indexf'>F</h3>";
x=x+1;
indeks[x]="Facebook";
x=x+1;
indeks[x]="Fan Page";
x=x+1;
indeks[x]="Float";
x=x+1;
indeks[x]="   Float Widget";
x=x+1;
indeks[x]="Follower";
x=x+1;
indeks[x]="Font";
x=x+1;
indeks[x]="Footnote";
x=x+1;
indeks[x]="Forum";
x=x+1;
indeks[x]="   Forum Blogger";
x=x+1;
indeks[x]="FPB";
x=x+1;
indeks[x]="Fungsi";
x=x+1;
indeks[x]="<h3 class='index' id='indexg'>G</h3>";
x=x+1;
indeks[x]="Gambar";
x=x+1;
indeks[x]="Go Green Template";
x=x+1;
indeks[x]="Google";
x=x+1;
indeks[x]="Google Buzz";
x=x+1;
indeks[x]="Gudang Ilmu";
x=x+1;
indeks[x]="Guna";
x=x+1;
indeks[x]="   Gunakan";
x=x+1;
indeks[x]="   Kegunaan";
x=x+1;
indeks[x]="<h3 class='index' id='indexh'>H</h3>";
x=x+1;
indeks[x]="Halaman";
x=x+1;
indeks[x]="Hashtag";
x=x+1;
indeks[x]="Header";
x=x+1;
indeks[x]="Hiatus";
x=x+1;
indeks[x]="Highlight";
x=x+1;
indeks[x]="Homepage";
x=x+1;
indeks[x]="HTML";
x=x+1;
indeks[x]="<h3 class='index' id='indexi'>I</h3>";
x=x+1;
indeks[x]="Ide";

x=x+1;
indeks[x]="Iklan";
x=x+1;
indeks[x]="Ikon";
x=x+1;
indeks[x]="Ilmu";
x=x+1;
indeks[x]="Indeks";
x=x+1;
indeks[x]="Indonesia";
x=x+1;
indeks[x]="Indostats";
x=x+1;
indeks[x]="Informasi";
x=x+1;
indeks[x]="Internet";
x=x+1;
indeks[x]="Isi";
x=x+1;
indeks[x]="Istilah";
x=x+1;
indeks[x]="<h3 class='index' id='indexj'>J</h3>";
x=x+1;
indeks[x]="Jaringan";
x=x+1;
indeks[x]="Javascript";
x=x+1;
indeks[x]="Jejaring Sosial";
x=x+1;
indeks[x]="Judul";
x=x+1;
indeks[x]="   Judul Postingan";
x=x+1;
indeks[x]="   Judul Blog";
x=x+1;
indeks[x]="<h3 class='index' id='indexk'>K</h3>";
x=x+1;
indeks[x]="Keyword";
x=x+1;
indeks[x]="Kolom";
x=x+1;
indeks[x]="Komentar";
x=x+1;
indeks[x]="Kompres";
x=x+1;
indeks[x]="  &nbspMengompres CSS";
x=x+1;
indeks[x]="Konsultasi";
x=x+1;
indeks[x]="   Konsultasi Matematika";
x=x+1;
indeks[x]="Konten";
x=x+1;
indeks[x]="KPK";
x=x+1;
indeks[x]="Kuadrat";
x=x+1;
indeks[x]="Kursor";
x=x+1;
indeks[x]="Kustomisasi";
x=x+1;
indeks[x]="<h3 class='index' id='indexl'>L</h3>";
x=x+1;
indeks[x]="Layout";
x=x+1;
indeks[x]="Lebay";
x=x+1;
indeks[x]="Link";
x=x+1;
indeks[x]="Lintas Berita";
x=x+1;
indeks[x]="Lirik Lagu";
x=x+1;
indeks[x]="Lagu";
x=x+1;
indeks[x]="<h3 class='index' id='indexm'>M</h3>";
x=x+1;
indeks[x]="Main";
x=x+1;
indeks[x]="   Bermain";
x=x+1;
indeks[x]="Matematika";
x=x+1;
indeks[x]="Moderasi";
x=x+1;
indeks[x]="Modifikasi";
x=x+1;
indeks[x]="MRF";
x=x+1;
indeks[x]="Muhammad Rizki Fadillah";
x=x+1;
indeks[x]="Multi Kolom";
x=x+1;
indeks[x]="Musik";
x=x+1;
indeks[x]="<h3 class='index' id='indexn'>N</h3>";
x=x+1;
indeks[x]="Nama";
x=x+1;
indeks[x]="Navigasi";
x=x+1;
indeks[x]="Ngoceh";
x=x+1;
indeks[x]="Nofollow";
x=x+1;
indeks[x]="<h3 class='index' id='indexo'>O</h3>";
x=x+1;
indeks[x]="Online";
x=x+1;
indeks[x]="Otomatis";
x=x+1;
indeks[x]="<h3 class='index' id='indexp'>P</h3>";
x=x+1;
indeks[x]="Page";
x=x+1;
indeks[x]="Page Rank";
x=x+1;
indeks[x]="Page View";
x=x+1;
indeks[x]="Pendapat";
x=x+1;
indeks[x]="Pendek.in";
x=x+1;
indeks[x]="Pengaturan";
x=x+1;
indeks[x]="Pengumuman";
x=x+1;
indeks[x]="Pengunjung";
x=x+1;
indeks[x]="Penting";
x=x+1;
indeks[x]="Perancang Template";
x=x+1;
indeks[x]="Phytagoras";
x=x+1;
indeks[x]="Plagiat";
x=x+1;
indeks[x]="Plurk";
x=x+1;
indeks[x]="Polling";
x=x+1;
indeks[x]="Postingan";
x=x+1;
indeks[x]="Promosi";
x=x+1;
indeks[x]="<h3 class='index' id='indexq'>Q</h3>";
x=x+1;
indeks[x]="<h3 class='index' id='indexr'>R</h3>";
x=x+1;
indeks[x]="Ralat";
x=x+1;
indeks[x]="Rancangan";
x=x+1;
indeks[x]="Ranking";
x=x+1;
indeks[x]="Read More";
x=x+1;
indeks[x]="Recent Comments";
x=x+1;
indeks[x]="Recent Posts";
x=x+1;
indeks[x]="Redirect";
x=x+1;
indeks[x]="Refresh";
x=x+1;
indeks[x]="RSS";
x=x+1;
indeks[x]="Rugi";
x=x+1;
indeks[x]="Rumus";
x=x+1;
indeks[x]="<h3 class='index' id='indexs'>S</h3>";
x=x+1;
indeks[x]="Sambutan";
x=x+1;
indeks[x]="Screenshoot";
x=x+1;
indeks[x]="Script";
x=x+1;
indeks[x]="Scroll";
x=x+1;
indeks[x]="Search Engine";
x=x+1;
indeks[x]="Secret Link";
x=x+1;
indeks[x]="Seni";
x=x+1;
indeks[x]="SEO";
x=x+1;
indeks[x]="SERP";
x=x+1;
indeks[x]="Share";
x=x+1;
indeks[x]="   Share Pack";
x=x+1;
indeks[x]="Show Hide";
x=x+1;
indeks[x]="Sidebar";
x=x+1;
indeks[x]="Sitelink";
x=x+1;
indeks[x]="Situs Web";
x=x+1;
indeks[x]="SMP";
x=x+1;
indeks[x]="Sosial";
x=x+1;
indeks[x]="Static Page";
x=x+1;
indeks[x]="Statistik";
x=x+1;
indeks[x]="Status";
x=x+1;
indeks[x]="Style";
x=x+1;
indeks[x]="Submit";
x=x+1;
indeks[x]="Sumber";
x=x+1;
indeks[x]="<h3 class='index' id='indext'>T</h3>";
x=x+1;
indeks[x]="Tabel";
x=x+1;
indeks[x]="Tag";
x=x+1;
indeks[x]="Tampilan";
x=x+1;
indeks[x]="Teknik";
x=x+1;
indeks[x]="Teknologi";
x=x+1;
indeks[x]="Teks";
x=x+1;
indeks[x]="Template";
x=x+1;
indeks[x]="Textarea";
x=x+1;
indeks[x]="Tombol";
x=x+1;
indeks[x]="Tips";
x=x+1;
indeks[x]="Trik";
x=x+1;
indeks[x]="Tulis";
x=x+1;
indeks[x]="   Menulis";
x=x+1;
indeks[x]="   Tulisan";
x=x+1;
indeks[x]="Tutorial";
x=x+1;
indeks[x]="Twitter";
x=x+1;
indeks[x]="Twitterfeed";
x=x+1;
indeks[x]="<h3 class='index' id='indexu'>U</h3>";
x=x+1;
indeks[x]="Update";
x=x+1;
indeks[x]="URL";
x=x+1;
indeks[x]="<h3 class='index' id='indexv'>V</h3>";
x=x+1;
indeks[x]="Variabel";
x=x+1;
indeks[x]="Verifikasi";
x=x+1;
indeks[x]="Video";
x=x+1;
indeks[x]="   Video Klip";
x=x+1;
indeks[x]="Vierra";
x=x+1;
indeks[x]="<h3 class='index' id='indexw'>W</h3>";
x=x+1;
indeks[x]="Warna";
x=x+1;
indeks[x]="Whos Amung Us";
x=x+1;
indeks[x]="Widget";
x=x+1;
indeks[x]="<h3 class='index' id='indexx'>X</h3>";
x=x+1;
indeks[x]="XML";
x=x+1;
indeks[x]="<h3 class='index' id='indexy'>Y</h3>";
x=x+1;
indeks[x]="Yahoo";
x=x+1;
indeks[x]="Yahoo Mim";
x=x+1;
indeks[x]="<h3 class='index' id='indexz'>Z</h3>";

for (i=1;i<=x;i++){
document.write('<a href="http://gudangilmu.emeref.co.cc/search?q='+indeks[i]+'" title="'+indeks[i]+'" class="indeks">'+indeks[i]+'</a><br/>');
}
</script>

Ket:
<h3 class='index' id='indexy'>Y</h3> adalah yang kata huruf besar itu, yang menunjukkan huruf awal, yt: A, B, dll.
   Menulis Adalah subkategori dari kata yang dimasukkan, supaya terlihat menjorok kedalam. Misal: tulis, mempunyai subkategori tulisan, menulis, dll.
Yang paling penting adalah ganti bagian gudangilmu.emeref.co.cc dengan URL blog anda.

4. Kalau sudah klik Terbitkan Laman.

5. Jika ada pesan mengeai tampilan gadget, pilih saja Tidak ada gadget. Atau pilih sesuai selera.

6. Selesai!

Contohnya, bisa anda lihat pada daftar indeks di blog ini.

Trims... (cozy)
KLIK DISINI UNTUK BACA SELENGKAPNYA