Cara Membuat Tombol Login Dengan Google Sign-in Di Blog




Cara Membuat Tombol Login  Dengan Google Sign-in Di Blog
Cara Membuat Tombol Login  Dengan Google Sign-in Di Blog: Membuat tombol login di blogspot adalah Rasa nya tidak mungkin karena bukan web seperti wordpress.org. Blogger sendiri tidak mempunyai akses ke hostingnya. Namun saya penasaran dengan navbar blogger yang menampilkan tombol login, jadi saya ingin mencoba mencari tau cara untuk menampilkan tombol login pada Blogger.
Seperti yang saya katakan di postingan sebelumnya, ini sebenarnya kita sudah mengetahui 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.

Nah Jadi dengan tombol login ini di blog maka anda bisa masuk ke akun Google dari blog, selanjutnya anda bisa masuk ke dashboard Blogger maupun langsung menulis postingan di editor post Blogger. 

Dan silahkan anda coba tombol login di blog demonya di pojok kanan atas. maka apabila Anda adalah author blog, pastinya tombol login tersebut akan berganti menjadi tombol sign out.

Hemm jika anda memang tertarik untuk mencoba tombol sign in google tersebut. silahkan anda ikuti langkah-langkah penjelasan di bawah ini.

Tombol Login  Dengan Google Sign-in Di Blog

1. Pertama , pastikan anda sudah masuk pada dasbhor anda sendiri
2. Kemudian masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Temukan kode dan 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>
4. Silahkan terlebih dahulu anda buat halaman static untuk login pada blog anda. Kita menyimpan kode login blog di halaman static ini agar kodenya tidak menambah loading blog secara keseluruhan, jadi hanya ketika halaman tersebut diakses saja.
5. Selanjutnya silahkan anda 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://2.bp.blogspot.com/-ktc6J2yugU8/WJAh_2G3r3I/AAAAAAAApUs/KTDlxOYaWkAohxisZqHAjVhzywFpmsOlQCLcB/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://mizipedia.com/logout?d=https://draft.blogger.com/logout-redirect.g?blogID%3D34553866575656667" 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=34553866575656667" target="_blank">Dashboard</a> <a class="btn btn-info btn-xs" href="https://draft.blogger.com/blogger.g?blogID=34553866575656667#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>
6. Apabila kode JS yang saya tandai bewarna hijau sudah ada pada blog Anda, maka silahkan anda hapus kode yang saya tandai itu. Nah untuk Kode 34553866575656667 ada 3 silahkan anda ganti dengan ID blog Anda, dan ganti juga url blognya https://mizipedia.com/. Selanjutnya untuk logonya silahkan anda ganti dengan logo blog Anda.

7. Silahkan simpan kode meta ini di bawah <head>
<meta content='xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com' name='google-signin-client_id'/>
Untuk kodexxxxxxxxxxxxxxxxxx.apps.googleusercontent.com silahkan anda ganti juga dengan kode Client ID Google API Console blog Anda. Untuk mendapatkan kode Client ID Google API Console anda bisa baca Cara mendapatkan clien Id Google Api Conse.

8. Nah apabila blog Anda menyembunyikan CSS reset Blogger, silahkan anda cari kode seperti pada gambar di bawah ini dan simpan di bawah kode meta pada no langkah no Tujuh di bawah <head>  tadi. Jika blog Anda tidak menyembunyikan CSS reset Blogger maka langkah ini tidak perlu Anda lakukan.
CSS reset Blogger
10. Jika gambar di atas kurang jelas maka anda bisa Klik Dsini untuk melihat gambar besarnya.
11. Selanjutnya silahkan anda simpan kode di bawah ini pada menu navbar blog Anda.
<span id='loginblog'>
<a class='btn btn-info btn-xs' href='https://mizipedia.com/p/login-blog.html' id='btn-info' title='Login Admin'>Login</a>
  </span>
12. Silahkan anda ganti URL-nya dengan URL halaman login yang dibuat pada langkah Lima tadi.
13. Dan selanjutnya silahkan anda 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://mizipedia.com/logout?d=https://draft.blogger.com/logout-redirect.g?blogID%3D34553866575656667' onclick='signOut();'>Sign out</a>
<script>
//<![CDATA[
$("#innerlogin").prependTo("#loginblog");
//]]>
</script>
  </span>
     </span>
14. Sampai tahap ini anda hampir selesai, jangan lupa anda ganti kode 34553866575656667 dengan ID blog Anda.
15. Jika sudah anda ikuti langkah-langkah seperti penjelasan di atas, langsung saja anda klik SAVE TEMPLATE. Dan lihat hasilnya.


Untuk kode halaman statis-nya (langkah no Lima) harus anda simpan di edit HTML. Demikian penjelasan pada pagi ini, semoga bisa membantu anda. selamat mencoba dan semoga berhasil. Salam sukses bro.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.

Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>

+ Follow
Join on this site

with Google Friend Connect