×

search by faronesia.com

FARONESIA
Profesional and Specialist WebDesign by Faronesia

Selain tutorial, kami juga menyediakan layanan penambah follower untuk akun Instagram dan Tiktok anda dengan harga terjangkau. Ayo buruan order sekarang juga!!!

Layanan Media

Cara membuat halaman login pada blog

Faronesia.com - Hai sahabat faronesia, pastinya sudah tidak asing lagi dong dengan halaman login pada suatu website? Yups, anda dapat menemukan berbagai situs yang memiliki halaman login diberbagai website belahan dunia. Namun, tidak semua website atau blog memiliki bahkan tidak bisa dibubuhkan halaman login karena menyesuaikan kebutuhan situs saja contohnya seperti platform blogspot.

Eits, jangan putus asa dahulu, anda masih bisa kok menerapkan halaman login namun caranya sedikit berbeda dari blog maupun website yang menggunakan self hosting. Anda akan saya pandu dari awal hingga akhir dalam menerapkan halaman login pada blog.

Tutorial membuat halaman login pada blog ini memuat script yang nantinya harus anda upload pada layanan github.com dan statically.io terlebih dahulu. Tentunya anda harus mengetahui terlebih dahulu layanan github.com dan  statically.io agar anda nantinya tidak bingung.

Github.com dan fungsinya

Github merupakan sebuah aplikasi berbasis website yang memberikan layanan berupa penyimpanan repository (tempat untuk menyimpan file-file berupa source code) secara gratis. GitHub sudah populer dan sudah banyak pula yang telah menggunakan hosting ini seperti didunia web dan blog, karena kelebihan kecepatan server dari MxDCN dan sangat cocok untuk hostin file blog dan website seperti HTML, Javascirpt dan CSS blog blogger dan wordpress.

Statically.io dan fungsinya

Statically merupakan sebuah layanan CDN gratis untuk repositori Git, WordPress, gambar, dan lainnya. CDN gratis ini yang nantinya akan merepostory file script dari github tadi. Masih belum paham? Ok baiklah, jadi singkatnya seperti ini jika dalam konteks tutorial ini, Statically berfungsi merewrite kode HTML login Blogger serta direct utama untuk Client ID Google.

Baiklah, pada kesempatan kali ini saya akan memberikan tips dan tutorial membuat halaman login pada blog secara gratis dan work 100% pastinya. Pada tutorial kali ini saya menggunakan template viomagz versi 2.7 sebagai bahan percobaan. Bersabarlah karena tutorial ini sedikit lebih panjang dari tutorial biasanya.
Sebelum mempraktekkannya, saya harap anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang tidak anda inginkan seperti kode tidak cocok, salah menempatkan kode, lupa menempatkan kode, template error, atau bahkan template rusak maka anda masih memiliki cadangannya.

Cara Upload File di Github.com

  • Salin kode dibawah ini ke notepad dan simpang dengan format html. Contoh: cPanel.html
<!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='953780238767-l5jlcvvmiafnm93scs5vs2trohr2qt4k.apps.googleusercontent.com' name='google-signin-client_id'/>
<title>Login CPanel</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:#fff;color:#555555;text-transform:uppercase;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{background:#fff;border:1px solid #ccc;border-color:rgba(0,0,0,.2);color:#000;-webkit-box-shadow:0 2px 10px rgba(0,0,0,.2);box-shadow:0 2px 10px rgba(0,0,0,.2);outline:0;overflow:hidden;-webkit-border-radius:2px;border-radius:2px;padding:10px;margin:10px auto 0;width:350px;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 auto 40px}
.login_box{}
.log_in{width:100%;}
.log_in .tombol_close{color:#efefef;position:absolute;top:10px;right:10px;font-family:Arial;font-size:40px;font-weight:lighter;width:20px;height:20px;line-height:20px;text-align:center;text-decoration:none;}

@media screen and (max-width:414px){
.log_in .profile{width:90%;-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;}
}
@media screen and (max-width:320px){
.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;margin:50px auto 0">
<!--<img alt="Logo" class="logo" width="50" height="50" src="data:image/png;base64,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" />-->
<h3>Login to CPanel</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="https://jual-belionlineku.blogspot.com/" 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.faronesia.com/logout?d=https://draft.blogger.com/logout-redirect.g?blogID%3D9181714313239666031" target="_blank" rel="noopener" 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=9181714313239666031" target="_blank">Dashboard</a> <a class="btn btn-info btn-xs" href="https://draft.blogger.com/blogger.g?blogID=9181714313239666031#editor" target="_blank">New Post</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>
  • Ubah ID yang ditandai dengan warna kuning dengan ID blog anda
  • Silahkan menuju laman github.com
  • Silahkan sign in terlebih dahulu / jika belum memiliki akun maka klik sign up
  • Buat repository baru di laman github
  • Isikan kolom sesuai keinginan anda, atau anda bisa mengikuti contoh gambar dibawah ini.
  • Upload files kemudian pilih Choose Files, cari file yang sudah Anda buat tadi cPanel.html
  • Sampai disini file cPanel.html Anda sudah berhasil di upload

Cara Rewrite File Github ke Statically.io

Agar anda dapat menampilkan hasil script yang sudah Anda upload di Github perlu layanan CDN. Karena client ID google mengarah ke CDN statically maka harus menggunakan layanan rewrite ke statically.io agar menu login blogger bekerja dengan baik. Untuk caranya anda bisa mengikuti langkah-langkahnya dibawah ini:
  • Silahkan masuk Github kembali
  • kemudian menuju menu file yang sudah Anda upload sebelumnya.
  • klik kanan pada tulisan cPanel.html dan pilih copy link address
  • Lalu masuk layanan statically.io
  • pastekan hasil link file dari Github pada kolom
  • Nanti secara otomatis dibawahnya akan ada link baru
  • Silahakan salin link tersebut
  • Sampai disini hampir selesai

Cara menerapkan ke halaman blogger

  • Masuk ke dashboard blog 
  • Lalu masuk ke menu halaman blog
  • Kemudian buatlah halaman baru
  • Buatlah nama halaman tersebut sesuai keinginan anda (contoh: login, dashboard dll)
  • Silahkan masuk ke mode HTML
  • Tempelkan script berikut dibawah ini
<iframe height="1000" src="https://cdn.statically.io/gh/faronesia/login/1ea9c9ec/cPanel.html" width="100%"></iframe>
  • Pada teks link yang berwarna kuning silahkan ganti dengan link yang anda dapatkan dari statically.io sebelumnya
  • Kemudian simpan halaman tersebut

Cara memasang link halaman login ke nav menu viomagz

Mungkin anda sudah tidak perlu lagi tutorial memasang link halaman login ke menu navbar viomagz karena saya yakin 100% pembaca setia faronesia sudah paham betul mengenai tutorial ini.

Request tutorial lain?silahkan masuk ke halaman Tanggapan


Demikianlah mengenai Cara membuat halaman login pada blog semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.com.

Posting Komentar

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Modifikasi Tampilan Website Anda

Gunakan jasa kami, berikan kesan bahwa website anda professional.

Pesan Sekarang
Notifikasi pengguna

Aktifkan javascript dibrowser anda agar mendapatkan fitur jelajah yang lebih baik di situs kami.

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesia, caranya cukup dengan menekan tombol dibawah ini.

Tutup