Cara Membuat Tombol Login Blogger di Blog Non AMP dan AMP
www.azid45.web.id - Cara Membuat Tombol Login Blog Di Situs Sendiri Tanpa Menuju www.blogger.com. Assalamualaikum.wr.wb, Alhamdulillah dari sekian lama salah satu cita-cita saya akhirnya tercapai yaitu bisa login blog di situs saya sendiri tanpa menuju www.blogger.com terlebih dahulu. Dengan membuat login tersebut, tentunya menjadikan blog kita lebih profesional dan memudahkan kita saat melihat blog kita sendiri kemudian ada yang salah maka kita bisa langsung login langsung tanpa menuju Url lain.
Mengapa blog kita lebih profesional? tentunya kita tahu web hosting, dimana pasa setiap hosting pribadi seperti dari selft wordpress pasti disediakan plugin login di setiap websitenya, dengan hal itu dapat mempermudah kita saat login tanpa menuju Url penyedia hosting. Hal ini tentunya berbeda jauh dengan blogger, karena ketika kita menggunakan blogger selain kita terbatas dalam segala hal kita juga tidak bisa langsung login di situs web kita namun harus menuju blogger.com. Selama ini yang kita lakukan bukan?, lantas apakah bisa kita membuat login seperti selft hosting wordpress?. Alhamdulillah setidaknya pada awal tahun 2017 kang Adhy Suryadi sudah membuat tutorial tersebut, jadi saya pribadi telalu jauh mengetahuinya. Tutorial tersebut diterapkan oleh kang Adhy Suryadi www.kompiajaib.com pada templatenya yang kompi males V6.
Dari tutorial ini, saya akan membagikan ulang yang tentunya saya modif ulang agar tidak sama persis dengan tutorial yang sudah pernah di share oleh kang Adhy Suryadi. Sebelum membuat tombol menu login ini hal utama yang perlu kalian lakukan adalah membuat Client ID Google Sign-in untuk mendapatkan Client ID-nya. Caranya bisa kalian klik ini Cara Mendapatkan Client ID Google API.
Langkah Pertama
Setelah mendapatkan Client ID Google, kita langsung menuju menu template - Edit HTML, letakkan kode berikut tepat dibawah <head>
<meta content='xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com' name='google-signin-client_id'/>
Dan letakkan kode berikut ini diatas kode </head> atau jika sudah ada kode </style> maka letakkan diatas kode tersebut dan hapus <style> dan </style> nya;
<style>.buttonx {display:inline-flex;cursor:pointer;background:#2d82ea;color:#fff!important;font-weight:500;font-size:14px;padding:8px 20px;display:inline-block;border-radius:5px;margin:20px 5px;box-shadow:0 1px 6px rgba(32,33,36,.28);text-transform:uppercase}.buttonx:active{opacity:.8;box-shadow:0 2px 10px 0 rgba(0,0,0,0.16),0 2px 15px 0 rgba(0,0,0,0.12)} a.js-load:hover, .buttonx:hover{opacity:0.6} #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>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>
Keterangan: xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com ganti dengan Client ID Google yang sudah kalian dapatkan. Dan untuk kode #2d82ea adalah warna background, bisa kalian ganti warna tersebut sesuai keinginan kalian.
Langkah selanjutnya adalah letakkan kode berikut tepat diatas kode </article>
<span id='innerlogin'>
<span expr:class='"loginmenu " + data:post.adminClass'>
<a class='btn btn-danger btn-xs' href='https://www.domainanda.com/logout?d=https://draft.blogger.com/logout-redirect.g?blogID%3Dxxxxxxxxxxxxxxx' onclick='signOut();'>Sign out</a>
<a class='btn btn-danger btn-xs' href='https://www.blogger.com' onclick='signOut();'>Click To CPanel</a>
<script>
//<![CDATA[
$("#innerlogin").prependTo("#loginblog");
//]]>
</script>
</span>
</span>
Keterangan: ganti xxxxxxxxxxxxxxx dengan ID Blog kalian, caranya cukup mudah tinggal lihat pada menu address blogger yang sudah login maka ada tulisan blogID=xxxxxxxxxx. Contoh blogID=4110298765504517079 dan rubahlah www.domainanda.com dengan domain blog kalian.
Setelah itu, Save Template. Langkah pertama sudah selesai.
Langkah Kedua
Kita menuju ke menu laman (Page Static) dan buatlah halaman baru (new page) beri nama terlebih dahulu seperti "login", setelah itu pilih HTML bukan Compose dan letakkan kode berikut;
<div class="login_box">
<div class="log_in">
<div style="text-align: center;">
<img alt="Logo" class="logo" src="URL Logo" />
<h3>
Login Author Blog</h3>
<!-- HTML for render Google Sign-In button -->
<div id="gSignIn">
</div>
<!-- HTML for displaying user details -->
<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://www.domainanda.com/logout?d=https://draft.blogger.com/logout-redirect.g?blogID%3Dxxxxxxxxxxxxxxx" onclick="signOut();">Sign Out</a></div>';
profileHTML += '<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=xxxxxxxxxx" target="_blank">Dashboard</a> <a class="btn btn-info btn-xs" href="https://draft.blogger.com/blogger.g?blogID=xxxxxxxxxxx#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>
KETERANGAN: Jika didalam template blog kalian sudah ada kode ini "<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>" maka bisa dihilangkan. Kemudian pada kode tersebut ada kata"Url Logo" bisa diganti url logo blog kalian, dan www.domainanda.com bisa diganti dengan domain blog kalian serta xxxxxxxxxx (ada 3) bisa diganti dengan denan Google ID blog kalian sebagaiaman pada langkah pertama.
langkah selanjutnya adalah, Save Template
Note: Jika sudah disimpan jangan sampai dirubah karena berakibat client google ID tidak aktif lagi kecuali copas kode diatas lagi secara keseluruhan.
Langkah Ketiga
Setelah langkah pertama dan kedua selesai, langkah selanjutnya adalah letakkan kode berikut sesuai keinginan kalian seperti di widget pada menu tata letak - HTML, pada menu navbar,pada menu navigasi atau pada footer blog.
<span id='loginblog'>
<a class='btn buttonx btn-xs' href='https://www.domainanda.com/p/login-blog.html' id='btn-info' title='Login Admin'>Login</a>
</span>
Keterangan: ganti www.domainanda.com/p/login.html dengan Url laman yang sudah kalian buat sebelumnya .
Setelah itu Save. Selesai
Untuk blog AMP kita butuh menyimpanan script secara eksternal karena template AMP tidak bisa menerima javascript. Salah satu solusi adalah kalian bisa upload script berikut ke GitHub, jika belum tahu caranya bisa menuju link disini (Cara Upload File GitHub)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/>
<meta content='xxxxxxxxxxxx-d9aju9t5tl354uo0sd399lkmr2u2kliu.apps.googleusercontent.com' name='google-signin-client_id'/>
<title>Title Blog</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,300i,500,500i,700,900' rel='stylesheet' type='text/css'/>
<style type='text/css'>
body{background:none;color:#efefef;font-family:Roboto,Arial,sans-serif;font-size:100%;text-align:left;margin:0}
a:link{text-decoration:none}
#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>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%;height:auto;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>
</head>
<body>
<div class="login_box">
<div class="log_in">
<div style="text-align: center;">
<img alt="Logo" class="logo" src="URL Logo" />
<h3>
Login Author Blog</h3>
<!-- HTML for render Google Sign-In button -->
<div id="gSignIn">
</div>
<!-- HTML for displaying user details -->
<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://www.domainanda.com/logout?d=https://draft.blogger.com/logout-redirect.g?blogID%3Dxxxxxxxxxxxxxxx" onclick="signOut();">Sign Out</a></div>';
profileHTML += '<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=xxxxxxxxxx" target="_blank">Dashboard</a> <a class="btn btn-info btn-xs" href="https://draft.blogger.com/blogger.g?blogID=xxxxxxxxxxx#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>
</body>
</html>
KETERANGAN: Pastikan saat membuat Client ID Google pada pilihan Authorized Javascript Origins silahkan tambahkan cdn.rawgit.com atau cdn.staticaly.com. Ganti Client ID, title blog, domainanda, xxxxxx sesuai dengan keterangan sebelumnya. Copas script diatas ke notepad atau notepad ++ dan save as dengan esktitensi html, seperti login.html dan save kemudian dapat diupload pada file GitHub.
Setelah di upload diGitHub maka langkah selanjutnya adalah kita copas ke situs pemanggil GitHub. Karena rawgit.com sudah tidak bisa dipakai maka kita bisa menggunakan layanan staticaly.com. Caranya klik kanan hasil upload file ke GitHub dalam bentuk html, klik kanan dan copy link kemudian masukkan pada kolom yang ada pada situs https://cdn.staticaly.com kemudian ada kolom lagi dibawahnya dan copas hasil link pemanggilnya, seperti; "https://cdn.staticaly.com/gh/Azidzainuri/linku/ac0ba85b/login-blog.html"
Langkah selanjutnya adalah menuju menu template - edit HTML dan letakkan kode berikut ini kedalam menu style AMP
.buttonx {display:inline-flex;cursor:pointer;background:#2d82ea;color:#fff!important;font-weight:500;font-size:14px;padding:8px 20px;display:inline-block;border-radius:5px;margin:20px 5px;box-shadow:0 1px 6px rgba(32,33,36,.28);text-transform:uppercase}.buttonx:active{opacity:.8;box-shadow:0 2px 10px 0 rgba(0,0,0,0.16),0 2px 15px 0 rgba(0,0,0,0.12)} a.js-load:hover, .buttonx:hover{opacity:0.6}
Kemudian Save
kemudian letakkan kode berikut sesuai keinginan kalian, baik di navbar, diwidget, maupun difooter untuk membuat tombol login-nya.
<a class="buttonx" href="link pemanggil github">Login</a>
Keterangan: ganti link pemanggil github dengan Url yang dicopas ke sataticaly.com tadi, akan menjadi seperti ini
<a class="buttonx" href="https://cdn.staticaly.com/gh/Azidzainuri/linku/ac0ba85b/login-blog.html">Login</a>
Kemudian, SAVE.
Demikianlah tutorial cara membuat tombol lgoin disitus sendiri tanpa menuju www.blogger.com. Semoga artikel tersebut bermanfaat, Amin.
UPDATE!Setelah saya mencoba di blog AMP, saat membuat Client ID pada alamat javascirpt harus memakai cdn.staticaly dan pada menu layar persetujuan isi staticaly.com untuk Url pengalihan dikosongi saja. Jika teman-teman terlanjur mengisi alamat javascript dengan nama domain teman-teman maka harus dihapus dan membuat ID Client Baru lagi. Karena jika di edit dan di ubah maka hasilnya tidak berefek dan tetap error tidak masuk layanan google/blogger.
Jika ingin terlihat lebih profesional dengan Url login dengan domain kita, kita bisa mengakalinya dengan iframe. Caranya tinggal menu halaman - new page - HTML kemudian copas kode berikut dan masukkan pada mode HTML
<amp-iframe noloading title="Login Azid Zainuri"
src="https://cdn.staticaly.com/gh/Azidzainuri/kode-azid/2134ba28/login.html/"
height="400"
layout="fixed-height"
frameborder="0"
sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups"><br />
<amp-img noloading src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi98Y-YzAVLvkETOTbAwMCI9HYI5JphmJOa1d9hBEsuZOvFfyBZmxyFcDUE-zsylVmWaz2GxltL0o6rXWBmgvQTKoivYIRhejyiqRCy-R6RrZ6EMvWS_R5xIKe721K17D74w8PVSvdctho/s1600/placeholder.png"
layout="fixed-height"
height="400"
width="auto"
placeholder><br />
</amp-img><br />
</amp-iframe>
Catatan: ganti nama login Azid Zainuri dengan nama blog teman-teman, dan ganti Url https://cdn.staticaly.com/gh/Azidzainuri/kode-azid/2134ba28/login.html dengan Url staticaly teman-teman.
Jika kode diatas ada yang salah, seperti bentuknya tidak sesuai maka bisa mendownloadnya dibawah ini. Selamat bereksperiment
Demo login Non AMP Demo Login AMP
Download Script login AMP Download Login Non AMP
PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
contact atau 089677337414 - Terima kasih.