Membuat Tombol Login Di Blog Dengan Google Sign-in

Ditulis oleh: Adhy Suryadi
Ditulis pada: 2/13/2017

Banyak yang mengatakan bahwa membuat tombol login di blogspot adalah mustahil karena bukan web seperti wordpress.org. Blogger sendiri tidak memiliki akses ke hostingnya. Tapi saya penasaran 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, sebenarnya telah kita ketahui bahwa Google memberlakukan one for all sign-in yang artinya hanya perlu sekali login di Google dan kita bisa masuk ke hampir semua web Google termasuk Blogger.

Jadi dengan tombol login di blog maka kita bisa masuk ke akun Google dari blog, kemudian bisa masuk ke dashboard Blogger maupun langsung menulis postingan di editor post Blogger.

DEMO

Silahkan coba tombol login di blog demonya di pojok kanan atas. Dan jika Anda adalah 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 kode </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 kode login blog di halaman static ini agar kodenya tidak menambah loading blog secara keseluruhan, jadi hanya ketika halaman tersebut diakses saja.

Nah silahkan simpan kode 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="Logo" class="logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv1FjLlhhWJUC6ID93hxVVl5SWz1ZG2-ttq5PRoYwXC29Lm681_BAftGrcRuo92zYc7vjuuLi8k0TXGlg2VE6BZHmUxjwAPWdqJK_HZLTh8O2rB6v0PdOX0pB6CpUzgfc_JSvqLSAZdM0/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="Homepage">×</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 kode JS yang saya tandai sudah ada di blog Anda, silahkan hapus kode 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 kode meta ini di bawah <head>


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

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

Langkah Keempat

Jika blog Anda menyembunyikan CSS reset Blogger, silahkan cari kode seperti di gambar di bawah ini dan simpan di bawah kode 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 kode di bawah ini pada menu 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 dibuat pada langkah kedua tadi.

Langkah Keenam

Silahkan simpan kode 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 kode 5530183827060067504 dengan ID blog Anda.

Selesai.....

Jika Anda kreatif, Anda bisa membuatnya seperti Google (coba klik foto kita di pojok kanan atas di setiap akun Google kita, misal di dashboard blog), namun kode 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/

Membuat Tombol Login Di Blog Dengan Google Sign-in

Ditulis oleh: Adhy Suryadi Ditulis pada: 2/13/2017