membuat menu start windows diblog

pada siang hari ini saya ingin menepati janji dari sobat TKJ Comunity, dia merequest bagaimana cara membuat start menu windows di blog. cara Membuat menu windows di blog tidak terlalu sulit, beberapa waktu yang lalu ada teman saya nama nya jefry, beliau mendapat cara itu dari senior nya, ok deh daripada dengar saya nge dongeng mending langsung aja ke cara pembuatan nya, ets sampai lupa ni screen shot nya (menu ini di buat hanya dengan CSS atau scrip saja, tidak memakai image, menurut saya ini adalah karya yang sangat bagus :D )

tapi jangan Heran ya kenapa saya gak masang menu nya he he he klw mau lihat ni di blog saya yang satu lagi KLIK DISINI

1. Sediakan Alat dan Bahan, jika baca nya lagi puasa gak pakek kopi atau gorengan ya ?? xixixixi

2. Hati-hati, perhatikan setiap langkah anda menulis karena jika salah sedikit bisa menjadi salah banyak dan jika sudah salah banyak anda akan mendapat nilai jelek otomatis anda tidak naik kelas. #LOL :D

3. Carilah tempat yang nyaman untuk memanjakan tubuh anda, jika kurang nyaman ambil sepotong kue dan makanlah atau jika kurang nyaman lagi teguk secangkir jus yang anda suka :D wkwkwk ingat PUASA ya #LOL :P

4. Tambahkan kode di bawah ini sebelum kode ]]><b:skin>

