Cara Membuat Tombol logout dan login di blogger

Secara tak sengaja setelah saya telusuri google saya menemukan tutorial ini Di tempatnya Mas  "Adhy Suryadi" dia yang mempunyai blog Kompiajaib.com sekalian pembikin script ini. saya cukup suka dengan sccript Tombol Logout dan Login di Blogger satu ini karena memiliki kelebihan dengan CSS jadi cukup keren.

Dan tombol   logout dan login di blogger cukup bermanfaat bagi saya karena jalan pintas tercepat untuk masuk ke akun blogger agan jadi gak usah menuju blogger lagi. tombol  logout dan login di blogger di lengkapi dengan backgroud trasfarant dan kotak pop up semacam dialog box yang metutupi blog,  tombol yang satu ini cukup sederhana karena hanya menggunakan CSS yang linknya menuju langsung ke halaman login blogger anda bisa melihat ganbar giift di abwah atau demonya.
 

 

 DEMO Melalui JSFIDDLE

Dan jika anda berminat mau memasang scrip ini bisa ambil script 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}

Untuk mengatur posisi admind dan tampilan cari CSS yang bertulisan #adminblog

Silahkan atur Kode TOP pada Kode Css #loginbox misalkan tombol login anda terlalu kebawah atau terlalu masuk ke from.

Kode HTML
Simpan kode di bawah ini di atas

<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&continue=https://www.blogger.com/home&followup=https://www.blogger.com/home" method="post" target="_blank" onsubmit="onlogin()">
    <input class="email" value="Username" name="Email" onblur='if (this.value == "") {this.value = "Username";}' onfocus='if (this.value == "Username") {this.value = "";}' 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 dan semoga sukses ^_^ Thank tutorial : kompiajaib.com