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

PENTING :

Terimakasih sudah berkunjung dan membaca artikel mengenai Cara Membuat Tombol logout dan login di blogger , jika ingin menyebar luaskan artikel ini Atau anda ingin mencopas artikel saya  di mohon untuk mencantumkan Link Sumbernya, Terima Kasih Atas partisipasi anda sampai berjumpa di artikel/postingan yang selanjutnya.  

Dan penutup saya ucapkan wasalamualaikum Wr.Wb 

Share on Facebook Share on Twitter Share on Google Plus

About DNI ArT SEO

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.