Trik Komputer: 2011

Sabtu, 31 Desember 2011

Selamat Tahun Baru 2012

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̜͙̤̝̗͚͚̥̅̾̾̈́͐ͧͨ̌͠͡

Jumat, 30 Desember 2011

Make a Node, Notes, Schedule etc with SwitchNode

Koben masih kepikiran kok kenapa di kalangan blogger khususnya blogger dari Indonesia sudah umum menggunakan layanan ! Banyak jenis dari fasilitas chat tersebut, 2 yang paling saya sering lihat yakni dan . Versi teranyar dari shoutmix telah keluar walau masih format beta :( Melihat-lihat terus tidak sengaja saya klik sebuah link yg tertera dari layanan kepunyaannya si cbox.ws Link itu adalah .
Switchnode adalah cara untuk menyimpan dan mengatur catatan berupa teks biasa secara online. Tampilan dengan bentuk memudahkan dalam mengatur apa yang sudah kita catat disana :)

Misalkan sobat mau membuat sebuah schedule iseng², lalu lupa dengan schedule tersebut! Tidak ada salahnya kalian membuat catatan di tree switchnode ;) Agar lebih terjaga kerahasiaan node kepunyaan sang pemilik, Switchnode-Web sudah menyediakan fasilitas save yang terintegrasi dengan account google :-bd
Bahkan kita bisa melakukan Export to XML format setelah selesai melakukan aktifitas menulis-nulis b-) Sederhana tapi mungkin bisa bermanfaat postingan kali ini ya :P

Ex: http://www.switchnode.com/#sSB1zxMFaXIDOhp5SAbG0g

Satu jurus menyebarkan link kalian ke para pemilik cbox orang lain dengan ini nih .
Bosan dengan services chat-box, monggo dicoba beberapa embed chat for site berikut .
See you :)
Happy blogging \m/

Kamis, 29 Desember 2011

Banned User on Comments Area with JavaScript

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/

Rabu, 28 Desember 2011

Comments Blog Under Post in Home Page

Mumpung santai tidak ada ide postingan! Koben akan menepati janji kesumat dalam rangka mengacak-acak hack penuh gaya kreasi blogger :) Sekarang gue mau mencoba menerangkan kepada sobat bagaimana membuat supaya terlihat di halaman depan atau home page. Jadi nanti akan terlihat siapa² saja komentator terbaru dari postingan yang dikasih komentar.
InComm adalah sebuah widget blogger yang dirancang untuk menampilkan komentar di bawah posting blog kita pada halaman depan, di posting Lama dan baru, dan pada halaman label.
Uniknya lagi, komentator teranyar nanti akan berada pada posisi pertama. Sehingga photo yang baru komentar akan terpampang pd homepage layaknya seorang tamu agung dari negeri antah berantah ~~prettt )))~~

Caranya cukup mudah, ambil bumbu via add a gadget kemudian taruh di bawah bagian Blog Posts!

Ambil Bumbu inComm

Ini screenshot nge-drag widget supaya berada dibawah blog posts!
Click to look screenshot

Save.
Kemungkinan bila terjadi gagal trik ini:

Bentroknya pemanggilan json script.
Script lumayan besar.
Berdo'a

Son of the Better Recent Comments Gadget

Update datang dari sobat kita , mengeluarkan recent comments yang support dengan avatar urls in comments feed!

Semoga bermanfaat :)
Happy blogging \m/

Selasa, 27 Desember 2011

Make Something To Be Float

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/

Senin, 26 Desember 2011

Google Yang Aneh!!!

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/

Minggu, 25 Desember 2011

Looking for Slide Features jQuery Plugin!!!

Koben sedikit empet kalau membicarakan trick jQuery plugin! Bukan tidak suka atau apanya, melainkan selalu ngiler ada saja yang baru tercipta :x Kumpulan sudah menjadi patokan saya dalam melihat yang baru² gress ;)) Seiring dengan waktu berjalan ternyata banyak para blogger di belahan dunia sedang trend mengusung apa yang disebut dengan jSlide!
Mungkin bentuk paling sederhana implementasi dari trik plugin jQuery slide, yang ada di blog aku ini! Bila sobat melakukan scroll ke bawah akan terbuka sebelah kanan bawah follower gadget. Itu bikinnya disini :) Karena memang dikreasikan hanya memperlihatkan nongol jika discroll, sehingga waktu di close tidak terbuka lagi :D Namanya juga sederhana ;)

