Membuat Tombol Login Dan Logout Blogger Di Blog

Berawal dari melihat sebuah blog yang memakai tombol Dashboard dengan memakai link home Blogger untuk menuju dashboard blog dan sekaligus untuk login atau logout, kemudian saya coba berpikir lain yaitu menciptakan tombol login dan atau tombol logout lain yang memakai pribadi link login dan logout akun Google yang mengarah ke halaman Blogger.

Sedikit memakai fungsi onclick dan form sederhana untuk tombolnya, saya mencoba menciptakan tombol login dan logout ini menjadi sebuah popup semacam obrolan box dengan background transparant yang menutupi blog. Tombol ini sangat sederhana alasannya ialah hanya memakai CSS dengan memakai link yang menuju ke halaman login akun Google yang mengarah ke halaman home Blogger atau Dashboar Blog menyerupai gambar gif di bawah ini atau silahkan coba link demonya.

DEMO ON JSFIDDLE

Jika tertarik untuk mencoba tombol login dan logout Blogger ini silahkan gunakan kode-kode di bawah ini.

Kode CSS

 #adminblog{background: #F4836A;color: #fff!important;width:60px;border:none;font-size: 14px;font-family:Arial;cursor:pointer;text-align:center;border:1px solid #e66f55;border-radius: 2px;padding:5px 0;position:absolute;top:10px;left:10px;transition:all .4s ease-in-out;}
 
 #layoutlogin{background:#000;opacity:.7;position:absolute;top:0;left:0;right:0;bottom:0;z-index:99999;display:none}
 #login{position:absolute;width:222px;height:auto;top:30%;left:50%;margin-left:-111px;font-family:Arial;z-index:100000;display:none}
 #loginbox{background:#fff;width:200px;padding:10px;display:none;position:absolute;top:62px;left:0;border:1px solid #ddd;border-radius: 2px;z-index:1;overflow:hidden;}
 #loginbox .emaillogin input.email {color: #777;padding: 10px;font-size: 14px;font-family:Arial;width:89%;border:1px solid #ddd;border-radius: 2px;}
 #loginbox .emaillogin input:focus {outline: none;}
 #loginbox .emaillogin input.signin-btn{background: #F4836A;color: #fff!important;border:none;outline: none;width:100%;font-size: 14px;font-family:Arial;cursor:pointer;border-radius: 2px;margin-top: 10px;padding: 11px;}
 #login1,#login2{color: #777;padding:5px 10px;font-size: 14px;font-family:Arial;width:38%;display:none;text-align:center;background:#fff;border:1px solid #ddd;border-radius: 2px;position:absolute;top:38px;left:0px;cursor:pointer;transition:all .4s ease-in-out;}
 #login2{border-bottom:none;z-index:2}
 #Admin1,#Admin2{color: #777;padding:5px 0;font-size: 14px;font-family:Arial;width:100%;text-align:center;background:#fff;border:1px solid #ddd;border-radius: 2px;position:absolute;top:0px;left:0px;cursor:pointer;transition:all .4s ease-in-out;}
 .logout{background: #F4836A;color: #fff!important;width:38%;font-size: 14px;font-family:Arial;cursor:pointer;text-align:center;border:1px solid #e66f55;border-radius: 2px;padding:5px 10px;position:absolute;top:38px;right:-1px;transition:all .4s ease-in-out;}
 a.logout{text-decoration:none}
 #Admin1:hover,#login1:hover{background:#eee}
 .logout:hover,#adminblog:hover{background:#d56148}

Kode #adminblog ialah arahan CSS untuk mengatur tampilan dan posisi tombol Admin.

Jika tombol Login terlalu ke bawah atau terlalu masuk ke Form, silahkan atur atau tambahkan angkanya pada arahan top pada arahan CSS #loginbox

Kode HTML

Silahkan simpan di atas arahan </body>

 <div id="adminblog" onclick="document.getElementById('login').style.display='block';layoutlogin.style.display='block';adminblog.style.display='none';">Admin</div>
 
 <div id='login'>
 <div id="Admin1" onclick="document.getElementById('login1').style.display='inline';logoutbox.style.display='inline';Admin1.style.display='none';Admin2.style.display='inline';">Silahkan Pilih</div>
 <div id="Admin2" style="display:none" onclick="document.getElementById('login1').style.display='none';logoutbox.style.display='none';Admin1.style.display='inline';Admin2.style.display='none';">Silahkan Pilih</div>
 <div id='login1' onclick="document.getElementById('loginbox').style.display='block';login1.style.display='none';login2.style.display='inline';logoutbox.style.display='none';">Login</div>
 <div id='login2' style="display:none" onclick="document.getElementById('loginbox').style.display='none';login1.style.display='inline';login2.style.display='none';logoutbox.style.display='inline';">Login</div>
 <div id='loginbox'>
 <div class='emaillogin'>
 <form action="https://accounts.google.com/ServiceLogin?service=blogger&amp;continue=https://www.blogger.com/home&amp;followup=https://www.blogger.com/home" method="post" target="_blank" onsubmit="onlogin()">
     <input class="email" value="Username" name="Email" onblur='if (this.value == &quot;&quot;) {this.value = &quot;Username&quot;;}' onfocus='if (this.value == &quot;Username&quot;) {this.value = &quot;&quot;;}' type="text" />
       <input class="signin-btn" value="Sign In" name="submit" type="submit" onclick="document.getElementById('login').style.display='none';layoutlogin.style.display='none';adminblog.style.display='block';"/>
     </form>
    </div>
   </div>  
     <div id='logoutbox' style="display:none">
 <a class='logout' href="https://accounts.google.com/Logout?service=blogger" target="_blank" onclick="document.getElementById('login').style.display='none';layoutlogin.style.display='none';adminblog.style.display='block';">Logout
    </a>
   </div>
     </div>
 <div style="clear:both"></div>
 <div id="layoutlogin"></div>

Selamat mencoba....

Sumber https://www.kompiajaib.com/

Share this post