#author{font:italic 14px Cambaria,Georgia,Serif;color:#666;margin:15px}#author h1{font:bold 32px 'Showcard Gothic',Arial,Sans-Serif;margin:0 10px;color:#437924;text-shadow:0 1px 0 rgba(255,255,255,0.4);position:relative;-webkit-animation:slow 2s;-moz-animation:slow 2s;-ms-animation:slow 2s;animation:slow 2s}#author .deskripsi{margin:10px 10px 10px;padding:10px;background:#F6EEAB;background:-webkit-linear-gradient(top,#ECDE8C,#F6EEAB);background:-moz-linear-gradient(top,#ECDE8C,#F6EEAB);background:-ms-linear-gradient(top,#ECDE8C,#F6EEAB);background:-o-linear-gradient(top,#ECDE8C,#F6EEAB);background:linear-gradient(top,#ECDE8C,#F6EEAB);border:1px solid #DCC56C;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);box-shadow:0 1px 2px rgba(0,0,0,0.4);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;position:relative;z-index:4;-webkit-animation:slow 1s;-moz-animation:slow 1s;-ms-animation:slow 1s;animation:slow 1s}#author .deskripsi:before{content:"";width:0;height:0;border-width:12px;border-style:solid;border-color:#DCC56C transparent transparent transparent;position:absolute;top:100%;left:19px;z-index:-1}#author .deskripsi:after{content:"";width:0;height:0;border-width:10px;border-style:solid;border-color:#F6EEAB transparent transparent transparent;position:absolute;top:100%;left:21px}#startbar{position:fixed;bottom:0;left:0;z-index:1000;width:100%;height:30px;background:-webkit-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5),rgba(0,0,0,0.9));background:-moz-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5),rgba(0,0,0,0.9));background:-ms-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5),rgba(0,0,0,0.9));background:-o-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5),rgba(0,0,0,0.9));background:linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5),rgba(0,0,0,0.9));border-top:1px solid rgba(0,0,0,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);font:normal 12px Calibri,Arial,Sans-Serif}#win{width:35px;height:35px;background:-webkit-radial-gradient(50% 90%,circle closest-corner,#07D9F9,#03456F 100%,#fff 300% );background:-moz-radial-gradient(50% 90%,circle closest-corner,#07D9F9,#03456F 100%,#fff 300% );background:-ms-radial-gradient(50% 90%,circle closest-corner,#07D9F9,#03456F 100%,#fff 300% );background:-o-radial-gradient(50% 90%,circle closest-corner,#07D9F9,#03456F 100%,#fff 300% );background:radial-gradient(50% 90%,circle closest-corner,#07D9F9,#03456F 100%,#fff 300% );border:1px solid #4A676F;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;-webkit-box-shadow:0 1px 1px rgba(255,255,255,0.9),inset 0 2px 1px rgba(255,255,255,0.8),inset 0 5px 2px rgba(255,255,255,0.5),inset 0 10px 10px rgba(255,255,255,0.3),inset 0 -1px 1px rgba(255,255,255,0.8);-moz-box-shadow:0 1px 1px rgba(255,255,255,0.9),inset 0 2px 1px rgba(255,255,255,0.8),inset 0 5px 2px rgba(255,255,255,0.5),inset 0 10px 10px rgba(255,255,255,0.3),inset 0 -1px 1px rgba(255,255,255,0.8);box-shadow:0 1px 1px rgba(255,255,255,0.9),inset 0 2px 1px rgba(255,255,255,0.8),inset 0 5px 2px rgba(255,255,255,0.5),inset 0 10px 10px rgba(255,255,255,0.3),inset 0 -1px 1px rgba(255,255,255,0.8);margin-top:-5px;margin-left:10px;margin-right:20px;display:block;position:relative;float:left;cursor:pointer;webkit-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-ms-transition:all 0.4s linear;-o-transition:all 0.4s linear;transition:all 0.4s linear}#cont-win{position:relative;left:7px;top:9px;-webkit-transform:skew(-4deg,-7deg) rotate(17deg);-moz-transform:skew(-4deg,-7deg) rotate(17deg);-ms-transform:skew(-4deg,-7deg) rotate(17deg);-o-transform:skew(-4deg,-7deg) rotate(17deg);transform:skew(-4deg,-7deg) rotate(17deg);display:block}.w1,.w2,.w3,.w4{width:8px;height:8px;float:left;margin:1px;background:#000;-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.4);-moz-box-shadow:1px 1px 1px rgba(0,0,0,0.4);box-shadow:1px 1px 1px rgba(0,0,0,0.4);-webkit-transform:skew(-4deg,-7deg);-moz-transform:skew(-4deg,-7deg);-ms-transform:skew(-4deg,-7deg);-o-transform:skew(-4deg,-7deg);transform:skew(-4deg,-7deg)}.w1{background:#BF321C;background:-webkit-radial-gradient(right bottom,circle cover,#fff,#E9A72E,#BF321C);background:-moz-radial-gradient(right bottom,circle cover,#fff,#E9A72E,#BF321C);background:-ms-radial-gradient(right bottom,circle cover,#fff,#E9A72E,#BF321C);background:-o-radial-gradient(right bottom,circle cover,#fff,#E9A72E,#BF321C);background:radial-gradient(right bottom,circle cover,#fff,#E9A72E,#BF321C)}.w2{background:#74A647;background:-webkit-radial-gradient(left bottom,circle cover,#fff,#C1D687,#74A647);background:-moz-radial-gradient(left bottom,circle cover,#fff,#C1D687,#74A647);background:-ms-radial-gradient(left bottom,circle cover,#fff,#C1D687,#74A647);background:-o-radial-gradient(left bottom,circle cover,#fff,#C1D687,#74A647);background:radial-gradient(left bottom,circle cover,#fff,#C1D687,#74A647)}.w3{background:#399FD3;background:-webkit-radial-gradient(right top,circle cover,#fff,#97D3F2,#399FD3);background:-moz-radial-gradient(right top,circle cover,#fff,#97D3F2,#399FD3);background:-ms-radial-gradient(right top,circle cover,#fff,#97D3F2,#399FD3);background:-o-radial-gradient(right top,circle cover,#fff,#97D3F2,#399FD3);background:radial-gradient(right top,circle cover,#fff,#97D3F2,#399FD3)}.w4{background:#FCCC2E;background:-webkit-radial-gradient(left top,circle cover,#fff,#F7DF95,#FCCC2E);background:-moz-radial-gradient(left top,circle cover,#fff,#F7DF95,#FCCC2E);background:-ms-radial-gradient(left top,circle cover,#fff,#F7DF95,#FCCC2E);background:-o-radial-gradient(left top,circle cover,#fff,#F7DF95,#FCCC2E);background:radial-gradient(left top,circle cover,#fff,#F7DF95,#FCCC2E)}#menu{position:absolute;left:-11px;z-index:-1;width:400px;height:auto;padding:6px;background:-webkit-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5));background:-moz-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5));background:-ms-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5));background:-o-linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5));background:linear-gradient(65deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9),rgba(0,0,0,0.5));border:1px solid rgba(0,0,0,0.6);border-bottom-width:2px;-webkit-box-shadow:inset 0 0 1px rgba(255,255,255,2.5);moz-box-shadow:inset 0 0 1px rgba(255,255,255,2.5);box-shadow:inset 0 0 1px rgba(255,255,255,2.5);border-radius:7px 7px 0 0;visibility:hidden;opacity:0;bottom:31px;-webkit-transition:all 0.2s ease-out 0.2s;-moz-transition:all 0.2s ease-out 0.2s;-ms-transition:all 0.2s ease-out 0.2s;-o-transition:all 0.2s ease-out 0.2s;transition:all 0.2s ease-out 0.2s;cursor:default}#win:hover{-webkit-box-shadow:0 1px 7px rgba(255,255,255,0.9),inset 0 2px 1px #fff,inset 0 2px 2px rgba(255,255,255,0.5),inset 0 10px 10px rgba(255,255,255,0.3),inset 0 -1px 1px rgba(255,255,255,0.8);-moz-box-shadow:0 1px 7px rgba(255,255,255,0.9),inset 0 2px 1px #fff,inset 0 2px 2px rgba(255,255,255,0.5),inset 0 10px 10px rgba(255,255,255,0.3),inset 0 -1px 1px rgba(255,255,255,0.8);box-shadow:0 1px 7px rgba(255,255,255,0.9),inset 0 2px 1px #fff,inset 0 2px 2px rgba(255,255,255,0.5),inset 0 10px 10px rgba(255,255,255,0.3),inset 0 -1px 1px rgba(255,255,255,0.8)}#win:hover #menu{visibility:visible;opacity:1}#menu .left-menu{float:left;display:inline;background:#fff;width:250px;height:407px;border:1px solid rgba(0,0,0,0.6);-webkit-box-shadow:0 0 1px rgba(255,255,255,0.5);-moz-box-shadow:0 0 1px rgba(255,255,255,0.5);box-shadow:0 0 1px rgba(255,255,255,0.5);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:relative}#menu .left-menu form#search{width:250px;background:#E4F4FC;border-top:2px solid #BEE6FD;padding:10px 0;position:absolute;bottom:0;left:0;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}#menu .left-menu form#search input{background:#fff;border:1px solid #aaa;padding:3px 5px;margin:0 14px;font:italic 12px Calibri,Arial,Sans-Serif;color:#999;width:202px;position:relative}#menu .left-menu form#search:after{content:"";width:5px;height:5px;border:1px solid #666;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;position:absolute;left:100%;margin-left:-37px;top:16px}#menu .left-menu form#search:before{content:"";width:3px;height:0;border:1px solid #666;position:absolute;z-index:3;left:100%;margin-left:-41px;top:23px;-webkit-transform:rotate(-41deg);-moz-transform:rotate(-41deg);-ms-transform:rotate(-41deg);-o-transform:rotate(-41deg);transform:rotate(-41deg)}#menu .left-menu ul{padding:2px;margin:0}#menu .left-menu li{margin:0;padding:0;list-style:none;width:246px;text-align:left}#menu .left-menu li a{color:#222;text-decoration:none;line-height:27px;margin-bottom:1px;padding:0 12px;border:1px solid transparent;display:block;position:relative}#menu .left-menu li a.arrow:after{content:"";width:0;height:0;position:absolute;left:100%;top:9px;margin-left:-16px;border-width:5px;border-style:solid;border-color:transparent transparent transparent #222}#menu .left-menu .recent{width:142px;padding:3px;background:#F4F7FB;-webkit-box-shadow:inset 1px 0 1px rgba(0,0,0,0.2);-moz-box-shadow:inset 1px 0 1px rgba(0,0,0,0.2);box-shadow:inset 1px 0 1px rgba(0,0,0,0.2);height:402px;position:absolute;z-index:1000;top:0;left:245px;visibility:hidden;opacity:0;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;-webkit-transition:all 0.2s ease-out 0.2s;-moz-transition:all 0.2s ease-out 0.2s;-ms-transition:all 0.2s ease-out 0.2s;-o-transition:all 0.2s ease-out 0.2s;transition:all 0.2s ease-out 0.2s}#menu .left-menu .recent hr{border:none !important;height:1px;overflow:visible;background:#e6e6e6;position:relative;margin:10px 2px}#menu .left-menu .recent hr:before{content:"Recent";padding:0 5px 0 2px;font-size:12px;color:#045182;position:absolute;left:0;top:-8px;margin-right:-50px;background:#F4F7FB}#menu .left-menu li:hover .recent{left:249px;visibility:visible;opacity:1}#menu .left-menu li li{width:138px !important}#menu .left-menu li li a{padding:0 5px;line-height:16px !important;margin-bottom:2px}#menu .left-menu li a:hover{background:-webkit-linear-gradient(top,#E4F4FC,#ACDCF7);background:-moz-linear-gradient(top,#E4F4FC,#ACDCF7);background:-ms-linear-gradient(top,#E4F4FC,#ACDCF7);background:-o-linear-gradient(top,#E4F4FC,#ACDCF7);background:linear-gradient(top,#E4F4FC,#ACDCF7);border-color:#0CC0E1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 0 3px #fff;-moz-box-shadow:inset 0 0 3px #fff;box-shadow:inset 0 0 3px #fff}#menu .left-menu li.all-prog{position:absolute;bottom:48px;left:2px;border-top:1px solid #eee;padding-top:3px}#menu .left-menu li.all-prog a{line-height:22px;padding:0 0 0 34px}#menu .left-menu li.all-prog .recent.all{width:220px;height:400px;padding:5px 15px;font:normal 16px 'Comic Sans MS',Times,Serif;text-shadow:0 0 1px rgba(0,0,0,0.6);position:absolute;top:0;left:0;margin-left:-2px;margin-top:-333px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:#fff;-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,0.5);-moz-box-shadow:inset 0 0 1px rgba(0,0,0,0.5);box-shadow:inset 0 0 1px rgba(0,0,0,0.5)}#menu .left-menu li.all-prog a:before{content:"";position:absolute;right:100%;top:7px;margin-right:-15px;border-width:4px 5px;border-style:solid;border-color:transparent transparent transparent #111;display:block}.fleft{float:left;margin:3px 10px 0 -10px;position:relative}.foldr{width:20px;height:15px;margin-top:6px;background:#F6EEAB;background:-webkit-linear-gradient(top,#ECDE8C,#F6EEAB);background:-moz-linear-gradient(top,#ECDE8C,#F6EEAB);background:-ms-linear-gradient(top,#ECDE8C,#F6EEAB);background:-o-linear-gradient(top,#ECDE8C,#F6EEAB);background:linear-gradient(top,#ECDE8C,#F6EEAB);border:1px solid #DCC56C;-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2);-moz-box-shadow:0 1px 0 rgba(0,0,0,0.2);box-shadow:0 1px 0 rgba(0,0,0,0.2);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.foldr:before{content:"";width:8px;height:0;border-top:3px solid #DCC56C;display:block;position:absolute;bottom:100%;left:0}.mw{width:12px;height:10px;margin-left:-4px;border:2px solid #fff;background:-webkit-linear-gradient(top,#fff,#0E70A9,#fff,#0E70A9,#fff,#fff,#0E70A9,#fff,#0E70A9);background:-moz-linear-gradient(top,#fff,#0E70A9,#fff,#0E70A9,#fff,#fff,#0E70A9,#fff,#0E70A9);background:-ms-linear-gradient(top,#fff,#0E70A9,#fff,#0E70A9,#fff,#fff,#0E70A9,#fff,#0E70A9);background:-o-linear-gradient(top,#fff,#0E70A9,#fff,#0E70A9,#fff,#fff,#0E70A9,#fff,#0E70A9);background:linear-gradient(top,#fff,#0E70A9,#fff,#0E70A9,#fff,#fff,#0E70A9,#fff,#0E70A9);color:#023B62;-webkit-box-shadow:1px 1px 0 #bbb,-2px 4px 0 #0E70A9;-moz-box-shadow:1px 1px 0 #bbb,-2px 4px 0 #0E70A9;box-shadow:1px 1px 0 #bbb,-2px 4px 0 #0E70A9;position:relative}.mw:before{content:"w";position:absolute;top:0;left:0;background:#fff;border:2px solid #fff;font-size:8px;line-height:6px}.op{font:bold 22px Cambaria,Georgia,Times,Serif;color:#B73941;line-height:normal;margin-top:0;margin-left:-8px;text-shadow:0 1px 1px #ddd;position:relative}.op:after{content:"";width:10px;height:1px;background:#666;-webkit-box-shadow:0 0 3px #000;-moz-box-shadow:0 0 3px #000;box-shadow:0 0 3px #000;display:block;position:absolute;top:86%;left:4px}.ie{font:bold 30px Georgia,Serif;color:#066298;line-height:normal;margin-top:-6px;margin-left:-8px;position:relative}.ie:after{content:"";width:18px;height:2px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 3px 0 #FAD149,0px 1px 1px rgba(0,0,0,0.6);-moz-box-shadow:0 3px 0 #FAD149,0px 1px 1px rgba(0,0,0,0.6);box-shadow:0 3px 0 #FAD149,0px 1px 1px rgba(0,0,0,0.6);position:absolute;top:42%;left:-4px;-webkit-transform:rotate(-36deg);-moz-transform:rotate(-36deg);-ms-transform:rotate(-36deg);-o-transform:rotate(-36deg);transform:rotate(-36deg)}.np{width:16px;height:20px;background:-webkit-linear-gradient(-45deg,#fff 0%,#71CCE0 100%);background:-moz-linear-gradient(-45deg,#fff 0%,#71CCE0 100%);background:-ms-linear-gradient(-45deg,#fff 0%,#71CCE0 100%);background:-o-linear-gradient(-45deg,#fff 0%,#71CCE0 100%);background:linear-gradient(-45deg,#fff 0%,#71CCE0 100%);position:relative;-webkit-transform:skew(2deg,2deg) rotate(-2deg) translate(4px,0px);-moz-transform:skew(2deg,2deg) rotate(-2deg) translate(4px,0px);-ms-transform:skew(2deg,2deg) rotate(-2deg) translate(4px,0px);-o-transform:skew(2deg,2deg) rotate(-2deg) translate(4px,0px);transform:skew(2deg,2deg) rotate(-2deg) translate(4px,0px);margin-right:15px;-webkit-box-shadow:-2px 1px 0 #4A9BCD;-moz-box-shadow:-2px 1px 0 #4A9BCD;box-shadow:-2px 1px 0 #4A9BCD}.ai{width:6px;height:6px;line-height:normal;color:#fff;font:bold 8px Verdana,Arial,Sans-Serif;padding:6px;margin-left:-10px;margin-right:15px;left:0;background:-webkit-linear-gradient(45deg,#EA6E56,#A71D07,#fff);background:-moz-linear-gradient(45deg,#EA6E56,#A71D07,#fff);background:-ms-linear-gradient(45deg,#EA6E56,#A71D07,#fff);background:-o-linear-gradient(45deg,#EA6E56,#A71D07,#fff);background:linear-gradient(45deg,#EA6E56,#A71D07,#fff);-webkit-box-shadow:0 0 1px rgba(0,0,0,0.8);-moz-box-shadow:0 0 1px rgba(0,0,0,0.8);box-shadow:0 0 1px rgba(0,0,0,0.8)}#menu .right-menu{width:140px;float:right;display:inline}#menu .right-menu ul,#menu .right-menu li{margin:0;padding:0;list-style:none;display:block}#menu .right-menu ul{margin-top:60px;margin-bottom:15px}#menu .right-menu li a{padding:8px 7px 7px;display:block;font:normal 12px Calibri,Arial,Sans-Serif;color:#fff;text-decoration:none;margin-bottom:3px;width:124px;border:1px solid transparent;display:block}#menu .right-menu li a:hover{background:#222;background:-webkit-linear-gradient(bottom,rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%,rgba(255,255,255,0.4) 100%);background:-moz-linear-gradient(bottom,rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%,rgba(255,255,255,0.4) 100%);background:-ms-linear-gradient(bottom,rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%,rgba(255,255,255,0.4) 100%);background:-o-linear-gradient(bottom,rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%,rgba(255,255,255,0.4) 100%);background:linear-gradient(bottom,rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%,rgba(255,255,255,0.4) 100%);border-color:#111;-webkit-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 1px rgba(255,255,255,0.8);-moz-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 1px rgba(255,255,255,0.8);box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 1px rgba(255,255,255,0.8);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.shutdown{width:84px;font:bold 12px Calibri,Arial,Sans-Serif;text-shadow:0 1px 2px #000;color:#fff;background:#222;background:-webkit-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);background:-moz-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);background:-ms-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);background:-o-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);background:linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);border:1px solid #111;margin-bottom:12px;-webkit-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 2px rgba(255,255,255,0.8);-moz-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 2px rgba(255,255,255,0.8);box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 2px rgba(255,255,255,0.8);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;cursor:pointer}.shutdown:hover{-webkit-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 5px rgba(255,255,255,1);-moz-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 5px rgba(255,255,255,1);box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 5px rgba(255,255,255,1)}.shutdown div.lf{padding:4px 5px;position:relative}.shutdown div.lf:after{content:"";padding:0 6px;margin-left:7px;border-left:1px solid #111;-webkit-box-shadow:-1px 0 0 rgba(255,255,255,0.3);-moz-box-shadow:-1px 0 0 rgba(255,255,255,0.3);box-shadow:-1px 0 0 rgba(255,255,255,0.3)}.shutdown div.lf:before{content:"";width:0;height:0;position:absolute;left:100%;top:7px;margin-left:-13px;border-width:4px 4px;border-style:solid;border-color:transparent transparent transparent #fff}#menu #kontener{position:absolute;top:0;right:48px;margin-top:-20px;z-index:10;background:-webkit-linear-gradient(-47deg,rgba(255,255,255,0.5) 0%,#666 81%,#fff 100%);background:-moz-linear-gradient(-47deg,rgba(255,255,255,0.5) 0%,#666 81%,#fff 100%);background:-ms-linear-gradient(-47deg,rgba(255,255,255,0.5) 0%,#666 81%,#fff 100%);background:-o-linear-gradient(-47deg,rgba(255,255,255,0.5) 0%,#666 81%,#fff 100%);background:linear-gradient(-47deg,rgba(255,255,255,0.5) 0%,#666 81%,#fff 100%);padding:3px;border:1px solid #444;-webkit-box-shadow:inset 1px 0 1px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.5);-moz-box-shadow:inset 1px 0 1px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.5);box-shadow:inset 1px 0 1px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.5);border-radius:5px}#menu #kontener .admin{width:50px;height:48px;border:1px solid rgba(0,0,0,0.5);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:-webkit-radial-gradient(bottom,circle,#FACF0C,#4BB648);background:-moz-radial-gradient(bottom,circle,#FACF0C,#4BB648);background:-ms-radial-gradient(bottom,circle,#FACF0C,#4BB648);background:-o-radial-gradient(bottom,circle,#FACF0C,#4BB648);background:radial-gradient(bottom,circle,#FACF0C,#4BB648);-webkit-box-shadow:inset 0 -1px 7px #fff;-moz-box-shadow:inset 0 -1px 7px #fff;box-shadow:inset 0 -1px 7px #fff;position:relative}#list{float:left;display:inline}.opened{width:38px;height:25px;text-align:center;background:#222;background:-webkit-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);background:-moz-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);background:-ms-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);background:-o-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);background:linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);border:1px solid rgba(255,255,255,0.4);-webkit-box-shadow:0 0 1px rgba(0,0,0,0.9);-moz-box-shadow:0 0 1px rgba(0,0,0,0.9);box-shadow:0 0 1px rgba(0,0,0,0.9);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;float:left;margin:2px 2px 0;cursor:pointer}.opened.pilled{position:relative}.opened .np{border:none;width:12px !important;height:12px;-webkit-transform:skew(2deg,2deg) rotate(-2deg) translate(0px,0px);-moz-transform:skew(2deg,2deg) rotate(-2deg) translate(0px,0px);-ms-transform:skew(2deg,2deg) rotate(-2deg) translate(0px,0px);-o-transform:skew(2deg,2deg) rotate(-2deg) translate(0px,0px);transform:skew(2deg,2deg) rotate(-2deg) translate(0px,0px)}.opened.pilled:before{content:"";width:38px;height:25px;background:#222;background:-webkit-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);background:-moz-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);background:-ms-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);background:-o-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);background:linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);border:1px solid rgba(255,255,255,0.4);-webkit-box-shadow:0 0 1px rgba(0,0,0,0.9);-moz-box-shadow:0 0 1px rgba(0,0,0,0.9);box-shadow:0 0 1px rgba(0,0,0,0.9);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;position:absolute;top:-1px;left:2px;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;transition:all 0.2s ease-out}.opened.pilled:hover:before{left:100%;margin-left:4px}.opened .foldr.small{margin:4px auto 0;width:20px;height:15px}.opened .foldr.small:before{display:none}.opened .screensht{position:absolute;margin-bottom:40px;width:399px;padding:10px 0;z-index:-7;border:1px solid rgba(255,255,255,0.5);background:-webkit-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);background:-moz-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);background:-ms-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);background:-o-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);background:linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,0.2),inset -1px -1px 0 rgba(0,0,0,0.2),inset 0 0 1px rgba(255,255,255,0.2),0 1px 3px #000,1px 5px 12px #000;-moz-box-shadow:inset 1px 1px 0 rgba(0,0,0,0.2),inset -1px -1px 0 rgba(0,0,0,0.2),inset 0 0 1px rgba(255,255,255,0.2),0 1px 3px #000,1px 5px 12px #000;box-shadow:inset 1px 1px 0 rgba(0,0,0,0.2),inset -1px -1px 0 rgba(0,0,0,0.2),inset 0 0 1px rgba(255,255,255,0.2),0 1px 3px #000,1px 5px 12px #000;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;height:128px;overflow:hidden;opacity:0;bottom:-200px;-webkit-transition:all 0.5s ease-out 0.35s;-moz-transition:all 0.5s ease-out 0.35s;-ms-transition:all 0.5s ease-out 0.35s;-o-transition:all 0.5s ease-out 0.35s;transition:all 0.5s ease-out 0.35s;cursor:default}.opened .screensht .close{position:absolute;top:7px;right:7px;color:#fff;line-height:12px;padding:0 0;text-align:center;width:12px;border:1px solid rgba(0,0,0,0.5);background:#AE3110;background:-webkit-linear-gradient(90deg,#EA6E56,#A71D07,#fff);background:-moz-linear-gradient(90deg,#EA6E56,#A71D07,#fff);background:-ms-linear-gradient(90deg,#EA6E56,#A71D07,#fff);background:-o-linear-gradient(90deg,#EA6E56,#A71D07,#fff);background:linear-gradient(90deg,#EA6E56,#A71D07,#fff);-webkit-box-shadow:inset 0 0 1px rgba(255,255,255,0.7);-moz-box-shadow:inset 0 0 1px rgba(255,255,255,0.7);box-shadow:inset 0 0 1px rgba(255,255,255,0.7);text-shadow:0 0 1px #000;font:bold Arial,Sans-Serif;opacity:0.2;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;transition:all 0.2s ease-out;cursor:pointer}.opened:hover .screensht{opacity:1;bottom:0}.opened .screensht .col1:hover .close,.opened .screensht .col2:hover .close{visibility:visible;opacity:1}.opened .screensht .col1,.opened .screensht .col2{width:174px;height:116px;padding:5px;color:#fff;float:left;margin-left:9px;background:transparent;border:1px solid transparent;position:relative}.opened .screensht .kotak{width:170px;height:90px;margin:24px auto 1px;border:1px solid #000;background:#fafafa;background:-webkit-linear-gradient(45deg,#fff,#ddd,#fff,#ddd);background:-moz-linear-gradient(45deg,#fff,#ddd,#fff,#ddd);background:-ms-linear-gradient(45deg,#fff,#ddd,#fff,#ddd);background:-o-linear-gradient(45deg,#fff,#ddd,#fff,#ddd);background:linear-gradient(45deg,#fff,#ddd,#fff,#ddd);-webkit-box-shadow:0 0 1px rgba(255,255,255,0.8);-moz-box-shadow:0 0 1px rgba(255,255,255,0.8);box-shadow:0 0 1px rgba(255,255,255,0.8)}.opened.tunggal .screensht{width:204px;padding:10px 0}.opened.tunggal .screensht .col1{width:174px;padding:5px;margin-left:9px;float:none !important;display:block;position:relative}.opened .screensht .col1:hover,.opened .screensht .col2:hover{background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.2)}.opened.tunggal .screensht .col1.fold:before{content:"My Documents";position:absolute;display:block;top:7px;left:7px}.opened.tunggal .screensht .col1.ntpad:before{content:"I love CSS3";position:absolute;display:block;top:7px;left:7px}.opened .screensht .blank:before{content:"Not Available";position:absolute;display:block;top:7px;left:7px}.opened:hover{-webkit-box-shadow:inset 0 1px 1px #fff;-moz-box-shadow:inset 0 1px 1px #fff;box-shadow:inset 0 1px 1px #fff}.opened.hide{float:right;width:12px}#fright{float:right;width:132px;padding-top:8px;color:#fff}#fright div{float:left;display:inline;cursor:pointer}.connection{width:10px;height:7px;border-width:1px;border-style:solid;border-color:#fff;position:relative;margin-top:2px;margin-left:5px}.connection:before{content:"";width:0;height:0;border:2px solid #fff;position:absolute;top:100%;left:3px;margin-top:0}.connection:after{content:"";width:6px;height:0;border-bottom:1px solid #fff;position:absolute;top:100%;left:2px;margin-top:3px}.plus{border:1px solid transparent;margin-bottom:12px;width:18px;height:15px;margin-right:5px;position:relative}.plus .screensht{position:absolute;margin-bottom:30px;width:133px;padding:14px 0;z-index:-7;border:1px solid rgba(255,255,255,0.4);background:-webkit-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);background:-moz-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);background:-ms-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);background:-o-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);background:linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);-webkit-box-shadow:inset 0 0 1px rgba(255,255,255,0.5),0 1px 3px #000,1px 5px 12px #000;-moz-box-shadow:inset 0 0 1px rgba(255,255,255,0.5),0 1px 3px #000,1px 5px 12px #000;box-shadow:inset 0 0 1px rgba(255,255,255,0.5),0 1px 3px #000,1px 5px 12px #000;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;height:100px;overflow:hidden;opacity:0;bottom:-100px;left:-25px;-webkit-transition:all 0.5s ease-out 0.2s;-moz-transition:all 0.5s ease-out 0.2s;-ms-transition:all 0.5s ease-out 0.2s;-o-transition:all 0.5s ease-out 0.2s;transition:all 0.5s ease-out 0.2s}.plus .screensht .grup{border:1px solid #rgba(0,0,0,0.6);width:95px;padding:5px;height:90px;background:#fff;margin-left:14px;box-shadow:0 0 1px rgba(255,255,255,0.4);text-align:center}.plus:hover{background:#222;background:-webkit-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);background:-moz-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);background:-ms-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);background:-o-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);background:linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0.1) 51%);-webkit-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 2px rgba(255,255,255,0.8);-moz-box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 2px rgba(255,255,255,0.8);box-shadow:0 0 1px rgba(255,255,255,0.4),inset 0 0 2px rgba(255,255,255,0.8);border-color:#111;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.plus:hover .screensht{visibility:visible;bottom:0;opacity:1;color:#000}.plus:after{content:"";width:0;height:0;border-width:5px 4px;border-style:solid;border-color:transparent transparent #fff transparent;position:absolute;left:100%;margin-left:-13px}.speker{width:0;height:6px;margin-top:2px;margin-left:10px;border-width:3px 4px;border-style:solid;border-color:transparent #fff transparent transparent;position:relative}.speker:before{content:"";width:0;height:4px;border-left:2px solid #fff;position:absolute;right:100%;top:1px}.jam{margin-left:10px}.clear{clear:both}@-webkit-keyframes slow{from{-webkit-transform:translate(0px,-200px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1;}}@-moz-keyframes slow{from{-moz-transform:translate(0px,-200px);opacity:0}to{-moz-transform:translate(0px,0px);opacity:1;}}@-ms-keyframes slow{from{-ms-transform:translate(0px,-200px);opacity:0}to{-ms-transform:translate(0px,0px);opacity:1;}}@keyframes slow{from{transform:translate(0px,-200px);opacity:0}to{transform:translate(0px,0px);opacity:1;}}

