Tutorial Blog for Stylish Blogger

Bagi sobat blogger yang membutuhkan tools dan aplikasi buat memperindah blognya BEN TOOLS

Buat kawan yang mau pasang iklan Silahkan hubungi pada halaman kontak yah...xixixi.

Blog untuk melihat konten berplat-form blogspot di seluruh dunia dan kumpulan tools pendukung operasional blog.

Your ads here!!!

Assalamu'alaikum
Selamat datang di Tutorial Blog for Stylish Blogger. Semoga tidak keberatan untuk membukanya. Sssttt...MOZILLA pakainya yah...! Jangan lupa mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging \m/
Wassalamu'alaikum ☺

▼ ▲

Selamat Tahun Baru 2012

9 Komentar

Selamat Tinggal Tahun 2011

S̶ͨ͝҉̜̜̮̮̥̟͇̹é̡̜̫̺̼̥̦͛̽ͪ͒͝l̗̠̩̘̀͊ͦ̍ͥ͐͠͠a̷̻̬̭̫̤͔͙͎̽̿͋̔ͨ͒ͮ͞m̛̙̪̲̯̝̝̔͐͂ͬͤ̄͗̂ȧ̘̫ͪ͛͗̑ͯͨͪ̏t̢̛̝ͣ̿̈̈̉͐͐ͯͅ ̠̯͈̺̯̝͉̔̑́Ţ̳̻̮̈ͭ̍̈̿̀a̶̱̗̾ͅh̹͙͙̱̗ͮ̽ͮͪ̆̋ͩ̍ú̵̂ͬ̑͌ͨ͗̿ͩ͏̯͈n̶̍ͭ͑̊͒̂̈́͢҉̟̮ ̵̡̪ͥ̑̏ͧ̈̓̚B̶̟̬̪̬̪͍̰͂͑ͥ̓ͪä͙̘̥͕͔̪̫̤́̌ͤ̂ͥͭ͢r̶̟̺̖̞̔̃͋̆̄̔͡u̸̟̤̅̒̓ͫ̆̕͞ ̷ͮͥͪ̿̅̐̃̚͏̫̫͔̘̺2͚̲̮̝͂͆̂ͮ̍͐ͯ͠0̱̮͙̹͙̳̙̮͗̌̅̍͟1̨͙̻ͯ͒͋̇́̾͘͠2̳̩̯̭̻͕ͭ̓̉̅́͜͟ ͍͍̺̬̫̰̃̏ͬ̄̆ͮ̔ѕ̩̲̳͙͕̑͊̅͛ͪͯͯ̍̚͝͡є̛̣̹͉͉̮͔͙͇ͬͫ͒ͮ̾͝ℓ̧̲͍͖͑̔̒͞α̶͉͗̍̉ͫ̅ͫм̷͖̞͕̥̬̰̲̏ͪ̑̎̄ͩ͜α̨̰̹̣̝̑̈̐̎т̛͇̭̺̙̮̰̺̱̈́̀͜ ̨͚̗̖̹̃̄́̕т̻̟́͋̏͞α͉ͮ̿ͯ̊͟͢н̱̱̤̜̹̬ͤͨ͞υ͋͐͏̧̛̪̩η̶͍͍̹͔̜̝̤ͧͯͯ̄̒̂̉̚ ͙̮͉̤͖̫̊͟в̙̖̱̞͓ͤ̇͛̏̀͑̓͘̕α̨̰̥͖̲̠͖͍͕̞̇̿я̥̻̞̪ͩ͐͐̿̿̋͜υͩ͐̓̏̈̆̃̕͠͏͇͎ ̴͔̻̖ͭͣ̾ͮͅ2͕͇̯̠̖̟͉ͮ̄̀0̗̻͍͕̙͔̄̀1̶̷̬̫̣̭̮̍ͤ̊͐2̸̴͙͕̣̹͈ͮ͒ͅ ̲̘̹̄ͥ͟ร͎͉̘͖͙̔̍̉͞ͅє̨̛̗̻̙̺͎̦̺͕ͨ͛ͯ̇̏̌l̴͔̖̺̭͈̻̺̰͂ͣ̒̽̊͝ค̞̞̙͉̗̲͎̫̓͗̽̔ͣ̀͞๓̤̥̗̮̖̓́́̕ͅค̝͚͍̻̑ͫ͋ͦ̔͐̿͠t̵̨̖̦̫̟͍̜̗̻̂ ͭ̎́͗͏̗̦́̕t̞̖̬͚͕̰̬͗̔̾́̍̀̀ค̸̰̯ͥ͠ђ̶̰̥̯͍̪̻̀͊̀ͦ̋ͅย̩͔͙̩̓̂̀͝ภ̸̪̹̞͉̥̞̗͍̗̎ͦͧͬ͌ ̝̤ͭ͗̂̅̂͡๒̶̞̔̾̊̒ͤ͆̆ค͙̱͍̎͋ͭ̓̂͟͝г̟̮̉̉̐́̚̚͟ย̥̣̠͈̖ͦ̈́̊̊͌ ̨̨̞̦̮̲͚̣̗̉͛͆͆͘2̥̣̫͔̖͇̝̘̉͛͘0͖͚͍̞̇͋̋̀͢1̧̥̣ͦͤ͛͛2̤̼͉̼̤͖̆ͭͯ̈̏ͪ̿ ̪̥̞̩̜͔̭̻̘̓͊̏͊̓̏͒̃͟͜͝5̴̨̨̯̤̤͗3̀̾̾͐̽̏͏̵̦̞̰̯̖1͑͊̑̿͋ͤ̉́҉͈͍̘͔̬̞̘̻͞4̡̩̺̮̱͚̺̒̑ͦ̏̌͘͟m̶̶͙̱̳̙̤̮̦̎͌͒̃̇̈́͐̾̄ͅ4̲͎͖͈̟̫̖̜ͦ͗͘͘7̫̳͉̥̞͙̳ͯ͡ ͉̜̤̅ͪ̀̃͛̐7̴̘̅̑̈́̄4͖͕̰̮̜̪ͥ̾ͅh̴͐͋̏͐ͣ̊͛͏̖̰u͚̫̭͒̽͒ͧ̐̓̇̒́͡n̵̬̱ͮ̉͊̈́̿ͦͪ́̚͞ ̖̜̄̿̅̽̆ͩ͡8̡͙̬͛͛̀ͣ͌̈́4̨̤̳̣̠̍̊̎̑̃ͥ͢r͓̺͙̲͊̏̆̇͡ų̙̟̩̻̥̞͔̯̭̂̎͘ ̱̠̮͕̌̔̿̈ͬ̏͗2̸̪̭̺̩ͩͦ̒̾̏ͬͥ0̶̤̤̗̱ͧ̈͗̊͡ͅ1̵͐ͧ̊̌͆ͬ̔ͮ͏̮̭2͉͕̄͐ͮ ̯̺̥̜̬̹̤͋̀̀s̵̟̲̫͙̺͙͂ͧͨ̃̾̊ǝ̧̻͎̬͑͟1̨͍̗̭̽͋ͭͨ͂͗ͦ̀̚ɐ͖̫͓͎̻͉͖ͩ͋͒̚͢ɯ̴̯̲̥̯ͩ̌̌ͩ̓ɐ̨̨̛̱̣̝ͧ̒̄͂ʇ̷̳̗̽ͩͬ͂̽͞ͅ ̵̢͔̖̞̫̻͛͠ʇ̸̪̟͔̺̺̥̖̗̜̿̽ͨ̓̍̃ɐ̡̛͉̝͈͑̔̋̇͊ͥͬ̏ͦɥ̷̷̠̘̩͍̳͑̽ͣ̈́̒̃n̢ͪͣ҉̙̬̦͙͓u͆ͧͪ̋͐̑̀̚ͅ ̛͔̪̪͚̬̼̖̳̱͊͌ͥ̍͟͢q̢̳̻̹͈̪̼̃̈ͣ̉̉ͯɐ̝̭̮͙ͮͧ͛͑ͫ̀ɹ͋͏͉͖͇͎̞n̨̖̞̄̋̎̍̔̈̍́ ͓̬̝̝͇̝̥͒͠ͅ2̖̫͎͓̝̀̏͐ͭ̀͂̅̊ͤ0̢̘̻͖̜͓̫̌̅ͫ̊̍͟1͖̟̬̆ͯ͊ͫͯ͠2̬̖̰͆̓͊ͥ̕ ̞͇̳͚̥̼͌͛͋͢͡͝
̇͏̧҉̙̫͔̻̭͇̣̖S̶̥͕̤̥͎̓͘͠e̜̺ͯ͗̔̒̋͐Ĺ̡̰̮͈̲̲̠ͧͥ́́a̝ͧ̇̂̓͌̾ͨ͐̓M̩͖̰̘͚ͧ͋̆͐͐̾ͪ͆͘͠ͅa̙̭̮̼̫̖̪͋̅ͨ̒ͮ̋ͦ̕T̬͎͇̬̝̬̜ͪ͋̒͆ͬ͌ ̵̵̗͖̣͔̱̦̘̱͗̾͗ͫ̕T̨͍̣̜͔̭̆͛ͫ̄̾̕a̩̗̱̼̲̺̦̔̊́̋̉̚ͅH͔͈̻̩̩̭ͧͯ́͘͞u̷̧̞͎͍̻̍͆̒̃͜N̳͈̲̘̱͖͍͌ͬ̒̋͌ͬ͋̕͡ ̬̬͉͉̦̮͔̩͒̀̄͆ͯͬ̂͆͊͠͡Ḃ̖̲̥͚͚̦̞͓a̲̝̓̃Ṙ͈͈̠͍̩̹̈́̇̇́̀ṳ͆̆̀ͫ͒͌̀͂̀ ̫̫̣̔̇̇̒ͧ͋̊2̶̶̬͕̪̹̌̔͒̈ͭ̊0̨̻̹͎̓̌̈ͪ̈́̓ͧ1̯̪̹̝̙̭̭͕̬͆̄̀͡2͚̯̳̜̳́͆͗̾͆̆͊̈́́͝ ̸̵̬̜̯̑͌̉ͬ͟
͙̝̙̭̾͂ͤͥ̅͜͠ṩ̵̴̘̩̩͇ͬ͐ἔ̢̧͍̲͇̲̟̞ͣ̍̑͠ͅłͨͦ̔͠͠҉̝͙̦̲ᾄ̍ͣ̐͑̐̔͞͏҉̜̥̣͚̘м̮̱̭̗̎̆̈̊͆ᾄ̭̠͙͌̆̇͊̍̿̊̀̕ҭ̵̜̫̞͗̌̔ ̸̩̭ͧ̽̓ͯ̃͛̒ҭ̨̤̮͙̜͉̦͌̕ᾄ͖̖̙̖̯ͭ̾ͮ͟͝ђ̶̢͙̗̣̤ͦ͆͊̋ͭ̀͊͗̀ὗ̲̮̔ͨ͐̑̿ͭ̌̕ᾗ̗̭͉̥͈̮̫ͣ̑͑̓̀̀̎ͫ͢ ̟̭̬̯ͭ̓̊ͤͨ͞в̬̘̻̒̄͋ͥͣͩ̓͑͢͝ᾄ̳̫̥̇͐͗ͧ͌̓́ͅʀ̡̄ͭ҉̗̣̟̯̙̞͞ὗ̭͔͍͈͛ͫ̇ͯ ͇̲̅ͬ̇̈͋ͣ̕2̡̬ͭ̂͂̌̒̉0̛͉͎̳̟ͨ͆̓͌͘͟1̧̱͕̞͍̫͕̭ͮ̇ͬ̊̏͌ͦ2̔̄͐͂̀҉̩̞̥ ̠̤̮̗̯̭̹̙͗͗ͪ͊̽̉͒ͧs͇ͨ͌͌͂ͩз̻̖͚̼̺̒ͨͅl̛̬̖̳͕̰͎̦͂д̈́̐̅̾҉̖͔̭̬м̤̹͙̩̼̟ͯ͗ͮ́ͦͤ͛͡д̖̗͍͖͐̔̾̓ͥ͐̃т̗̰͖ͮ̐̃͒ͯ́́ ̫͈ͬ̀͞т̛̦̥͓̗̭̜͉̤̋̉ͯ̎͊̿ͯ̀̚д̵͖͍͉̠̼͚ͣͯ̐̃̚н̵̴̣̮̻̳͖̬̥͉́ͣ͆ͅц̢̪͈ͣ͆̿̌̓ͤͦ̈́̕и̯̥̭̹̬͓̣͑̒͌ͧ̓ͭͬͯ̆ͅ ̡̹̜͇͐̌̆͗̍̀в͎̾̑̓̓д͎͉ͬ͊̎͛ͣͬͅя̧͙̩̱ͨ͌͆ц̣͔͉̘̮̪͇ͯ̄̂̆ͩͣ ̮͇̼̲̣̜͔̗ͩ̓̋͑ͫ͆͘2͕͔̂͌̔͋͠0͍̠̥̗̦͌̅1̴̢̛̲͎͙̠ͨ͛ͥ͑ͬ̽̂2̠͕̠͎̭̭͚̎̉͂̇̊̏̉͐ͧ ̡͔̤̖͉͍̻͍ͤ̽́͆̄̀͌
̵̢̤̘̠̝̓̈́ͤͪͣͣʂ̛̼̱ͫ̒͊ə̛͓̩͖͇̻͓̉̾̋͗ͅɭ̴̲̯̳̺̲̖̥̘͒̌ͮ͐̆͌ͣ̏͜ά̭̗̗̳̗͇̬̃̊ɱ̷͚͖͙̫͖̲̈͋̿̿ͬ̾̉͝ά̌ͣ҉̷͏̟͙̪̪̫͕̜͙ʈ̧̪̪̗̘̰̼͆̓̔͢ ̖̻͈̱̫̳̩̓̓͆́ͪ͑̀ʈ̝̒ͬ̌̒̅͒ά̖͇̦͗ͭ͊͟͢͞ɧ̷̗̫̲̳̦̗͔̗̭̒͒̌ʊ̸͚̫̓͂ͩ̒̍̔ͧ͌ɲ̸̤̱̗̒͌̉͂͠͞ ̵͈͖͇͉͎͉̇ɓ̗̖̩̗̭̇̃͛͑ͫ̈͘͜ᾴ̬̰̥̤̘ͭ̐̏̿͗̓ɽ̵̬̬̂͌̉ͬͤͧ̓͜ʊ̷̠̤̥̖̫̪̭́͂̿ͤ̽̇͑ͅͅ ̾̇͏̨͉̣͈2̹̭͉͓̩̈̍ͭ̒0̧̣̎̈́̔͗̓͠1̪̻̬̣͕͑ͥ̒̅̀͜͡2͕͉͕̺̲̮͉̜̒̔ͩ̓͆ͮ̀͘ ̰͔̗͓̳̭͖̖̆š̶̥̭͕̮̋̓̒͑̂є͉̘̪̭̱̄͊͗̍̓ͥ͢͡ℓ̨̧̦̮͑̚͘ά̾ͣ̈ͩͬ̃ͨ҉̢͍̣̝͖͈̤м̨̺̤̠̝͕͛͊̎ͭ͆̀̏͑͢ά̸̮͈̗͔͙̓̅͂̌̕т͉͈̬͖͔͉͍̽̒͐͋̋̎̂̚̕͞ ̵̶̤͍̪̭̝͕̪̂ͯ̋̏̈́ͦͅт̸̝̺̯ͩ̏̇̈̚ͅͅά̥̬̥̞͙̰̳͋̊Ђ̷̞͉̳̭̹̯ͩ̍ͮ̆̋̄͗̌͝͠ϋ̝͉̥̊͋̀̾ͦ̋͒̅й̹̫̤̫̐̉̍̓ͪͫ͆̚ ̛̩̩̰̟͚͖̺̥ͦ̈͗в̶̵͖͚̼͓͍͉̼̓͂͂͠ά̨͎̞͈̩̘̱ͦ͑̆̕я̶̢̛̳͍͖̬͕̦̙̋͆̄ͤͣϋ̷̬̩͍̰̳̻̹̑̊̑̔̋͟ͅ ̵͔͍̗͆̑͘2̬̪̻̱̘̥͆0̗̲̣̇ͨ̊̀1̧̗͕͕̟͎͔̖͗̒̓̈̀́̚̚2̷̡̗͖̣͂̅͂ͪ͑̉ͪ ̶͚͊̀̀与̵̒ͣͮͥ̈͑̓̓͢͏̦̠̗̜̬̲王̼̫̯͕͊͆心̘͖͌̊̎人̶̛̪̜͔̳̰̲͊́ͅ从ͮ̃̉͌͗͝҉̘̮̬人̮̖̯̟̲͖̪̞̙͂̌ͥ͌̌̒ͮͪ̚͠͝ㄒ̗ͯ̋̔̏̈͝ ̩͉̥̲̏̇͒̆ͥ͞ㄒ͖̳͓̣̒̆̋̔人͓͚̦̥̘ͪ̿̍̇̐ͫͨ́㈠̡̻̺͖̺͖ͫ̆ͅㄩ̧͈̺̰͇͓̪̃̈́͂̇́͘ㄇ̢͚͉̙ͯ̿̓̈͐̏͛̕͝ ̵̞͕̥̙̦͖ͤ̂ͦ͟日̧̹̩̪̤͔̓͌͘̕人̫̮̺̣̬ͧ͐̇ͨ̅͂̓̅͘͟͡尺̪͆̿̉ㄩ̸̜̝̬̘̆̈͊ͨ͟ͅ ̼̮͗ͣ͝2̻̰̹͙̠̜ͥ͂ͭ̾̿̈́̂̕͠0̵̢̦̲̪̦͆̋͋̏̓͜1͕̩̺̗̥̮̖ͤ̍ͧ̂̃ͮ2̴̤̻̲̈́̽͒̃̄̋̂̓̚ ̷̧̙̣̣̘͉̪͑̑̋͛̇͆̌̃͆ร̼̰̪̽̌̾͋̑͘͜͝є̨̠̠̙̼̟̊ͬ̌̈́̇͛l̘͓͓͔̙͚̝̿͞ค̢̤̭̻͍͙̳͖́́̔๓̞̗͔̱̮̠͖̓̅ͅค̲̦͇̄̊͑ͪ͌̍͑͢t̷̟͓͉̦̔̾͗͢ ̰̜̄t̨͈͕̤̠̰̖̭̏̊̏̎̿͝ค̰̼͙̫͗̃̍̒̑͆ђ̧ͣ̆͑͐͌̔̇̚͏̺̜͈̹̠ย̴̮̠ͫͫͦ͂ภ̵͚͎͉̭̩̩̩̞͆ͫͨ̓̉́͌̈́̋ ̶͎͍̲͙̩͕̘͂́̔̊̓ͬ͗̏๒̛̥̣̗̗̫͒̃͛͡ค̴̪͖̺̌̀̀г̶̴̡̤̖̱̹ͭ͗̏ͪย̶̺̬ͬ̀ͭ͗̊̇̍͌͞ ̭̟͓͉͎̦̳̪̱̇ͤ͜2͗͊̾̎͏̳̱̫̖0̬̤̮̻̘̩̥ͧͩ̊́͂̿̋ͥͯ̀͡1̧̒ͩ̿̾͆͒ͤ͟͏̠̪̺̠͇͎2̵̘̱̯͙ͩ̑̈ͫ̒̆̇̾ͯ͞ ͈͎ͮ̃̃̋ͯ͒̕͠ⓢͪ͐̇̓͏͎͈ⓔ̗̼̭̺̦̲̫̈ͭ͒̍̊̐̈ⓛ̵̡͙̤̻͗̈͐ͩ́̓͢ⓐ̜͒ͨ̌̄̄͝ⓜ̸̼̹̗͎̯̪̥͎̪ͦ̑ͣ̃ͥ͋ͣͦ͢ⓐ̹̻̲͙͑ͦ̐̇̚͜͝ⓣ̧̥̦̩̤̻̹͔͕̓ͤ ̢̗̭̗̬̹͚̲ͥ̌ͯ͛͌͋͆͘ⓣ͉͉͊̑͑ⓐ̴̢̗͕͔̱̰̜̅̒ͦ̈̊ͨ̉ͣⓗ͎̯̩̱̫̩̑́̄̃̒̈́̿ͭͅⓤ̡͈̯̹̻̗̭̹̫̳̃ͥ̈́̀ͬͩ̍ⓝ̢̝̭̻̼͚͔̰̅ͩ͗̒ͅ ̷̗̖̗͗͊͝ⓑ̛̣̮̰̹̣̈́͆ͨ̚ⓐ̶̻̱̱͖̀̍̐ͫ̐̈́̎ⓡ̻̥̬̍̀͊ͨ̅ͨ̕͝ⓤ̡̨̭̣̟̇ͫ͛̊ ̡̝͉͇̟͗ͤ̎̋̉͊ͩ͠2͍̳̜̞̙̇̐ͩ͆͡0͈͔ͭ̅́͢͡1̲̠ͣ͛̈̏2̜͙̤̝̗͚͚̥̅̾̾̈́͐ͧͨ̌͠͡

