Kita mulai :
1. Buka Notepad terlebih dahulu
2. Copy + paste kan tulisan ini ke dalam Notepad
Dim message, sapi
message=InputBox("What do you mean to say?","Speak to me")
Set sapi=CreateObject("sapi.spvoice")
sapi.Speak message
* { margin:0; padding: 0; } #navbar-iframe { height: 0; opacity: 0.0; -o-transition: height 2s linear 8s, opacity 2.5s linear 6s; -moz-transition: height 2s linear 8s, opacity 2.5s linear 6s; -webkit-transition: height 2s linear 8s, opacity 2.5s linear 6s; } body:hover #navbar-iframe { height: 30px; opacity: 1.0; -o-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s; -moz-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s; -webkit-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s; } body .bgsGR_esm { position: fixed; width: 100%; top: 0; height: 100%; opacity: 0.97; filter: alpha(opacity=97); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=97)"; background: #000; border-bottom: 3px solid transparent; z-index: 1; -o-transition: all 3s ease-in-out 10s; -moz-transition: all 3s ease-in-out 10s; -webkit-transition: all 3s ease-in-out 10s; } body:hover .bgsGR_esm { opacity: 0.0; height: 0.001%; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; background: #0a7f01; border-bottom: 5px solid #333; -o-transition: opacity 2s ease-in-out 2.5s, background-color 3s linear 0.5s, height 1s ease-in 1.8s; -moz-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s; -webkit-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s; } body .bgsGR_esm p.esm1 { margin: 0; padding: 0; width: 92%; background: transparent; font-size: 100px; font-family: "Serif", Times New Roman; color: #333; /* original code by: gubhugreyot.blogspot.com */ text-shadow: 1px 1px 2px #ccc; position: relative; margin-top: 200px; line-height: 20px; font-weight: bold; text-align: center; border: 30px solid transparent; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; -o-transition: -o-transform 5s ease-out 8s, background-color 4s ease-out 12s; -moz-transition: -moz-transform 5s ease-out 8s, background 4s ease-out 12s; -webkit-transition: -webkit-transform 5s ease-out 8s, background 4s ease-out 12s; } body:hover .bgsGR_esm p.esm1{ font-size: 10px; color: red; width: 25%; margin: 340px 0 0 300px; padding: 25px; background: #aaa; border: 20px solid #888; border-radius: 170px; -moz-border-radius: 170px; -webkit-border-radius: 170px; -o-transform:translate(600px,-500px) rotate(360deg) scale(0.2); -moz-transform:translate(600px,-500px) rotate(360deg) scale(0.2); -webkit-transform:translate(600px,-500px) rotate(360deg) scale(0.2); -o-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -o-transform 1.2s linear 1.5s, background-color 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in; -moz-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -moz-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in; -webkit-transition: font 1.1s 0.1s, width 1.7s 0s, margin-left 0.8s 1.2s, -webkit-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1s ease-in 0.5s, border 3s ease-in, -webkit-border-radius 3s ease-in; } .bgsGR_esm p span.esm2 { font-size: 18px; opacity: 0.5; filter: alpha(opacity=50); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; display: block; /* original code by: gubhugreyot.blogspot.com */ text-align: center; width: 300px; margin: -10px auto; font-weight: normal; padding: 2px 8px; background: #000; border: 1px solid #333; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; color: #0000FF; text-shadow: none; font-family: Arial, Helvetica, sans-serif; -o-transition: 1s ease-out; -moz-transition: 1s ease-out; -webkit-transition: 1s ease-out; } .bgsGR_esm:hover p span.esm2{ font-size: 10px; width: 200px; /* original code by: gubhugreyot.blogspot.com */ padding: 0; } .bgsGR_esm p span.esm3{ color: #ccc; font-family: "Tahoma", Arial, Helvetica; display: block; margin:10px auto; background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/ESM3H2V70.png) left center repeat-x; background: -moz-linear-gradient(top,#666,#111); background: -webkit-gradient(linear,0% top,0% bottom,from(#111),to(#666)); opacity: 0.6; filter: alpha(opacity=60); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; width: 250px; text-shadow: 1px 1px 1px #000; border: 1px solid #333; border-radius: 4px;padding:2px 10px; -moz-border-radius: 4px; -webkit-border-radius: 4px; font-size: 12px; font-weight: normal; line-height: 16px; } .bgsGR_esm .by_gubhugreyot { margin-left: 30px; text-align: left; color: #015828; font-size: 12px; font-weight: normal; position: absolute; top: 550px; /* original code by: gubhugreyot.blogspot.com */ width: 100%; height: 20px; left: 0; } .bgsGR_esm .by_gubhugreyot span.esm4 { color: #aaa; font-style:italic; }