Panduan mudah membuat fitur login/logout blogger untuk pemula

Bagi anda pengguna blogger untuk memulai kegiatan tulis menulis artikel pada blog, anda tentunya diwajibkan masuk kedalam akun blogger anda melalui halaman sign in google. Pada artikel kali ini saya akan mengulas sedikit tentang bagaimana cara membuat form login / logout bagi member blogspot.

Secara umum banyak cara untuk membuat form login, yaitu bisa dengan html, atau dengan php dan mysql secara session yang dipadukan pembuatannya dengan aplikasi dreamweaver, namun karena pembuatannya memerlukan keahlian khusus tak jarang kita akan menemukan masalah seperti script php logout yang tidak bisa di back.

Adapula dalam membuat form login menggunakan php tanpa database, namun kali ini saya akan berbagi membuat form login yang saya dapat dari buatan kang adhy suryadi

Buat Login Signup di Blogspot

Teknik yang digunakan adalah dengan menggunakan fungsi onclick dan form sederhana untuk tombolnya login dan logout yang nantinya menjadi sebuah popup semacam dialog box dengan background transparant yang menutupi blog. Sebelumnya lihat dulu live demonya disini.

Bagaimana, jika anda tertarik anda bisa menggunakan script dibawah 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 kode HTML nya, seperti dibawah ini :

<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>

CATATAN :

1. Tempatkan kode CSS pada bagian selector CSS, untuk blogger sebelum kode ]]></b:skin> atau </style>
2. Untuk Kode HTML letakan diatas kode </body>
3. Jika anda ingin merubah letak tombol Admin, silahkan ubah #adminblog pada kode CSS

Demikian Panduan membuat fitur login/logout blogger semoga bermanfaat.