▼ ▲

Make a Node, Notes, Schedule etc with SwitchNode

7 Komentar

▼ ▲

Banned User on Comments Area with JavaScript

8 Komentar

Kemarin telah dibahas bagaimana . Kali ini Koben si bloglang anu ganteng kalem tea kembali mau menerangkan proses how to banned user on comments area using JavaScript! Memblok seseorang, sebuah web/blog, sampai supaya bila menuliskan komentar, isi dari pada komentarnya tidak akan tampak >:)
Tenang saja sobat-sabit walau tidak terlihat komentar ketika web/blog sedang dibuka namun komentar itu tetap ada di bagian Editor Tab Comments blog kita ;)) Caranya juga cukup mudah, kalian hanya perlu ngelakuin Add a Gadget ► HTML/JavaScript. Terus masukin ramuan scriptnya deh :D Silahkan diambil dulu, terus buka dengan notepad ya. Karena disini kita akan melakukan penyetingannya bos :)

newBlogBanScript.2.txt 4.9 KB

Beres dengan mendownload script, buka dengan Notepad++! Begini idealnya jika memang mau memakai hack banned komentar.

Jangan bilang² alias diam saja kita punya yang kayak beginian.
Hostingkan script dengan nama yang aneh. Simpan dimana yg kalian anggap tersembunyi ;))
Berdo'a