5.Tambahkan kode di bawah ini sebelum kode </body>

<ul>

<li><a href=" http://yudhacomunity.blogspot.com/" class="arrow"><div class="fleft foldr"></div>My Documents</a>

<hr />

<ul>

<li><a href=" http://yudhacomunity.blogspot.com/">Recent 1</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/">Recent 2</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/">Recent 3</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/">Film-Bokep.3gp</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/">Film-Nyokep.3gp</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/">Film-Enyak.3gp</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/">Film-Babeh.3gp</a></li>

</ul>

</div>

</li>

<li><a href=" http://yudhacomunity.blogspot.com/"><div class="fleft foldr"></div>Your Documents</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/"><div class="fleft foldr"></div>Our Documents</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/" class="arrow"><div class="fleft mw"></div>Microsoft Office Word 2007</a>

<hr />

<ul>

<li><a href=" http://yudhacomunity.blogspot.com/">Andai.docx</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/">Engkau.docx</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/">Betapa.docx</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/">Kebelet.docx</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/">Pipis.docx</a></li>

</ul>

</div>

</li>

<li><a href=" http://yudhacomunity.blogspot.com/"><div class="fleft op">O</div>Opera Web Browser</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/"><div class="fleft ie">e</div>Internet Explorer</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/"><div class="fleft np"></div>Notepad</a></li>