Kepingin berbeda, full stylish, mudah, unik, dari feature slide-slide ini!!! Okay agan & aganwati tercinta, panteungin petualangan Beben Koben si bloglang anu ganteng kalem tea berikut dalam menemukan berbagai trick jQuery slide karya orang lain :P

Recommended Post Slide out for Blogger

Blogger Widgets

jSlide Related Pages

jQuery4u

The Slide by SimpleReach

Monggo disambi mau pakai yang mana.
Happy slide \m/

Stay to update, sapa tau ada yang baru ;)

Sabtu, 24 Desember 2011

Creativity Using CSS Keyframe Animations

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/AVvXsEg6cdDZ9Pz2BptamDNvc9hVGlZ5eaXT1DpifIWVvPxJfymeHkGN_8Gq0GhbbusIxnJBsrYt2Qv-8d4Q6KBLPbPu6ScxKkJvXoU9yhPYxP6UN3GQjTyd_WbwFZWzxbma9cy4HOpumwNRD60/'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHXwe5jUex_ptk6a5h9C9NtC7Bk4ispZ8lOsK1WN7UJIDZuATz8zwyZtGS4cRDGZbP0XTqwKfImW2dmQa9kcmr4Fa_CNGY2wAUll-aZAFmwdVVviWwW2iXBnGDQkU0bDeqDwXWlqiubMQ/'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCkhmFvToZvTP3WUG-wcT4a9J0NP9hVxaOKqjIqpiWrigCvkicURx4uLQd7KBYv3zNbVUNwiuakbmK8E5fIqAMUIqDv7VjO7GNwF9azhx27_r3YAI-Ar598Ffezz8WivHjUftCsu9SwrE/');
-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/

Jumat, 23 Desember 2011

Fancy Hover for Image with CSS3

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

Seperti janji Beben Koben si bloglang anu ganteng kalem tea, setelah beres mengacak-acak blognya master , kembali akan memberitahukan salah satu master blogger datang dari negara Paman Sam United States of America :-" Master Aratina Cage mengeluarkan beberapa hack berbasis blogger blogspot. Mungkin baru satu ini yang Koben temukan master masih aktif berkreasi di dunia blogging :D Mungkin seiring waktu dan kesempatan Beben si bloglang akan kembali menemukan master-master lainnya ya sob :)
Nama blognya adalah Last Comments! Melihat dari nama blog saja mungkin sobat sudah bisa memperkirakan hack apa saja yang dibuat :-/
Sebagian besar hack master Aratina Cage berkelut disekitaran comments (komentar) blog.

Pihak blogger sendiri sebetulnya sudah menyediakan widget recent comments pada bagian Add a Gadget created by Blogger Buster. Melancong ke negeri tirai bambu aku mendapatkan Recent Comments and Post full stylish b-) Kurang gaya kepengen versi 2.0, sobat-sabit bisa sikat New Recent Comments Widget 2.0 for blogspot :-bd
Gaya + versi dipadukan e.e..e... hadir deh ... PLEASE WELCOME

Berikut beberapa hack recent/last comments sistem langsung terkirim ke blog kalian :D Klik...klik...klik sampe deh terpasang ke blog kalian tercinta ;)) :">

Add Last Comments 1.1 (original, no buttons)

Add Last Comments 1.2 (with show/hide buttons)

Add Last Comments 1.3 (for private blogs)

Datang, pelajari ke blog last comments. Orangnya ramah, jika ada kesulitan tanya saja :) Postingan berikutnya Koben masih akan bahas dari konten dia.
Happy blogging \m/

Kamis, 22 Desember 2011

Select Text Trick jQuery Plugin by: motyar

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/

Rabu, 21 Desember 2011

Make Labels Cloud Full CSS For Blogger

Rehat mengobrak-abrik artikel dari blog misterius dulu nih. Koben akan berbagi trick and tips sederhana mengenai seputaran labels/category/Tag yang ada pada blogger platform blogspot. Pasti sudah pada tahu semua label deh :) Cara memunculkan labels blogger yaitu dengan cara in your Dashboard ► Design ► Page Elements ► Add a Gadget (Basics) ► Scroll down and choose Labels. Bagi yang sudah mempunyai label dalam templatenya pilih opsi display yang Cloud!
Kepingin gaya-gayaan dulu seputar kategori menggunakan cloud trick, cek gi dot:

