Cara Membuat Kotak Login di Blog dengan Mudah

Zetroblog.com | Cara Membuat Kotak Login di Blog - Hai sobat, apa kabar pada hari ini? hari yang begitu indah ini, pastikan anda sehat bukan? tentunya sehat dong, kali ini saya akan membagikan yang berhubungan dengan blogging, atau yang lebih jelasnya adalah tutorial blogging. Tutorial Blogging memang kerap banyak di cari orang, apa lagi cari yang dia mau seperti yang saya bagikan sebelumnya Cara Mudah Optimasi Meta Tag Valid HTML5.

DEMO

Sesuai dengan judul kita yakni Cara Membuat Kotak Login di Blog, Maksud dari Kotak Login di blog itu bagaimana? Biasanya kotak login hanya dapat di gunakan pada PHP, namun sekarang saya akan bagikan tips membuat kotak login dengan Javascript dan CSS.

Kotak Login atau biasa di sebut Form Login kerap biasanya di pakai untuk menyembunyikan / mengunci file-file atau artikel bahkan gambar yang terdapat pada blog kita agar orang lain tidak bisa mengaksesnya. Tapi segala keamanan yang terdapat pada Dunia Maya ini, dapat di bobol dengan banyak cara sekalipun itu sangatlah susah namun selalu ada celah walaupun sangat dikit dan banyak orang yang tidak mengetahuinya.

Yuk, simak berikut Cara Membuat Kotak Login pada Blog

1. Login ke blogger.com
2. Masuk ke Edit HTML
3. Setelah itu copy code di bawah ini dan letakkin di atas

<script type="text/javascript">
//<![CDATA[
function fade(){
var c = document.getElementById("c");
c.className += " cF";
}
function cek() {
var p = document.getElementById("d");
var d = document.getElementById("b");
// kurus adalah jawaban dari pertanyaanya
if (p.value == "zetroblog.com"){
d.className += " cF";
}else{
alert("Password Wrong, please try again or contact Administartor");
}
}
//4000 = 4 detik adalah waktu tampilnya gambar loading
setTimeout("fade()", 4000);
//]]>
</script>

4. Setelah itu copy code di bawah ini lagi lalu letakkan di atas ]]><

.b, .c {
    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: rgb(50,188,242);
background: -moz-radial-gradient(center, ellipse cover, rgba(50,188,242,1) 0%, rgba(68,153,244,1) 43%, rgba(0,71,226,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(50,188,242,1)), color-stop(43%,rgba(68,153,244,1)), color-stop(100%,rgba(0,71,226,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(50,188,242,1) 0%,rgba(68,153,244,1) 43%,rgba(0,71,226,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(50,188,242,1) 0%,rgba(68,153,244,1) 43%,rgba(0,71,226,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(50,188,242,1) 0%,rgba(68,153,244,1) 43%,rgba(0,71,226,1) 100%);
background: radial-gradient(ellipse at center, rgba(50,188,242,1) 0%,rgba(68,153,244,1) 43%,rgba(0,71,226,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32bcf2', endColorstr='#0047e2',GradientType=1 );    text-align: center
    }
#e {
    padding: 3px;
    background: #0F2435;
    display: inline-block;
    cursor: pointer;
    color: #EEE;
    font: bold 20px/20px Arial, sans-serif;
    vertical-align: middle;
    margin: 10px 0 0 0;
}

.b input {
    padding: 5px;
    border: none;
    margin: 10px 0 0 0;
    color: #000;
    width: 65%;
    vertical-align: middle;
}

.b input:focus {
    outline: none
    }

.b .g {
    position: absolute;
    width: 250px;
    height: 50px;
    left: 50%;
    top: 75%;
    margin: -50px 0 0 -125px
    }

.c {
    background: #111 url("URL-gambar-loading-anda") no-repeat center 90%
    }

.foto {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 5px solid #F0F0F0;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    margin: -55px 0 0 -55px;
    left: 50%;
    top: 40%;
    background: #000 url("logo-windows.png") 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
    }

5. Setelah itu , letakkan code di bawah ini diatas
atau

  <div id='b' class='b'> <div class='foto'></div> <div class='g'><p class='f'>Alamat Blog Orang ganteng apa ?</p><input id='d' type='password'></input><a id='e' onclick='cek()'>&#10152;</a></div> </div> <div id='c' class='c'></div>
 

Demikian Ulasan saya tentang Cara Membuat Login Form di Blog dengan Mudah semoga bermanfaat bagi anda semua.