<li><a href=" https://www.facebook.com/jok.yudha"><div class="fleft ai">FB</div>Facebook</a></li>

<li class="all-prog"><a href="#">All Programs</a>

<div class="recent all">Hi, Nama Saya Yudha, Saya adalah Remaja yang ingin terus belajar ilmu IT, tidak kenal apakah ilmu itu Legal atau pun Ilegal, karena Ilmu tetap lah Ilmu, karena walaupun ilmu itu tidak legal, namun masih ada manfaat nya untuk kegiatan positif !

Terus berusaha dan tidak pernah menyerah

Moto Hidup saya adalah “Kegagalan bukan lah Hal yang paling menakutkan, namun hal yang paling menakutkan adalah jika kamu tidak bisa menerima kehadiran dari kegagalan itu Tetap Semangat “

</div>

</li>

</ul>

</div>

<ul>

<li><a href=" http://yudhacomunity.blogspot.com/">Documents</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/">Pictures</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/">Music</a></li>

<li style="border-top:1px solid rgba(255,255,255,0.1);padding-top:2px;"><a href="#">Games</a></li>

<li style="border-bottom:1px solid rgba(255,255,255,0.1);padding-top:5px;margin-bottom:2px;"><a href=" http://yudhacomunity.blogspot.com/">Computer</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/">Control Panel</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/">Device and Printer</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/">Default Programs</a></li>

<li><a href=" http://yudhacomunity.blogspot.com/">Help and Support</a></li>

</ul>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href=" https://plus.google.com/116758929783952899224/about" target="_blank">About the Author</a>

</div>

</div>

</div>

</div>

Mudah kan cara nya ??? gak sesulit yang di bayangkan kan ?? he he he. artikel ini jadi karena berkat bantuan bang Jefry, beliau yang memberitau saya cara ini :)

Beri komentar anda tentang artikel ini, Komentar anda sangat berarti bagi saya dan blog ini, mohon jangan spam :)http://y-ilmutkj.blogspot.com/

Wednesday, July 25, 2012

membuat menu start windows diblog

Recent

Popular

Comments

Follow Us

Facebook

Blog Archive

Tags