Sudah dibuka dengan notepad??? Waaa gimana sih kok belum dilakukan ~X( Habis kata² basi buat muqodimahnya nih #:-S Mau sudah atau belum setelah membuka script dengan notepad, berikut instruksi pemasangan bagaimana menempatkan ID (identitas) ke dalam blogbanscript!

Full Instructions

Buka blogbanscript sebagai file teks menggunakan editor teks (Notepad).
Cari baris yang bertuliskan // Start entering banned commenters on next line.
Lakukan dengan menekan tombol keyboard Ctrl + F pastekan deh kata yg dicari.
Tepat dibawah kata yg dicari, tuliskan kode/ID komentator yg akan di BANNED.

Perhatikan dengan seksama penulisan tanda² bacaan seperti koma, curek atas, garis miring dll.
Contoh penulisan menggunakan profile blogger:'NOMOR BLOG ID', // Nama
Masukan setiap kode komentator tujujan pada baris baru.
Save script jika perlu selesai tahap ini.

Tekan kembali Ctrl + F temukan kata bertuliskan // Enter your own HTML in the quotation marks below:
Tepat dibawah kata yg dimaksud kita bisa melakukan sedikit pemasangan syntax HTML

Sobat dapat membuat syntax img seperti<img src="http://link-image-kesukaan-yg-akan-tampil.jgp" />
Atau kayak gini I'm Kicked You <img src="http://link-image-kesukaan-yg-akan-tampil.jgp" />

Save script kembali.
Tekan Ctrl + A diikuti Ctrl + C
Baru deh masukkin HTML/JavaScript gadget.
SAVE.

Bila keterangan saya kurang jelas, dan kalian kepengen tau cara memasukan banned komentar via FB or web silahkan saja datang kesini . Hehehehe :D
Happy Banned \m/

▼ ▲

Comments Blog Under Post in Home Page

6 Komentar

▼ ▲

Make Something To Be Float

12 Komentar

Pelanggan setia Koben ;)) ada yang bertanya ben.. gimana sih kalau mau bikin gambar yang ada di sebelah kiri terus ngikutin kalau kita scroll ke bawah? begitu kata sobat ! Jadi mirip dengan . Kalau fixed berarti ketika melakukan scroll tetap dalam keadaan diam. Sedangkan sobat Nurmayanti kepingin ikut walau di scroll!
Mencari kesana kesini feature floating ternyata lumayan banyak pemakaian scriptnya. jQuery plugin juga lumayan runyem -__-' Satu solusi memakai JavaScript ternyata, yang scriptnya rada sedikitan ;) The great web dynamic drive salah satu tempat free script menuliskan tentang ! Tapi Koben lihat itu cocok untuk sobat yg mencari bagaimana membuat iklan melayang :D Jadi yg mendekati maksud dari tema postingan kali ini make something to be float jatuh pada pilihan by Dynamic Drive DHTML Scripts :-/

Kasus selesai karena sudah terjawab :P Mau jalan-jalan sebentar melihat aneka float & fixed article membuat menu dengan fixed property, float bisa hilang :D
Tidak seru yah postingannya :)) Sekarang coba bandingkan banyak mana floating menu script kreasi dynamic-drive dengan script float yg Koben temukan ketika nge-bloglang :-?

Kode CSS Float

position: absolute;
z-index: 3;
top: 50%;

Silahkan kreasikan sendiri variabel CSS yang mau dipakai! Koben masukan initnya saja ;)

JavaScript Float

<script type='text/javascript'>
//<![CDATA[
var posY=333;
var chasingFactor = .05;
var updateFrequency=55;
var idleCheckFrequency=1 * 1000 ;

var yMoveTo=0;
var ydiff=0;

var b=document.getElementById("B_98");
b.style.position="absolute";
b.style.zIndex="2";
b.style.top="50%";
b.style.left="1ex";
b.style.fontSize="5ex";
b.style.color="pink";

function ff(){
   if (navigator.appName == "Microsoft Internet Explorer") {
       ydiff = yMoveTo - document.documentElement.scrollTop;
   } else {
       ydiff = yMoveTo - window.pageYOffset;
   }
   if ( Math.abs(ydiff) > 9) {
       yMoveTo -= Math.round(ydiff*chasingFactor);
       b.style.top  = (yMoveTo+posY).toString() + "px" ;
       setTimeout("ff()", updateFrequency);
   } else {
       setTimeout("ff()", idleCheckFrequency);
   }
}

window.onload = ff;
//]]>
</script>

Sisipkan script tersebut tepat diatas tagging </body>
Keterangan: "Perhatikan script yg diberi warna! Rubahlah sesuai kebutuhan."
Langkah terakhir yakni memasukan syntax HTML di dalam struktur body template!<div id="B_98"> ADD YOUR CONTETNT HERE </div>Good luck :)
Bila menemukan kembali yg lebih sedikit scriptnya, saya update postingan ini :))
Bagi para pencinta jQuery, ternyata untuk membuat sesuatu bisa menjadi float ada juga. Perhatikan langkah² berikut.

jQuery Plugin

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
        var posicion = $("#float_").offset();
        var margenSuperior = 15;
         $(window).scroll(function() {
             if ($(window).scrollTop() > posicion.top) {
                 $("#float_").stop().animate({
                     marginTop: $(window).scrollTop() - posicion.top + margenSuperior
                 });
             } else {
                 $("#float_").stop().animate({
                     marginTop: 0
                 });
             };
         });
});
//]]>
</script>

Kode CSS

