Login Windows 8 dengan Javascript untuk Blogger
01 February 2015
Tutorial Login Windows 8 Ini hanya element pembuka. Elemen Pembuka ini adalah modifikasi dari Element Pembuka Windows 7, dan mungkin sobat bertanya apa fungsinya?
Fungsinya adalah hanya untuk element pembuka atau loading blog.
Note : Sobat bisa merubah password sesuai keinginan sobat di Javascriptnya...
Button Windows : Untuk Password Hint, jika tidak ingin memakai password hint silahkan hapus saja...
Button Signal : Style Connect to Internet Windows 8
Button Power Off : Restart untuk Refresh, shut down untuk menghilangkan seluruh element, Sleep sama seperti shut down.
And With Font Awesome 4.3.0
And With Font Awesome 4.3.0
Jika sobat ingin membuat "Login Windows 8" silahkan ikuti tutorial dibawah ini.
HTML, silahkan sobat letakan di bawah
<body> <div class='b' id='b'><div class='foto'/><div class='g'><p class='f'><b style='font-size:17px'><data:blog.title/></b><br/> <co style='color:#828282'>Locked</co></p><input id='d' placeholder='Password' type='password'/><a id='e' onclick='cek()'>➨</a></div>
<div class='poweroff' id='power1' onclick='document.getElementById('spower').style.display='block';document.getElementById('power2').style.display='block';document.getElementById('power1').style.display='none'' title='Power Off'><i class='fa fa-power-off'/></div>
<div class='poweroff' id='power2' onclick='document.getElementById('spower').style.display='none';document.getElementById('power2').style.display='none';document.getElementById('power1').style.display='block'' title='Power Off'><i class='fa fa-power-off'/></div>
<div class='windows' id='windows1' onclick='document.getElementById('notifwindows').style.display='block';document.getElementById('windows2').style.display='block';document.getElementById('windows1').style.display='none'' title='Windows'><i class='fa fa-windows'/></div>
<div class='windows' id='windows2' onclick='document.getElementById('notifwindows').style.display='none';document.getElementById('windows2').style.display='none';document.getElementById('windows1').style.display='block'' title='Windows'><i class='fa fa-windows'/></div>
<div class='signal' id='signal1' onclick='document.getElementById('internet').style.right='0';document.getElementById('signal2').style.display='block';document.getElementById('signal1').style.display='none'' title='Connect to Internet'><i class='fa fa-signal'/></div>
<div class='signal' id='signal2' onclick='document.getElementById('internet').style.right='-330px';document.getElementById('signal2').style.display='none';document.getElementById('signal1').style.display='block'' title='Connect to Internet'><i class='fa fa-signal'/></div>
<div id='notifwindows'>Password Hint : "<b>blanter</b>"</div>
<div id='internet'><may style='font-size:24px'>Networks</may><br/><br/>View Connection Settings<br/><br/><may style='font-size:24px'>Airplane Mode</may><br/><b>Off</b><br/><br/><may style='font-size:24px'>Connections</may><br/><i class='fa fa-tty' style='text-align:left;margin-right:5px;font-size:22px'/>Wireless Terminal<br/><br/><may style='font-size:24px'>Wi-Fi</may><br/><b>On</b><br/><i class='fa fa-signal' style='text-align:left;margin-right:5px;font-size:22px'/>Encraftsa</div>
<div id='spower'><div id='sleep' onclick='document.getElementById('b').style.display='none''>Sleep</div><div id='shutdown' onclick='document.getElementById('b').style.display='none''>Shut Down</div><div id='restart'><a href='/Restart.php' onclick='this.href = "http://encraftsa.blogspot.com"'>Restart</a></div></div>
</div>
<div class='c' id='c'/>
CSS, silahkan sobat letakan di atas
]]></b:skin> atau </style> .b,.c {
z-index:9999;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
-moz-transition:1s linear;
-o-transition:1s linear;
-webkit-transition:1s linear;
-ms-transition:1s linear;transition:1s linear}
.b {
background:#454545;
color:#fff;
text-align:center}
#e {
cursor:default;
padding:5px;
border:2px solid #fff;
background:#454545;
display:inline-block;
color:#EEE;
font:bold 19px/19px Arial,sans-serif;
vertical-align:middle;
margin:10px 0 0 0}
#e:hover {
background:#5A5A5A}
.b input {
padding:5px;
border:none;
margin:10px 0 0 0;
color:#000;
background:#E8E8E8;
width:65%;
vertical-align:middle;
border:4px solid #E8E8E8}
.b input:hover {
background:#F0F0F0;
border:4px solid #F0F0F0}
.b input:focus {
outline:none;
background:#fff;
border:4px solid #fff;}
.b .g {
position:absolute;
width:350px;
height:50px;
left:53%;
top:39%;
margin:-50px 0 0-125px;
text-align:left}
.c {
background:#fff url("http://static.komando.com/websites/videos/v1/images/spinner.gif")no-repeat center 90%}
.foto {
position:absolute;
width:120px;
height:120px;
margin:-55px 0 0-55px;
left:38%;
top:40%;
background:#000 url("https://lh5.googleusercontent.com/-rOKZjNjcfjM/AAAAAAAAAAI/AAAAAAAABQs/ozFkDlh624w/s120-c/photo.jpg")no-repeat center}
.f {margin:0;
font:normal 14px/20px Arial,sans-serif}
.cF {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);
opacity:0;
visibility:hidden}
.poweroff {
color:#fff;
font:normal 24px/24px Arial,sans-serif;
position:absolute;
padding:10px;
bottom:20px;
right:20px;
cursor:default;
}
.poweroff:hover {
background:rgba(115, 115, 115, 0.4);
}
.windows {
color:#fff;
font:normal 24px/24px Arial,sans-serif;
position:absolute;
padding:10px;
bottom:20px;
left:20px;
cursor:default;
}
.windows:hover {
background:rgba(115, 115, 115, 0.4);
}
.signal {
color:#fff;
font:normal 24px/24px Arial,sans-serif;
position:absolute;
padding:10px;
bottom:20px;
left:99px;
cursor:default;
}
.signal:hover {
background:rgba(115, 115, 115, 0.4);
}
#notifwindows {
background:#FAFAFA;
color:#828282;
font:normal 14px/20px Arial,sans-serif;
position:absolute;
bottom:70px;
left:14px;
padding:10px;
display:none;
}
#internet {
background:#323232;
position:absolute;
top:0;
bottom:0;
right:-330px;
width:250px;
font:normal 14px/25px Arial,sans-serif;
color:#fafafa;
padding:30px;
text-align:left;
cursor:default;
transition:all 0.4s ease 0s;
}
#restart {
width:80px;
background:#FAFAFA;
color:#222;
font:normal 14px/20px Arial,sans-serif;
position:absolute;
bottom:70px;
right:14px;
padding:10px;
cursor:default;
}
#restart:hover {background:#E4E4E4;}
#shutdown {
width:80px;
background:#FAFAFA;
color:#222;
font:normal 14px/20px Arial,sans-serif;
position:absolute;
bottom:110px;
right:14px;
padding:10px;
cursor:default;
}
#shutdown:hover {background:#E4E4E4;}
#sleep {
width:80px;
background:#FAFAFA;
color:#222;
font:normal 14px/20px Arial,sans-serif;
position:absolute;
bottom:150px;
right:14px;
padding:10px;
cursor:default;
}
#sleep:hover {background:#E4E4E4;}
#spower {display:none;text-align:left;border:2px solid #222}
#spower a {color:#222;text-decoration:none;cursor:default}
#spower a:visited {color:#222;text-decoration:none}
Javascript, silahkan sobat letakan di atas
</head> atau </body> <script type='text/javascript'>
function fade(){
var c = document.getElementById("c");
c.className += " cF";
}
function cek() {
var p = document.getElementById("d");
var d = document.getElementById("b");
// blanter adalah jawaban dari pertanyaanya
if (p.value == "blanter"){
d.className += " cF";
}else{
alert("Password Salah!");
}
}
//4000 = 4 detik adalah waktu tampilnya gambar loading
setTimeout("fade()", 4000);
</script>
Jika sobat belum memasang font awesome, silahkan letakan CSS dibawah ini tepat di atas
Jawaban blanter pada Javascriptnya bisa juga sobat ganti dengan angka misalnya 18 tapi tanpa tanda petik karena angka dalam javascript adalah integer. Tapi jika jawabannya teks harus menggunakan tanda petik seperti diatas.
</head> <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> Jawaban blanter pada Javascriptnya bisa juga sobat ganti dengan angka misalnya 18 tapi tanpa tanda petik karena angka dalam javascript adalah integer. Tapi jika jawabannya teks harus menggunakan tanda petik seperti diatas.