Trik sederhana yang sekarang Koben akan share dengan kalian mempunyai kemiripan metode pemasangan pada artikel ! Kalau disana opsi display List yang dipakainya, sekarang yg Cloud ;) Hasil snippet CSS ini akan menghasilkan 2 buah pokok variabel yakni warna huruf & ukuran huruf.
Warna bisa berbeda (warna-warni) dan font size juga bisa kalian customize :-" Hasil akhir (demo) lihatlah sebelah kanan blog ini dengan title (Kategori). Masukkan Simple CSS snippet berikut diatas kode ]]></b:skin>

CSS Snippet for Labels Cloud Blogger

.cloud-label-widget-content span {
padding: 0;
}
.label-size-1 a {
color: #FFFFFF;
font-size: 11px;
}
.label-size-2 a {
color: #0066FF;
font-size: 13px;
}
.label-size-3 a {
color: #55CC00;
font-size: 15px;
}
.label-size-4 a {
color: #FFFF00;
font-size: 17px;
}
.label-size-5 a {
color: #FF0000;
font-size: 20px;
}

SAVE.
Ukuran dan warna huruf silahkan kalian ganti sesuai selera masing² Jika mau menambahkan variabel CSS lainnya (Ex: padding, margin, height, background etc), silahkan tinggal kreasikan. Default CSS code diatas Koben buat secara dasar saja ;) Mau pakai aksesoris hover silahkan, shadow huruf monggo dan lain-lain :D
Code for New Blogger Tag Cloud / Label Cloud created by phydeaux3 inilah versi CSS-nya Koben buat >:) :))
Good luck :)
Happy snippet labels blogger \m/

Selasa, 20 Desember 2011

Energy Saver or Screensaver jQuery Plugin

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/

Senin, 19 Desember 2011

Decoration jQuery Plugin Around The Cursor

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/AVvXsEgeYNmdDImNGPGX36l_nwZlWd0NKo-tF3AUsIvmkmtJ26LdNSJ-TPPtTE_111mZZOzTh7vWGm0o_fyB3Vnwd2Y-iEBUdMIi7Reorw4Wtz_IBX3NxNetedMLEY-zYKCR9EybJp1XtnzpUME9/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/

Minggu, 18 Desember 2011

Make Page Peel Effect Using CSS 3

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/

Sabtu, 17 Desember 2011

5 Menu Simple Full Style

Apa Koben bilang juga!!! Memang lagi pada liburan akhir tahun kali para developer! Belum lagi issue² yang melanda perkodean pada browsing engines yang masih dalam perbincangan hangat :D Yesterday i have writed lazy post about . Sama mungkin lagi malas, ternyata eh ternyata ada menu simpel lain lagi yang full stylish ;))
Here we go: - - - - .
5 buah menu simple full style kreasi Dynamic Drive CSS Library

Dynamic Drive CSS Library
Penjelasan tutorial sudah terperinci, ada demo, silahkan meluncur tinggal pasang saja di blog kalian yah :D

Pull out image using CSS3 keyframe animation

Happy menu \m/

Jumat, 16 Desember 2011

Make Simple Menu fixed & rgba tech

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/

Rabu, 14 Desember 2011

Template Pilihan Akhir Tahun

Karena sepi artikel tutorial dari para developer, saatnya Koben bagi-bagi punya b-) Tidak diragukan lagi bila gue memilah & memilih template pasti oke-oke bin good-good. Mau melihat koleksi template saya, tinggal pilih saja label/kategori tempalte disamping kanan blog ini. Klik jebret tralalala jreeeng numplek :)) Pilihan pertama jatuh pada yang suka berbisnis ria dalam berblogging.
Marilah kita mulai saja acara template pilihan akhir tahun 2011, cekidot brooo \m/

Blogger Store v2

Polished Blogger

Sambung biar penasaran ;))

Deposit Photos

Free Facebook Blogger Template

Corage Blogger

Artarius

Mularonis Magazine

Calenotis Magazine

Simplex World News

Chromatic

Advancino

Super Clean Blogger

SolidMag

Instinct Blogger Template

Android Market Blogger Template

Premium PlyTag Blogger Template

Blue News Blogger Template

Wah capek sob, ngedit² gambar buat screenshotnya amit² dah. Segitu saja yah, semoga berkenan dan silahkan pilih² saja template akhir tahunya mana yang disukai :) Bagi sobat yang punya kocek (premium), bisa lihat koleksi .
Happy template \m/

Selasa, 13 Desember 2011

Make Label/Category Use HTML5 Canvas Tag Cloud

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/