#float_{
position: absolute;
padding: 5px;
top: 3px;
left: 3px;
border: 1px solid #CCC;
background-color: #FFF;
width:auto;
border-radius: 5px;
}

Markup HTML

<div id="float_">

YOUR CONTENT HERE

</div>

Demonya kalian bisa melihat di sebelah kiri ada gambar favicon twitter, facebook dan orkut!
Source by: http://webintenta.com/jquery-crear-una-caja-flotante.html
Happy float \m/

▼ ▲

Google Yang Aneh!!!

2 Komentar

Kepingin blog kalian penuh dengan atribut aksesoris full stylish! Tapi dengan keterbatasan ini itu kita tidak ada waktu untuk memasukannya kedalam blog tercinta? Bayangkan saja sobat kepingin memasukan teknik ke dalam blog kalian! Beruntunglah blogger mempunyai sistem add a gadget ;) Tapi sekarang Koben tidak akan membicarakan tutorial kok ;)) Kepengen senang-senang saja sama <:-P Diam-diam diluaran sana banyak yang membuat halaman search engine berpenampilan seperti google! Sempat heboh dulu kasus perang antara Embah Google dengan Engkong Goojje

全球首款"社交搜索"平台通过她寻找信息和社交圈子 :D

Tapi mesin pencari yang akan Koben bagi sekarang yaitu mesin jelajah yg tampilannya berbeda namun mengusung tema dari google search engine :-/

Google Loco

Google Loco mempunyai gambar logo google yang berdansa-dansa dan cobalah sobat ketikkan kata apa saja didalam kotak pencariannya! Pasti terdapat warna berkdeip-kedip.

Googletronica

menampilkan logo google menyala dan mengeluarkan suara-suara yang bisa di setting pada bagian pojok kanan atas!

Google Gravity

Model sudah terkenal kemana-mana. Bikin pusing kelapa berputar-putar @-) melihatnya.

Google Sphere

sebelas duabelas dengan si gravity! Belum apa² sudah berterbangan, eh pas didekatkan malah membesar :-w

elgooG

kutneb ini gnay turunem ayas nakgnugnibmem. naknagnaJ kilabret taub ,acabmem lamron ajas hadus regnilebek =))

AnNOyIng gOOgLe

SeCaRa pAsTiNyA TiDaK TaHu aPa bEdAnYa nIh! NaMuN DiLiHaT-LiHaT TuLiSaN MeNu² YaNg aDa MeNjAdI bErUkUrAn bEsAr kEcIl bEsAr kEcIl 8-}

Weenie Google

Tunggulah sampai beres terbuka 100%, lihat kejadian peristiwa menciut pada :-B

EPIC GOOGLE

malah kebalikannya dari si weenie google sob! Ape die kate kite punya mata bolor. BAH!!!

Rainbow Google

cocok banget bagi yang suka dengan :P
Sudah dulu ah, belom nemu lagi ;))
Happy happy dah \m/

▼ ▲

Looking for Slide Features jQuery Plugin!!!

2 Komentar

▼ ▲

Creativity Using CSS Keyframe Animations

14 Komentar

Ternyata memang menarik mendalami salah satu variable CSS3 teranyar sob, yakni mengenai fungsi dari fitur CSS Keyframe. Aturan rules seadanya bisa kalian baca , penjelasan syntax coba satroni by CSS-Tricks :-bd
Menggunakan fitur tersebut kita bisa membuat animasi warna (rainbow) dengan mudah . Sampai slider bisa kita buat memakai CSS !
Beben Koben si bloglang anu ganteng kalem tea mengeksplore satu web developer, dimana konten artikel berkategorikan CSS begitu maknyus . Di design shack kalian bisa mempelajari secara instant mengenai fitur² CSS3. Banyak referensi web lain yang tidak kalah gaya. Dari sana Koben akan berbagi trick memasukkan ke dalam blog.

Memakai javascript snow lumayan banyak :D Tapi sekarang dengan CSS Keyframe Animations sobat bisa membikin efek salju. Sebelum memulai ada baiknya kita mengetahui terlebih dahulu support atau tidak browse kalian. Serta kode² yang berbeda dalam penulisan! Penulisan coded alakadar tertuju untuk Mozilla, Webkit and Microsoft.

/* Keyframes */

@-keyframes XXX {

Default Browse

}

@-moz-keyframes XXX {

Mozilla Browse

}

@-webkit-keyframes XXX {

Webkit Browse

}

@-ms-keyframes XXX {

Microsoft/IE Browse

}

Lihat tuh cara penulisan syntax coded CSS, cuma bagian depannya saja yang perlu kita perhatikan ;) Kata master Joshua Johnson, apabila kepingin mengerti lebih jauh mengenai beberapa decently complex keyframe animations baca dulu ini . Tahu dong Webkit variable untuk jenis browsingan apa? Kemudian Koben praktek dengan code yang sudah ada, terus menggantikan syntax coded CSS depannya saja :D

Sobat nanti akan menemukan 2 buah jenis demo Slideshow & Porthole yg mana support terhadap webkit browse dan tidak untuk mozilla :( Inilah yg terjadi pada demo tersebut jika kode-kode yg ada disadur agar support terhadap browsingan mozilla ;)) :">

He.he.he.he. :D
Sekarang mari buat efek salju menggunakan CSS Keyframe Animations. Tentunya Koben memakai kode support untuk mozilla :) yang support Webkit kan sudah ada disana ;)) Demonya disatukan dengan yg diatas saja yah.

Memasukan ke dalam template blog harus ada sedikit proses edit! Jikalau body template sobat memakai background-image, harus dihilangkan terlebih dahulu, dan gantikan dengan warna latar belakang saja (background-color) Warna yg saljunya nanti bisa terlihat lah ;) Masukkan keseluruhan bumbu ajaib ini bos!!!

body {

background-color: #5599FF;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6HZJLfbO7isl6UYhC4b-oFl7TJ7ZAmsOYFXkFfrJnseeVC9ZszNj0ldxu8hksVkPYwgx4LtKqBLNTAnD1WKnWD6dd5i2fup2A7H0SdvmKH285ABbHQnqDrWeQIf1o0brrLmNDXxfNj3o/'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjljoFydR2eu4QmhBURtJPg1kSwKSY84DLF6Od4JCMoPHHb7VpjEB0oMGYz5v1sXM4E8tw_npEJdD5U7xr9ZsZ3IG1PRcj98o2ODJDMXZ7ERjKWIeAeFNGIbP2jRTidw89dnP2P5Ee38yA/'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJmVWrRVZn_m8kw7rGPrSy75gzhviBV7uVRR30rXs-BHMVYMyyjezb2ylbRp6f2_AOLupHB4Z5j-eCiJexDXDeAmh3PAPVTIl6GzzZJsCA9QQ1msJgqUu-qAYTNR1cBQBxtWXDwiMFx-Y/');
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 10s linear infinite;
-ms-animation: snow 10s linear infinite;
animation: snow 10s linear infinite;
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-moz-keyframes snow {
0% {background-position: 0px , 0px, 0px;}
100% {background-position: 500px 1000px, 500px 500px, 300px 300px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-color:#b4cfe0;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px; background-color:#6b92b9;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

Teliti lihat masukan variabel coded ke dalam syntax body!!! Rumusan kode CSS3 diatas untuk semua jenis browse :D
Thanks design shack :x
Happy keyframe \m/

▼ ▲

Fancy Hover for Image with CSS3

15 Komentar

Sebelum membabat tutorial hack full stylish kepunyaan master , Koben akan berbagi kembali . Memang tidak ada habisnya trik hover kalau dibahas ;)) Coba lihat artikel Koben sebelumnya . Hover attribute selalu berkaitan erat ketika kita sedang melakukan menyorot suatu object, dimana akan terlihat reaksi hover sesuai dengan kode yang kita pasangkan :D Ngerti sukur nggak paham pasti :P
Ada baiknya jika sobat berolah raga sebentar menjelajah trick hover yang ada di blog gaya oke punya ini:

Bagi yang sudah membacanya, baca kembali biar makin gooder :D Okelah Koben langsung ke acara pamungkas bagaimana cara membuat fancy hover for image with CSS3. Terinspirasi setelah membaca postingan . Bagi yang mau membuat galeri image oke punya silahkan ikuti langkah²nya pada web bersangkutan :)
Setelah dipikir-pikir ternyata trick tersebut bisa gue simpulkan perpaduan gaya antara & !
Trick hovering by Admix Web dikhususkan guna menampilkan image dengan pemanggilan tagging memakai tag defines a list item <li> Ada sedikit masalah juga kalau memakai rumusan dari sana, ketika kita melakukan hover pada object yang besar akan ada jejak bekas shadow box terlihat.

Solusi untuk ini yakni dengan memberi batas pada width & height pada hover atribut. Jadi image dengan resolusi yg lumayan besar akan kurang terpakai :D (ya sudah kalau tidak paham, memang susah untuk paham itu) :P
Oleh sebab itu si Bloglang anu ganteng kalem tea memodifikasi trik itu agar berfungsi pada single image for every image! (gak paham lagi juga gak apa-apa)

Demo Fancy Hover for Image

Terlihat perbedaannya kan! Walau tinggi gambar ditinggikan, dan lebar image dilebarkan tidak tampak bekas jejak shadow box!

CSS3 Coded

