Membuat Tombol Login Di Blog Dengan Google Sign-In

Banyak yang menyampaikan bahwa menciptakan tombol login di blogspot ialah tidak mungkin sebab bukan web menyerupai wordpress.org. Blogger sendiri tidak mempunyai jalan masuk ke hostingnya. Tapi saya ingin tau dengan navbar blogger yang menampilkan tombol login, jadi saya terus mencoba mencari cara untuk menampilkan tombol login di Blogger.

Seperti yang saya katakan di postingan sebelumnya, bekerjsama telah kita ketahui bahwa Google memberlakukan one for all sign-in yang artinya hanya perlu sekali login di Google dan kita sanggup masuk ke hampir semua web Google termasuk Blogger.

Makara dengan tombol login di blog maka kita sanggup masuk ke akun Google dari blog, lalu sanggup masuk ke dashboard Blogger maupun eksklusif menulis postingan di editor post Blogger.

DEMO

Silahkan coba tombol login di blog demonya di pojok kanan atas. Dan kalau Anda ialah author blog maka tombol login tersebut berganti menjadi tombol sign out.

Bagaimana, Anda tertarik untuk mencobanya?

Silahkan ikuti langkah-langkahnya di bawah ini.

Langkah Pertama

Simpan CSS di bawah ini di atas isyarat </head>

 <style type='text/css'>
 #loginblog .btn-info{margin:0 0 0 20px;}
 .blog-admin a.btn-danger{margin: 0 0px 0 20px;z-index: 2;position: absolute;top: 4px;right: 0;}
 .post #innerlogin,.blog-admin{display:none}
 #innerlogin{display:inline-block;}
 a.btn-danger,a.btn-info,a.btn-primary,a.btn-success,a.btn-warning{color:#fff!important}
 .btn,.btn:active{background-image:none}
 .btn{font-weight:400}
 .btn{display:inline-block;padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;border-radius:4px}
 .btn:active:focus,.btn:focus{outline:0}
 .btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
 .btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
 .btn-info{color:#fff!important;background-color:#5bc0de;border-color:#46b8da}
 .btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}
 .btn-info:active,.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}
 .btn-danger{color:#fff!important;background-color:#d9534f;border-color:#d43f3a}
 .btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}
 .btn-danger:active,.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}
 .btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
 #gSignIn,#gSignIn&gt;div{margin:0 auto}
 #gSignIn{width:100%}
 .log_in .profile{border:3px solid #B7B7B7;padding:10px;margin:10px auto 0;width:350px;background-color:#F7F7F7;height:auto;text-align:left}
 .log_in .profile p{margin:0}
 .log_in .profile p.button_login{margin:10px 0 0}
 .log_in .head{margin-bottom:10px}
 .log_in .head a{float:right}
 .log_in .profile img{width:100px;float:left;margin:0 10px 10px 0}
 .log_in .proDetails{float:left}
 .log_in h3{margin:0}
 .login_box{position: fixed; top:0; left:0; bottom:0; right:0; background:rgba(0,0,0,.8);z-index:99999}
 .log_in{width:50%;background:#fff;border-radius:5px;padding:20px;border:1px solid transparent; color:#333; position: absolute; top: 10%; left: 50%;margin-left:-25%;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
 .log_in .tombol_close{color:#555;position:absolute;top:10px;right:10px;font-family:Arial;font-size:30px;font-weight:bold;width:20px;height:20px;line-height:20px;text-align:center;}
 
 @media screen and (max-width:960px){
 .log_in{width:80%;margin-left:-40%;}
 }
 @media screen and (max-width:414px){
 .log_in .profile{width:100%;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
 .log_in .proDetails{font-size:12px!important;line-height:1.1}
 .log_in .profile img{width:60px;}
 }
 @media screen and (max-width:375px){
 .abcRioButton{width:100%!important;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
 .abcRioButtonContents{font-size:14px!important}
 .log_in .profile img{width:40px;}
 .log_in{padding:10px;}
 }
 @media screen and (max-width:320px){
 .log_in img.logo{width:100%;height:auto;}
 .log_in .proDetails{font-size:10px!important;line-height:1.1}
 }
 </style>

Langkah Kedua

Silahkan buat halaman static untuk login blog. Kita menyimpan isyarat login blog di halaman static ini semoga kodenya tidak menambah loading blog secara keseluruhan, jadi hanya saat halaman tersebut diakses saja.

Nah silahkan simpan isyarat di bawah ini di halaman static tersebut di mode HTML.

 <div class="login_box">
 <div class="log_in">
 <div style="text-align: center;">
 <img alt="Membuat Tombol Login Di Blog Dengan Google Sign Membuat Tombol Login Di Blog Dengan Google Sign-in" class="logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZWL7AoSCRj9oICVzqM8LQZbqWphwECxEtZcyODm1sFHgORASRKNhtY3zgDDsBSv1L26mnsmZV-hcHWDTK_93FeSUc11OwgEblvIugF1E19NKuYeP6ANRQA-3fjmvADJKmyx7lAfICZxI/s212/kompimales6.png" />
   <br />
 <h3>
 Login Author Blog</h3>
 <br />
 <!-- HTML for render Google Sign-In button -->
                 <br />
 <div id="gSignIn">
 </div>
 <!-- HTML for displaying user details -->
                 <br />
 <div class="userContent">
 </div>
 </div>
 <a class="tombol_close" href="/" title="Membuat Tombol Login Di Blog Dengan Google Sign-in">×</a>
 </div>
 </div>
 <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'></script>
 <script async="" defer="" src="https://apis.google.com/js/platform.js"></script>
 <script async="" defer="" src="https://apis.google.com/js/client:platform.js?onload=renderButton"></script>
 <script>
 //<![CDATA[
  function onSuccess(googleUser) {
     var profile = googleUser.getBasicProfile();
     gapi.client.load('plus', 'v1', function () {
         var request = gapi.client.plus.people.get({
             'userId': 'me'
         });
         //Display the user details
         request.execute(function (resp) {
             var profileHTML = '<div class="profile"><div class="head">Welcome '+resp.name.givenName+'! <a class="btn btn-danger btn-xs" href="https://kompimalesv6.blogspot.com/logout?d=https://draft.blogger.com/logout-redirect.g?blogID%3D5530183827060067504" onclick="signOut();">Sign out</a></div>';
             profileHTML += '<img src="'+resp.image.url+'"/><div class="proDetails"><p>Name: '+resp.displayName+'</p><p>Email: '+resp.emails[0].value+'</p><p>Gender: '+resp.gender+'</p><p class="button_login"><a class="btn btn-info btn-xs" href="https://draft.blogger.com/blogger.g?blogID=5530183827060067504" target="_blank">Dashboard</a> <a class="btn btn-info btn-xs" href="https://draft.blogger.com/blogger.g?blogID=5530183827060067504#editor" target="_blank">New Post</a><br/><a class="btn btn-info btn-xs" href="'+resp.url+'">View Google+ Profile</a></p></div><div class="clear"></div></div>';
             $('.userContent').html(profileHTML);
             $('#gSignIn').slideUp('slow');
         });
     });
 }
 function onFailure(error) {
     alert(error);
 }
 function renderButton() {
     gapi.signin2.render('gSignIn', {
         'scope': 'profile email',
         'width': 240,
         'height': 50,
         'longtitle': true,
         'theme': 'dark',
         'onsuccess': onSuccess,
         'onfailure': onFailure
     });
 }
 function signOut() {
     var auth2 = gapi.auth2.getAuthInstance();
     auth2.signOut().then(function () {
         $('.userContent').html('');
         $('#gSignIn').slideDown('slow');
     });
 }
 //]]>
 </script>

Jika isyarat JS yang saya tandai sudah ada di blog Anda, silahkan hapus isyarat yang saya tandai itu. Kode 5530183827060067504 (ada 3) silahkan ganti dengan ID blog Anda, dan ganti juga url blognya. Kemudian logonya silahkan ganti dengan logo blog Anda.

Langkah Ketiga

Silahkan simpan isyarat meta ini di bawah <head>

 <meta content='xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com' name='google-signin-client_id'/>

Kode xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com silahkan ganti dengan isyarat Client ID Google API Console blog Anda. Untuk mendapat isyarat Client ID Google API Console silahkan simak postingan ini.

Langkah Keempat

Jika blog Anda menyembunyikan CSS reset Blogger, silahkan cari isyarat menyerupai di gambar di bawah ini dan simpan di bawah isyarat meta langkah ketiga tadi. Jika blog Anda tidak menyembunyikan CSS reset Blogger maka langkah ini tidak perlu Anda lakukan.

Klik DI SINI untuk melihat gambar besarnya.

Langkah Kelima

Silahkan simpan isyarat di bawah ini pada hidangan navbar blog Anda.

 <span id='loginblog'>
 <a class='btn btn-info btn-xs' href='https://kompimalesv6.blogspot.co.id/p/login-blog.html' id='btn-info' title='Login Admin'>Login</a>
   </span>

Silahkan ganti URL-nya dengan URL halaman login yang dibentuk pada langkah kedua tadi.

Langkah Keenam

Silahkan simpan isyarat di bawah ini di atas kode </article>

 <span id='innerlogin'>
   <span expr:class='&quot;loginmenu &quot; + data:post.adminClass'>
 <a class='btn btn-danger btn-xs' href='https://kompimalesv6.blogspot.com/logout?d=https://draft.blogger.com/logout-redirect.g?blogID%3D5530183827060067504' onclick='signOut();'>Sign out</a>
 <script>
 //<![CDATA[
 $("#innerlogin").prependTo("#loginblog");
 //]]>
 </script>
   </span>
      </span>

Silahkan ganti isyarat 5530183827060067504 dengan ID blog Anda.

Selesai.....

Jika Anda kreatif, Anda sanggup membuatnya menyerupai Google (coba klik foto kita di pojok kanan atas di setiap akun Google kita, misal di dashboard blog), namun isyarat untuk halaman statis-nya (langkah kedua) harus disimpan di edit HTML.

Referensi:
http://www.codexworld.com/login-with-google-account-using-javascript/
https://developers.google.com/identity/sign-in/web/

Sumber https://www.kompiajaib.com/

Share this post