.mini {
margin: 5px;
width: 100px;
height: 100px;
}
.gallery .after {
padding: 10px;
visibility: hidden;
position: absolute;
background: #FFA;
border: 1px solid #555;
-webkit-box-shadow: #333 0 0 10px;
-moz-box-shadow: #333 0 0 10px;
box-shadow: #333 0 0 10px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.gallery:hover .after {
width: 300px;
height: 300px;
visibility: visible;
margin-left: -50px;
margin-top: 10px;
}
.after {
width: 0;
height: 0;
}

Keterangan:
Kode warna merah tua = gambar tampil yang terlihat.
Kode warna biru muda = gambar tampilan hover ketika disorot.
Untuk mengatur jarak image hover, pada kode warna biru muda ada variable margin-left & margin-top.

HTML Syntax

<div class="gallery">

<img src="http://LINK-IMAGE-TAMPAK.jpg" class="mini"/>
<img src="http://LINK-IMAGE-HOVER.jpg" class="after"/>

</div>

God luck :)
Happy hover funky crot \m/

▼ ▲

Last Comments is a Master Blog

9 Komentar

▼ ▲

Select Text Trick jQuery Plugin by: motyar

3 Komentar

Karena Koben telah menemukan blog gaya lainnya, maka petualangan mengacak-ngacak artikel dari master @motyar akan saya sudahkan saja :D That's right brother, master seorang Web Services and API developer berdomisili di kota Chandigarh INDIA. Aca aca pahe pahe...paket hemat telungatus :D Menguasai beberapa bahasa pemograman antara lain: OAuth 2.0 authorization protocol, Expert in hand-coded PHP and JS, Proficient in working with JSON and XML, , and . Silahkan sobat sekalian kunjungi blognya, acak acak guna menambah skill kita :)
Sebelum menyudahkan adventure from Motyar Blog, si bloglang anu ganteng kalem tea akan mencatut satu lagi postingan mengenai hack jQuery plugin (Get user selected text with jquery and its uses)

Trik jQuery plugin ini tercipta tidak lain untuk menambah daya tarik pembaca dalam melakukan penjelajahan konten sebuah blog/web :D Mirip pada postingan GUE sebelumnya yang berjudul drag for search & share! Bagi blogger yg ingin jalan pintas tersedia dalam bentuk widget dengan fungsi sama, silahkan baca browse faster with fastestFox :-bd
Versi master Motyar akan menghasilkan 3 buah variabel. Select text to get search the query by WTF search engine, double click on text to get search query own blog/web, and select text for ZOOM!
Please welcome

jQuery Plugin Select Text

<script type='text/javascript'>
//<![CDATA[
function getSelected() {
   if (window.getSelection) {
       return window.getSelection();
   } else if (document.getSelection) {
       return document.getSelection();
   } else {
       var selection = document.selection && document.selection.createRange();
       if (selection.text) {
           return selection.text;
       }
       return false;
   }
   return false;
}

$(document).ready(function () {
   var url = 'http://google.com/search?q={term}',
    selectionImage;
   $('#show-bubb-text').mouseup(function (e) {
       var selection = getSelected();
       if (selection && (selection = new String(selection).replace(/^\s+|\s+$/g, ''))) {
           if (!selectionImage) {
               selectionImage = $('<a>').attr({
                   href: url,
                   title: 'Click here to learn more...',
                   target: '_blank',
                   id: 'show-bubb'
               }).html("Search!!!").css({
                   "color": "",
                   "background": ""
               }).hide();

               $(document.body).append(selectionImage);

           }

           selectionImage.attr('href', url.replace('{term}', encodeURI(selection))).css({
               top: e.pageY - 30,
               //offsets
               left: e.pageX - 13 //offsets
           }).fadeIn();
       }
   });

   $(document.body).mousedown(function () {
       if (selectionImage) {
           selectionImage.fadeOut();
       }
   });

   $("#db-Click-text").dblclick(function () {
       window.open("http://embah-google.blogspot.com/search?q=" + getSelected());

   });
});

$('#zoom-text').mouseup(function (e) {
   var selection = getSelected();
   if (selection && (selection = new String(selection).replace(/^\s+|\s+$/g, ''))) {
       zoomDiv = $('<div>').html(selection).attr({
           id: 'zoom-div'
       }).hide();
       $(document.body).append(zoomDiv);
       zoomDiv.fadeIn();
   }

   $(document).mousedown(function () {
       zoomDiv.fadeOut();
   });
});
//]]>
</script>

Gantikan URL dengan blog kalian yang diberi warna merah tua. Letakkan dibawah jQuery inti atau sebelum tag </body> Untuk customize CSS bisa dikreasikan menurut kesukaan...

CSS Select Text

#show-bubb {
background: #D00;
position: absolute;
margin-top: -10px;
color: #55FF00;
padding: 0 5px 3px 5px;
border: 1px solid #111;
border-radius: 5px
}
#zoom-div {
position: fixed;
color: #111;
font-size: 20px;
background: #FFFFC8;
left: 0;
top: 0;
width: 100%;
border-bottom: 5px double #333
}

Don't forget to visit and get the great article's by Master Motyar :)
Happy blogging \m/

▼ ▲

Make Labels Cloud Full CSS For Blogger

6 Komentar

▼ ▲

Energy Saver or Screensaver jQuery Plugin

6 Komentar

Dalam rangka mengacak-ngacak artikel yang nanti pada akhir petualangan akan Koben kasih tahu blognya :D Masih mengenai trick jQuery plugin yang sebelum postingan ini membahas tentang ! Aksesoris yang bisa kita pasang sekitaran kursor memakai jQuery script ;) Sekarang bloglang anu ganteng kalem tea mau berbagi cara membuat energy saving mode atau screensaver pada blog. Dulu pernah dibahas gimana proses buat via jasa online kreasi Online Leaf Web. Bagi yang tidak suka dengan script, ada juga alternatif .
Mungkin masih jarang yang tahu ternyata dengan menggunakan script jQuery kita bisa membuat hal serupa! Lumayan untuk efisiensi biar tidak banyak script ;))

jQuery Plugin - Energy Saver

<script type='text/javascript'>
//<![CDATA[
(function($) {
 var defaults = {
  delay: 5000,
  events: 'mousemove mousedown keydown'
 };
 
 $.energysaver = function(settings) {
  $.energysaver.settings = $.extend({}, defaults, settings);
  $.energysaver.startCounter($.energysaver.settings.delay);
  bindEvents($.energysaver.settings.events);
  return;
 };
 $.energysaver.end = function() {
  
  $(document.body).css({'background':''});
  $.energysaver.resetCounter();
  
 };
 $.energysaver.start = function() {
       $(document.body).css({
                          background:'#000'
      });

 };
 $.energysaver.startCounter = function(timeout) {
  $.energysaver.counter = setInterval("$.energysaver.start()", timeout);
 };
 $.energysaver.resetCounter = function() {
  clearInterval($.energysaver.counter);
  $.energysaver.startCounter($.energysaver.settings.delay);
 };
 function bindEvents(events, elmt) {
  $(document).bind(events, $.energysaver.end);
 };
 
})(jQuery);
//]]>
</script>

Masukkan script plugin tersebut dibawah jQuery inti, boleh dicoba juga letakkan tepat sebelum tag </body> Script pemanggilnya...

Script Pemanggil jQuery Energy Saver

<script type='text/javascript'>
$(document).ready(function() { 
$.energysaver({ delay: 10000 });
});
</script>

Rubahlah nominal delay sesuai dengan kebutuhan masing² (1000 = 1 detik). SAVE.
Demikian cara membuat energy saver menggunakan jQuery plugin. Semoga bermanfaat and good luck :)

Happy energy save \m/

▼ ▲

Decoration jQuery Plugin Around The Cursor

2 Komentar

Mengumpulkan memang tidak ada habisnya... Sekarang Koben akan berbagi seputaran trik jQuery plugins disekitaran area cursor. Menambahkan embel-embel disekitaran cursor dengan menggunakan sebuah gambar. Masih ingat Koben memasang gambar pocong yang selalu mengikuti cursor bergerak! Sebelum masuk sesi script, ada baiknya saya mengingatkan kembali cara penulisan struktur jQuery plugin ke dalam template. Versi script jQuery teranyar kepunyaan google<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>Bila sobat sekalian sudah mempunyai jQuery script tersebut, jangan dipasang lagi. Kalau masih pakai versi lama, boleh diupdate ke versi anyar 1.7.1 ;)

Yuk kita mulai membuat gambar selalu mengikuti cursor dengan jQuery plugin :)

Follow the Cursor Image

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
  $(document).mousemove(function (e) {
      $('#img-cur').offset({
          left: e.pageX,
          top: e.pageY + 35
      });
  });
});
//]]>
</script>

<img id='img-cur' src='http://LINK-IMAGE-30 x 30.PNG' alt='&#9829;'/>

Gantikan link image dengan gambar kesukaan kalian. Resolusi image 30 x 30 pixels. Script plugin letakkan dibawah script jQuery inti. Utamakan simpan script tepat sebelum tag </body> Lihat hasil kerja!

Movement of the Shadow Effect

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
   //<![CDATA[
    $(document).ready(function() {
        $(document).mousemove(function(e) {
            pointer = $('<img>').attr({
                'src': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Fm3Nm_EB1ELo-2p0z09hkiWfYaGLnmhAXf-3bIILe241-hOxv6X_7bZnp7jlV_heo6D8oJPpp7X4hWV3PxntcmZUyYipRzdaB-OQ3-2L353-VZoIsiveX0Ls83AjbppXn80WPYy-WW_E/s32/cursor.png'
            });
            $(document.body).append(pointer);
            pointer.css({
                'position': 'absolute',
                top: e.pageY + 5,
                left: e.pageX + 5
            }).fadeOut(1500);
        });
    });
//]]>
</script>

Script jQuery plugin yang kedua ini, menampilkan efek bayangan ketika cursor digerakkan. Contoh bisa lihat di blog ini kan :D
Script plugin pertama bukan saya yang buatnya :D dapet nemu booo :P Buat script plug-in kedua akan tiba saatnya nanti akan saya kasih tau nama blognya.
Happy plugin \m/

▼ ▲

Make Page Peel Effect Using CSS 3

0 Komentar

Flip trick atau lebih dikenal orang dengan nama page peel effect, page flip, atau entah apa deh namanya, yang mana inti hasil kerjanya yaitu menampilkan konten ketika cursor diarahkan maka akan terlihat dibalik layar tancep :)) Kebanyakan Koben melihat yang menggunakan trik tersebut pasti memakai ! Bahkan ada yang bergaya flash juga :-bd
Kalau membuat page flip effect memakai gambar seperti postingan dahulu kekurangannya tidak bisa terbuka isi dari layar tancepnya sob =)) Dengan kemajuan , sekarang kita bisa membuat page peel effect, murni memakai atribut CSS saja. Demo: "Perhatikan sudut kiri atas halaman ini"

Gimana...gimana...gimana (style ayu ting-ting spell) Mau enggak yang kayak begituan...

Code CSS 3 Page Peel

#page-peel {
width: 40px;
height: 40px;
position: fixed;
top: 0;
left: 0;
}
#page-peel:hover {
width: 350px;
height: 350px;
transition: ease 1s;
-webkit-transition: ease 1s;
-moz-transition: ease 1s;
-o-transition: ease 1s;
}
#page-peel-content {
background: transparent;
white-space: normal;
overflow: hidden;
width: 35px;
height: 35px;
position: fixed;
top: 0;
left: 0;
}
#page-peel-content:hover {
width: 300px;
height: 300px;
transition: ease 1s;
-webkit-transition: ease 1s;
-moz-transition: ease 1s;
-o-transition: ease 1s;
}

HTML Structure

<div id="page-peel-content">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=beben-koben" target="_blank">
<img src="http://IMAGE/RSS.png"/>
<img id="page-peel" src="http://IMAGE/PEEL-EFFECT.png"/>
</a>
</div>

Download imagenya disini , upload dan pasangkan di html struktur.
Lihat hasil kerja :)
Happy page peel \m/

▼ ▲

5 Menu Simple Full Style

0 Komentar

▼ ▲

Make Simple Menu fixed & rgba tech

2 Komentar

Tidak ada kerjaan nih, ya sudah mari kita membuat sederhana ;)) Penting sekali keberadaan menu dalam sebuah blog! Selain navigasi, tapi buat penampilan blog kita biar lebih macho b-) Menu simpel & sederhana berikut pasti berbeda dengan :P
Jika kepingin koleksi menu yang sudah pernah Koben share, silahkan cari pada search box dengan keyword "MENU" Letakkan kode CSS berikut sebelum code ]]></b:skin>

Coded CSS Simple Menu

/* menu euy */
.menu {
 position: fixed;
 left: 0;
 top: 0;
 margin: 0;
 width: 100%;
 padding: 0 10px;
 background-color: rgba(30,30,30,.8);
 border-bottom: solid 1px rgba(0,0,0,.1);
 box-shadow: 0 0 20px rgba(0,0,0,1);
 z-index: 100;
}
.menu ul {
 width: 900px;
 font-size: 16px;
 margin: 0 auto;
}
.menu ul li {
 display: block;
 float: left;
}
.menu ul li.kidd a {
 color: #f00;
 font-weight: bold;
}
.menu ul li a, .menu ul li.kidd {
 float: left;
 display: block;
 text-decoration: none;
}
.menu ul li a {
 padding: 10px;
 color: #aaa;
}
.menu ul li a:hover {
 background-color: rgba(255,255,255,.05);
 color: #fff;
}

Sedikit banget kan kode²nya. Ya namanya juga sederhan dan so simple menu. Tapi jangan salah bos, tidak ketinggalan soal gaya mah :))
Kemudian sisipkan HTML ini didalam tag <body> ... </body>

HTML Simple Menu

<div class="menu">
<ul>
<li class="kidd"><a href="/">Home</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-1</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-2</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-3</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-4</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-5</a></li>
</ul>
</div>

SAVE. Kabuuurrr...
Urusan padding, margin, color, width, height silahkan atur-atur sesuai keperluan, bahkan jika kalian mau menambahkan variabel lainnya pada CSS bisa saja kok ;)
Happy menu \m/

▼ ▲

Template Pilihan Akhir Tahun

5 Komentar

▼ ▲

Make Label/Category Use HTML5 Canvas Tag Cloud

12 Komentar

Sebelumnya Koben mau kasih tau, jangan dipakai hack ! Karena ternyata kode yang dihapusnya itu termasuk kode buat menampilkan label/kategori juga #-o Maaf maaf Koben tidak tahu :D Saya ngeuh ketika mempraktekan tutorial tentang HTML5 Canvas Tag Cloud.
Sebelumnya postingan dan sama² menampilkan efek cloud-cloud :p Ada satu lagi deng :d
TagCanvas atau Tag Canvas merupakan JavaScript dimana hasil tampilan akan berupa cloud serta berbasis tag HTML5.

Canvas Tag Cloud kreasi goat1000 terdapat 2 versi, versi pertama yaitu tagcanvas murni javascript & tagcanvas plugin jQuery versi. Koben disini akan berbagi cara bagaimana memasukan tag-canvas jQuery plugins version ke dalam blog!
Langkah pertama yang musti dilakuin adalah Download Full Template. Selanjutnya Expand Widget Templates
Kemudian download script jquery.tagcanvas.js version 1.11.1 or [Minified] pilih salah satu saja!
Letakkan script hasil download dibawah jQuery inti, atau bisa juga diatas/sebelum tagging </body>
Template dalam keadaan Expand, carilah kode berikut<b:widget id='Label1' locked='false' title='Labels' type='Label'>

demo

Kode tersebut merupakan code label pada blogger. Jadi jika sobat belum punya widget label/category buat dulu sana. Karena tutorial berikut berjalan jika ada itu :)) Bila sudah ketemu letakkan syntax HTML berikut<canvas height='300' id='myCanvas' width='300'>tepat diatas code<b:if cond='data: display == "list"'>

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
 <h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data: display + &quot;-label-widget-content&quot;'>
<canvas height='300' id='myCanvas' width='300'>
 <b:if cond='data: display == &quot;list&quot;'>
   <ul>
   <b: loop values='data: labels' var='label'>
     <li>
. . .  . . .  . . .

Scroll kebawah temukan kembali kode </b:includable> Masukan tag penutup canvas berikut </canvas>

. . .  . . .  . . .
        <b:if cond='data:showFreqNumbers'>
   <span class='label-count' dir='ltr'>(<data: label.count/> )</span>
        </b:if>
      </span>
    </b: loop>
  </b:if>
</canvas>
  <b:include name='quickedit'/>
</div>
</b:includable>

Langkah² diatas sudah dilakukan maka saatnya memasukan script pemanggil. Letakinnya ya tepat dibawah kalian menyimpan script jquery.tagcanvas.js

/**
* Copyright (C) 2010-2011 Graham Breach
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/**
* jQuery.tagcanvas 1.11.1
* For more information, please contact <graham@goat1000.com>
*/
(function(D){var L,K,C=Math.abs,p=Math.sin,g=Math.cos,x={},y={},z={0:"0,",1:"17,",2:"34,",3:"51,",4:"68,",5:"85,",6:"102,",7:"119,",8:"136,",9:"153,",a:"170,",A:"170,",b:"187,",B:"187,",c:"204,",C:"204,",d:"221,",D:"221,",e:"238,",E:"238,",f:"255,",F:"255,"},d,E,c,h=document;for(L=0;L<256;++L){K=L.toString(16);if(L<16){K="0"+K}y[K]=y[K.toUpperCase()]=L.toString()+","}function H(i){return typeof(i)!="undefined"}function l(W){var j,V,R,Q,U=[],S=Math.PI*(3-Math.sqrt(5)),T=2/W;for(j=0;j<W;++j){V=j*T-1+(T/2);R=Math.sqrt(1-V*V);Q=j*S;U.push([g(Q)*R,V,p(Q)*R])}return U}function O(S,Q,X,W,V,U){var Y,Z=[],T=Math.PI*(3-Math.sqrt(5)),R=2/S;for(X=0;X<S;++X){W=X*R-1+(R/2);Y=X*T;V=g(Y);U=p(Y);Z.push(Q?[W,V,U]:[V,W,U])}return Z}function u(i){return O(i)}function B(i){return O(i,1)}function m(T,i){var S=T,R,Q,j=(i*1).toPrecision(3)+")";if(T[0]==="#"){if(!x[T]){if(T.length===4){x[T]="rgba("+z[T[1]]+z[T[2]]+z[T[3]]}else{x[T]="rgba("+y[T.substr(1,2)]+y[T.substr(3,2)]+y[T.substr(5,2)]}}S=x[T]+j}else{if(T.substr(0,4)==="rgb("||T.substr(0,4)==="hsl("){S=(T.replace("(","a(").replace(")",","+j))}else{if(T.substr(0,5)==="rgba("||T.substr(0,5)==="hsla("){R=T.lastIndexOf(",")+1,Q=T.indexOf(")");i*=parseFloat(T.substring(R,Q));S=T.substr(0,R)+i.toPrecision(3)+")"}}}return S}function f(i,j){if(window.G_vmlCanvasManager){return null}var Q=h.createElement("canvas");Q.width=i;Q.height=j;return Q}function t(){var j=f(3,3),R,Q;if(!j){return false}R=j.getContext("2d");R.strokeStyle="#000";R.shadowColor="#fff";R.shadowBlur="3";R.globalAlpha=0;R.strokeRect(2,2,2,2);R.globalAlpha=1;Q=R.getImageData(2,2,1,1);j=null;return(Q.data[0]>0)}function P(X,j){var Q=1024,T=X.weightGradient,S,V,R,W,U;if(X.gCanvas){V=X.gCanvas.getContext("2d")}else{X.gCanvas=S=f(Q,1);if(!S){return null}V=S.getContext("2d");W=V.createLinearGradient(0,0,Q,0);for(R in T){W.addColorStop(1-R,T[R])}V.fillStyle=W;V.fillRect(0,0,Q,1)}U=V.getImageData(~~((Q-1)*j),0,1,1).data;return"rgba("+U[0]+","+U[1]+","+U[2]+","+(U[3]/255)+")"}function s(T,S,Q,W,U,V,j){var R=(V||0)+(j&&j[0]<0?C(j[0]):0),i=(V||0)+(j&&j[1]<0?C(j[1]):0);T.font=S;T.textBaseline="top";T.fillStyle=Q;U&&(T.shadowColor=U);V&&(T.shadowBlur=V);j&&(T.shadowOffsetX=j[0],T.shadowOffsetY=j[1]);T.fillText(W,R,i)}function k(aa,U,Y,Z,T,Q,W,X,j){var R=Z+C(j[0])+X+X,i=T+C(j[1])+X+X,S,V;S=f(R,i);if(!S){return null}V=S.getContext("2d");s(V,U,Q,aa,W,X,j);return S}function J(U,X,Y,R){var S=U.width+C(R[0])+Y+Y,j=U.height+C(R[1])+Y+Y,V,W,T=(Y||0)+(R&&R[0]<0?C(R[0]):0),Q=(Y||0)+(R&&R[1]<0?C(R[1]):0);V=f(S,j);if(!V){return null}W=V.getContext("2d");X&&(W.shadowColor=X);Y&&(W.shadowBlur=Y);R&&(W.shadowOffsetX=R[0],W.shadowOffsetY=R[1]);W.drawImage(U,T,Q);return V}function F(ac,U,aa){var ab=parseInt(ac.length*aa),T=parseInt(aa*2),R=f(ab,T),X,j,S,W,Z,Y,Q,V;if(!R){return null}X=R.getContext("2d");X.fillStyle="#000";X.fillRect(0,0,ab,T);s(X,aa+"px "+U,"#fff",ac);j=X.getImageData(0,0,ab,T);S=j.width;W=j.height;V={min:{x:S,y:W},max:{x:-1,y:-1}};for(Y=0;Y<W;++Y){for(Z=0;Z<S;++Z){Q=(Y*S+Z)*4;if(j.data[Q+1]>0){if(Z<V.min.x){V.min.x=Z}if(Z>V.max.x){V.max.x=Z}if(Y<V.min.y){V.min.y=Y}if(Y>V.max.y){V.max.y=Y}}}}if(S!=ab){V.min.x*=(ab/S);V.max.x*=(ab/S)}if(W!=T){V.min.y*=(ab/W);V.max.y*=(ab/W)}R=null;return V}function r(i){return"'"+i.replace(/(\'|\")/g,"").replace(/\s*,\s*/g,"', '")+"'"}function w(i,j,Q){Q=Q||h;if(Q.addEventListener){Q.addEventListener(i,j,false)}else{Q.attachEvent("on"+i,j)}}function I(R,Q,j){if(R.complete){Q.w=R.width;Q.h=R.height;j.push(Q)}else{jQuery(R).bind("load",function(){Q.w=this.width;Q.h=this.height;j.push(Q)})}}function v(Q,j){var i=1,R;if(Q.weightFrom){i=1*(j.getAttribute(Q.weightFrom)||Q.textHeight)}else{if(h.defaultView&&h.defaultView.getComputedStyle){R=h.defaultView.getComputedStyle(j,null).getPropertyValue("font-size");i=R.replace("px","")*1}else{Q.weight=false}}return i}function G(S){var R,Q,j=h.documentElement,T;for(R in q.tc){Q=q.tc[R];T=D(Q.canvas).offset();if(S.pageX){Q.mx=S.pageX-T.left;Q.my=S.pageY-T.top}else{Q.mx=S.clientX+(j.scrollLeft||h.body.scrollLeft)-T.left;Q.my=S.clientY+(j.scrollTop||h.body.scrollTop)-T.top}}}function o(R){var j=q,i=h.addEventListener?0:1,Q=R.target&&H(R.target.id)?R.target.id:R.srcElement.parentNode.id;if(Q&&R.button==i&&j.tc[Q]){G(R);j.tc[Q].Clicked(R)}}function N(Q){var i=q,j=Q.target&&H(Q.target.id)?Q.target.id:Q.srcElement.parentNode.id;if(j&&i.tc[j]){Q.cancelBubble=true;Q.returnValue=false;Q.preventDefault&&Q.preventDefault();i.tc[j].Wheel((Q.wheelDelta||Q.detail)>0)}}function n(){var Q=q.tc,j;for(j in Q){Q[j].Draw()}}function b(Q,i){var j=p(i),R=g(i);return{x:Q.x,y:(Q.y*R)+(Q.z*j),z:(Q.y*-j)+(Q.z*R)}}function a(Q,i){var j=p(i),R=g(i);return{x:(Q.x*R)+(Q.z*-j),y:Q.y,z:(Q.x*j)+(Q.z*R)}}function M(R,X,W,U,S,j){var i,T,V,Q=R.z1/(R.z1+R.z2+X.z);i=X.y*Q;T=X.x*Q;V=R.z2+X.z;return{x:T,y:i,z:V}}function e(i){this.ts=new Date().valueOf();this.tc=i;this.x=this.y=this.w=this.h=this.sc=1;this.z=0}d=e.prototype;d.Update=function(i,U,j,Q,T,R){var S=this.tc.outlineOffset;this.x=T*(i-S);this.y=T*(U-S);this.w=T*(j+S*2);this.h=T*(Q+S*2);this.sc=T;this.z=R.z};d.Draw=function(Q){var j=new Date().valueOf()-this.ts,i=this.tc;Q.setTransform(1,0,0,1,0,0);Q.strokeStyle=i.outlineColour;Q.lineWidth=i.outlineThickness;Q.shadowBlur=Q.shadowOffsetX=Q.shadowOffsetY=0;if(i.pulsateTo<1){Q.globalAlpha=i.pulsateTo+((1-i.pulsateTo)*(0.5+(g(2*Math.PI*j/(1000*i.pulsateTime))/2)))}else{Q.globalAlpha=1}Q.strokeRect(this.x,this.y,this.w,this.h)};d.Active=function(Q,i,j){return(i>=this.x&&j>=this.y&&i<=this.x+this.w&&j<=this.y+this.h)};function A(j,T,R,S,Q,V){var W=j.ctxt,U;this.tc=j;this.image=T.src?T:null;this.name=T.src?"":T;this.a=R;this.p3d={x:S[0]*j.radius*1.1,y:S[1]*j.radius*1.1,z:S[2]*j.radius*1.1};this.x=this.y=0;this.w=Q;this.h=V;this.colour=j.textColour;this.weight=this.sc=this.alpha=1;this.weighted=!j.weight;this.outline=new e(j);if(this.image){if(j.txtOpt&&j.shadow){U=J(this.image,j.shadow,j.shadowBlur,j.shadowOffset);if(U){this.image=U;this.w=U.width;this.h=U.height}}}else{this.textHeight=j.textHeight;this.extents=F(this.name,j.textFont,this.textHeight);this.Measure(W,j)}this.SetShadowColour=j.shadowAlpha?this.SetShadowColourAlpha:this.SetShadowColourFixed;this.SetDraw(j)}E=A.prototype;E.SetDraw=function(i){this.Draw=this.image?(i.ie>7?this.DrawImageIE:this.DrawImage):this.DrawText};E.Measure=function(U,j){this.h=this.extents?this.extents.max.y+this.extents.min.y:this.textHeight;U.font=this.font=this.textHeight+"px "+j.textFont;this.w1=U.measureText(this.name).width;if(j.txtOpt){var R=j.txtScale,S=R*this.textHeight,T=S+"px "+j.textFont,Q=[R*j.shadowOffset[0],R*j.shadowOffset[1]],i;U.font=T;i=U.measureText(this.name).width;this.image=k(this.name,T,S,i,R*this.h,this.colour,j.shadow,R*j.shadowBlur,Q);if(this.image){this.w=this.image.width/R;this.h=this.image.height/R}this.SetDraw(j);j.txtOpt=this.image}};E.SetWeight=function(i){this.weight=i;this.Weight(this.tc.ctxt,this.tc);this.Measure(this.tc.ctxt,this.tc)};E.Weight=function(R,Q){var j=this.weight,i=Q.weightMode;this.weighted=true;if(i=="colour"||i=="both"){this.colour=P(Q,(j-Q.min_weight)/(Q.max_weight-Q.min_weight))}if(i=="size"||i=="both"){this.textHeight=j*Q.weightSize}this.extents=F(this.name,Q.textFont,this.textHeight)};E.SetShadowColourFixed=function(Q,j,i){Q.shadowColor=j};E.SetShadowColourAlpha=function(Q,j,i){Q.shadowColor=m(j,i)};E.DrawText=function(R,V,Q){var W=this.tc,T=this.x,S=this.y,U,j,X=this.sc,i=this.outline;R.globalAlpha=this.alpha;R.setTransform(X,0,0,X,0,0);R.fillStyle=this.colour;W.shadow&&this.SetShadowColour(R,W.shadow,this.alpha);R.font=this.font;U=this.w1*X;j=this.h*X;T+=1+(V/X)-(U/2);S+=1+(Q/X)-(j/2);R.fillText(this.name,T,S);i.Update(T,S,this.w1,this.h,X,this.p3d);return i.Active(R,W.mx,W.my)?i:null};E.DrawImage=function(T,X,S){var Y=this.tc,V=this.x,U=this.y,Z=this.sc,j=this.outline,Q=this.image,W=this.w,R=this.h;T.globalAlpha=this.alpha;T.setTransform(Z,0,0,Z,0,0);T.fillStyle=this.colour;Y.shadow&&this.SetShadowColour(T,Y.shadow,this.alpha);V+=(X/Z)-(W/2);U+=(S/Z)-(R/2);T.drawImage(Q,V,U,W,R);j.Update(V,U,W,R,Z,this.p3d);return j.Active(T,Y.mx,Y.my)?j:null};E.DrawImageIE=function(T,X,S){var Y=this.tc,Q=this.image,Z=this.sc,j=this.outline,W=Q.width=this.w*Z,R=Q.height=this.h*Z,V=(this.x*Z)+X-(W/2),U=(this.y*Z)+S-(R/2);T.globalAlpha=this.alpha;T.drawImage(Q,V,U);j.Update(V,U,W,R,1,this.p3d);return j.Active(T,Y.mx,Y.my)?j:null};E.Calc=function(S,R){var i=a(this.p3d,S),j=this.tc,T=j.minBrightness,Q=j.radius;this.p3d=b(i,R);i=M(j,this.p3d,this.w,this.h,Math.PI/4,20);this.x=i.x;this.y=i.y;this.sc=(j.z1+j.z2-i.z)/j.z2;this.alpha=Math.max(T,Math.min(1,T+1-((i.z-j.z2+Q)/(2*Q))))};E.Clicked=function(S){var j=this.a,Q=j.target,R=j.href,i;if(Q!=""&&Q!="_self"){if(self.frames[Q]){self.frames[Q]=R}else{if(top.frames[Q]){top.frames[Q]=R}else{window.open(R,Q)}}return}if(j.fireEvent){if(!j.fireEvent("onclick")){return}}else{i=h.createEvent("MouseEvents");i.initMouseEvent("click",1,1,window,0,0,0,0,0,0,0,0,0,0,null);if(!j.dispatchEvent(i)){return}}h.location=R};function q(){var j,Q={mx:-1,my:-1,z1:20000,z2:20000,z0:0.0002,freezeActive:false,pulsateTo:1,pulsateTime:3,reverse:false,depth:0.5,maxSpeed:0.05,minSpeed:0,decel:0.95,interval:20,initial:null,hideTags:true,minBrightness:0.1,outlineColour:"#ffff99",outlineThickness:2,outlineOffset:5,textColour:"#ff99ff",textHeight:15,textFont:"Helvetica, Arial, sans-serif",shadow:"#000",shadowBlur:0,shadowOffset:[0,0],zoom:1,weight:false,weightMode:"size",weightFrom:null,weightSize:1,weightGradient:{0:"#f00",0.33:"#ff0",0.66:"#0f0",1:"#00f"},txtOpt:true,txtScale:2,frontSelect:false,wheelZoom:true,zoomMin:0.3,zoomMax:3,zoomStep:0.05,shape:"sphere",lock:null};for(j in Q){this[j]=Q[j]}this.max_weight=0;this.min_weight=200}c=q.prototype;c.Draw=function(){var Y=this.canvas,W=Y.width,Q=Y.height,j=0,V=this.yaw,R=this.pitch,S=W/2,ab=Q/2,Z=this.ctxt,U,aa,X,ac=this.taglist,T=ac.length;Z.setTransform(1,0,0,1,0,0);this.active=null;for(X=0;X<T;++X){ac[X].Calc(V,R)}ac=ac.sort(function(ad,i){return ad.sc-i.sc});if(!this.txtOpt&&this.shadow){Z.shadowBlur=this.shadowBlur;Z.shadowOffsetX=this.shadowOffset[0];Z.shadowOffsetY=this.shadowOffset[1]}Z.clearRect(0,0,W,Q);for(X=0;X<T;++X){aa=ac[X].Draw(Z,S,ab);if(aa&&aa.sc>j&&(!this.frontSelect||aa.z<=0)){U=aa;U.index=X;j=aa.sc}}if(this.freezeActive&&U){this.yaw=this.pitch=0}else{this.Animate(W,Q)}U&&(this.active=U).Draw(Z)};c.Animate=function(V,S){var Q=this,U=Q.mx,T=Q.my,j=Q.lock,X,W,R,i;if(U>=0&&T>=0&&U<V&&T<S){X=Q.maxSpeed,i=Q.reverse?-1:1;if(j!="x"){this.yaw=i*((X*2*U/V)-X)}if(j!="y"){this.pitch=i*-((X*2*T/S)-X)}this.initial=null}else{if(!Q.initial){X=Q.minSpeed,W=C(this.yaw),R=C(this.pitch);if(j!="x"&&W>X){this.yaw=W>Q.z0?Q.yaw*Q.decel:0}if(j!="y"&&R>X){this.pitch=R>Q.z0?Q.pitch*Q.decel:0}}}};c.Zoom=function(i){this.z2=this.z1*(1/i)};c.Clicked=function(R){var i=this.active,Q=this.taglist;try{if(i&&Q[i.index]){Q[i.index].Clicked(R)}}catch(j){}};c.Wheel=function(j){var Q=this.zoom+this.zoomStep*(j?1:-1);this.zoom=Math.min(this.zoomMax,Math.max(this.zoomMin,Q));this.Zoom(this.zoom)};q.tc={};jQuery.fn.tagcanvas=function(Q,j){var i,R=j?jQuery("#"+j):this;if(h.all&&!j){return false}i=R.find("a");if(H(window.G_vmlCanvasManager)){this.each(function(){D(this)[0]=window.G_vmlCanvasManager.initElement(D(this)[0])});Q.ie=parseFloat(navigator.appVersion.split("MSIE")[1])}if(!i.length||!this[0].getContext||!this[0].getContext("2d").fillText){return false}this.each(function(){var U,S,W,Z,aa,V,Y,X=[],T={sphere:l,vcylinder:u,hcylinder:B};j||(i=D(this).find("a"));V=new q;for(U in Q){V[U]=Q[U]}V.z1=(19800/(Math.exp(V.depth)*(1-1/Math.E)))+20000-19800/(1-(1/Math.E));V.z2=V.z1*(1/V.zoom);V.radius=(this.height>this.width?this.width:this.height)*0.33*(V.z2+V.z1)/(V.z1);V.yaw=V.initial?V.initial[0]*V.maxSpeed:0;V.pitch=V.initial?V.initial[1]*V.maxSpeed:0;V.canvas=D(this)[0];V.ctxt=V.canvas.getContext("2d");V.textFont=r(V.textFont);V.ctxt.textBaseline="top";if(V.shadowBlur||V.shadowOffset[0]||V.shadowOffset[1]){V.ctxt.shadowColor=V.shadow;V.shadow=V.ctxt.shadowColor;V.shadowAlpha=t()}else{delete V.shadow}V.taglist=[];V.shape=T[V.shape]||T.sphere;S=V.shape(i.length);for(U=0;U<i.length;++U){W=i[U].getElementsByTagName("img");if(W.length){Z=new Image;Z.src=W[0].src;aa=new A(V,Z,i[U],S[U],1,1);I(Z,aa,V.taglist)}else{V.taglist.push(new A(V,i[U].innerText||i[U].textContent,i[U],S[U],2,V.textHeight+2))}if(V.weight){Y=v(V,i[U]);if(Y>V.max_weight){V.max_weight=Y}if(Y<V.min_weight){V.min_weight=Y}X.push(Y)}}if(V.weight=(V.max_weight>V.min_weight)){for(U=0;U<V.taglist.length;++U){V.taglist[U].SetWeight(X[U])}}q.tc[D(this)[0].id]=V;w("mousemove",G,this);w("mouseout",G,this);w("mouseup",o,this);if(V.wheelZoom){w("mousewheel",N,this);w("DOMMouseScroll",N,this)}j&&V.hideTags&&R.hide();Q.interval=Q.interval||V.interval});return !!(q.started||(q.started=setInterval(n,Q.interval)))}})(jQuery);

jQuery Script Plugin

Untuk option script bisa dilihat pada web sumber :D Good luck :)
Happy Canvas Tag Cloud \m/