Cara membuat menu user login diblogger

Hello sobat Icloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat menu user login di blogger, atau menu navigasi login di blogger

Info: Jika sobat sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

User Login

Apa itu menu user login? user login adalah fitur yang di gunakan oleh kebanyakan situs website untuk membuat pengguna bisa melakukan login ataupun registrasi pada sebuah website entah itu secara manual yakni mengisi informasi data, atau melalui pihak lainnya seperti google dan facebook

Pengguna Blogger

Khusus bagi pengguna blogger fitur user login atau pengguna login ini adalah source kode custom yang berasal dari CSS, HTML, dan juga JavaScript yang di tambahkan, bukan dari fitur khusus yang memang di sediakan oleh pihak blogger itu sendiri, sedangkan untuk menyempurnakan fungsi dari menu registrasi ataupun menu login di blogger ini harus menggunakan kode javascript kemudian membuat halaman khusus agar pengguna bisa melakukan login serta registrasi

Sebagai hiasan

Seperti yang sudah admin jelaskan sebelumnya bahwa untuk membuat fungsi login dan registrasi secara baik harus di perlukan kode javascript tambahan serta membuat halaman khusus login dan juga registrasi, so di sini admin haya akan menjabarkan mengenai cara atau bagaiamana cara membuat menu login atau menu registrasi nya saja, sedanggakn untuk membuat halaman login dan halaman registrasi mungkin akan di bahas pada postingan yang lainnya

Mengapa admin katakan hanya sebagai hiasan pada blog, karena selagi halaman khusus belum di buat bagi pengguna agar bisa login, maka menu navigasi login tersebut hanya menjadi hiasan saja di dalam blog, dan untuk tampilan nya sendiri itu menggunakan mode melayang dan sanagat keren jika di terapkan di dalam blog kamu

Contoh Tampilan

Baiklah agar kamunya tidak penasaran admin sudah menyediakan tampilan demo nya untuk anda, so klik aja tolboo di bawah ini untuk memeriksa nya

Info: Bagaimana sobat dengan contoh tampilannya keren sekali kan pastilah, terlalu menakjubkan untuk di nikmati

Cara pembuatan

Baiklah sekarang saatnya admin bakalan menjabarkan mengenai bagaimana caranya membuat menu navigasi user login di blogger jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Kode CSS

Langkah pertama seperti biasa kamu bisa salin kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin>

.rahuserlogin{top:53px;visibility:visible;opacity:1;flex-wrap:wrap;margin:0;position:fixed;right:5px;font-size:13px;padding:10px 0;width:150px;background-color:#fefefe;color:#262d3d;border-radius:4px;box-shadow:0 1px 3px rgb(0 0 0 / 10%);transition:all .1s ease;-webkit-transition:all .1s ease;z-index:3}.rahuserlogin > *:hover{background-color:#f1f1f0}.rahuserlogin > *:after{content:attr(data-text);color:#08102b}.rahuserlogin > *{display:block;padding:9px 4px;width:100%}.rahuserlogin > *:before{content:'';padding:5px 20px}.rahuser-bio:before{content:'';background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(5.000000, 2.400000)'><path fill='none' stroke='%2308102b' d='M6.84454545,19.261909 C3.15272727,19.261909 -8.52651283e-14,18.6874153 -8.52651283e-14,16.3866334 C-8.52651283e-14,14.0858516 3.13272727,11.961909 6.84454545,11.961909 C10.5363636,11.961909 13.6890909,14.0652671 13.6890909,16.366049 C13.6890909,18.6658952 10.5563636,19.261909 6.84454545,19.261909 Z'></path><path fill='none' stroke='%2308102b' d='M6.83729838,8.77363636 C9.26002565,8.77363636 11.223662,6.81 11.223662,4.38727273 C11.223662,1.96454545 9.26002565,-1.0658141e-14 6.83729838,-1.0658141e-14 C4.41457111,-1.0658141e-14 2.45,1.96454545 2.45,4.38727273 C2.44184383,6.80181818 4.39184383,8.76545455 6.80638929,8.77363636 C6.81729838,8.77363636 6.82729838,8.77363636 6.83729838,8.77363636 Z'></path></g></svg>") center / 12px no-repeat;background-size:20px 20px}.rahuser-prod:before{content:'';background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(2.949964, 2.549853)'><path fill='none' stroke='%2308102b' d='M13.413836,4.32004688 C13.413836,1.93404688 11.479836,4.68846679e-05 9.093836,4.68846679e-05 C6.707836,-0.0109531153 4.765836,1.91504688 4.754836,4.30104688 L4.754836,4.32004688'></path><line x1='12.022736' y1='8.823947' x2='11.976736' y2='8.823947'></line><line x1='6.191636' y1='8.823947' x2='6.145636' y2='8.823947'></line><path fill='none' stroke='%2308102b' d='M9.08423611,18.939647 C2.57623611,18.939647 1.82723611,16.889647 0.366236112,11.472647 C-1.09976389,6.038647 1.84123611,4.005647 9.08423611,4.005647 C16.3272361,4.005647 19.2682361,6.038647 17.8022361,11.472647 C16.3412361,16.889647 15.5922361,18.939647 9.08423611,18.939647 Z'></path></g></svg>") center / 12px no-repeat;background-size:20px 20px}.rahuser-log:before{content:'';background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><line fill='none' stroke='%2308102b' x1='19.791' y1='10.1207' x2='7.75' y2='10.1207'></line><polyline fill='none' stroke='%2308102b' points='16.8643 7.2047 19.7923 10.1207 16.8643 13.0367'></polyline><path fill='none' stroke='%2308102b' d='M0.2588,5.6299 C0.5888,2.0499 1.9288,0.7499 7.2588,0.7499 C14.3598,0.7499 14.3598,3.0599 14.3598,9.9999 C14.3598,16.9399 14.3598,19.2499 7.2588,19.2499 C1.9288,19.2499 0.5888,17.9499 0.2588,14.3699' transform='translate(7.309300, 9.999900) scale(-1, 1) translate(-7.309300, -9.999900) '></path></g></svg>") center / 12px no-repeat;background-size:20px 20px}.rahuser-log:before{content:'';background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><line fill='none' stroke='%2308102b' x1='12.791' y1='10.1207' x2='0.75' y2='10.1207'></line><polyline fill='none' stroke='%2308102b' points='9.8643 7.2047 12.7923 10.1207 9.8643 13.0367'></polyline><path fill='none' stroke='%2308102b' d='M5.2588,5.6299 C5.5888,2.0499 6.9288,0.7499 12.2588,0.7499 C19.3598,0.7499 19.3598,3.0599 19.3598,9.9999 C19.3598,16.9399 19.3598,19.2499 12.2588,19.2499 C6.9288,19.2499 5.5888,17.9499 5.2588,14.3699'></path></g></svg>") center / 12px no-repeat;background-size:20px 20px}.rahuser-reg:before{content:'';background:url("data:image/svg+xml,<svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(2.850300, 2.150000)'><path fill='none' stroke='%2308102b' d='M7.072,19.6583 C3.258,19.6583 1.15463195e-13,19.0813 1.15463195e-13,16.7713 C1.15463195e-13,14.4613 3.237,12.3603 7.072,12.3603 C10.886,12.3603 14.144,14.4413 14.144,16.7503 C14.144,19.0593 10.907,19.6583 7.072,19.6583 Z'></path><path fill='none' stroke='%2308102b' d='M7.07200002,9.066 C9.57500002,9.066 11.605,7.036 11.605,4.533 C11.605,2.029 9.57500002,1.50990331e-14 7.07200002,1.50990331e-14 C4.56900002,1.50990331e-14 2.53897,2.029 2.53897,4.533 C2.53000002,7.027 4.54600002,9.057 7.04000002,9.066 L7.07200002,9.066 Z'></path><line fill='none' stroke='%2308102b' x1='16.281' y1='5.9791' x2='16.281' y2='9.9891'></line><line fill='none' stroke='%2308102b' x1='18.3273' y1='7.9839' x2='14.2373' y2='7.9839'></line></g></svg>") center / 12px no-repeat;background-size:20px 20px}.dark-mode .rahuserlogin > *:after{content:attr(data-text);color:#fffdfc}.dark-mode .rahuserlogin{background-color: #2d2d30}.dark-mode .rahuserlogin > *:hover{background-color:#1e1e1e}.dark-mode .rahuser-bio:before{content:'';background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(5.000000, 2.400000)'><path fill='none' stroke='%23fffdfc' d='M6.84454545,19.261909 C3.15272727,19.261909 -8.52651283e-14,18.6874153 -8.52651283e-14,16.3866334 C-8.52651283e-14,14.0858516 3.13272727,11.961909 6.84454545,11.961909 C10.5363636,11.961909 13.6890909,14.0652671 13.6890909,16.366049 C13.6890909,18.6658952 10.5563636,19.261909 6.84454545,19.261909 Z'></path><path fill='none' stroke='%23fffdfc' d='M6.83729838,8.77363636 C9.26002565,8.77363636 11.223662,6.81 11.223662,4.38727273 C11.223662,1.96454545 9.26002565,-1.0658141e-14 6.83729838,-1.0658141e-14 C4.41457111,-1.0658141e-14 2.45,1.96454545 2.45,4.38727273 C2.44184383,6.80181818 4.39184383,8.76545455 6.80638929,8.77363636 C6.81729838,8.77363636 6.82729838,8.77363636 6.83729838,8.77363636 Z'></path></g></svg>") center / 12px no-repeat;background-size:20px 20px}.dark-mode .rahuser-prod:before{content:'';background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(2.949964, 2.549853)'><path fill='none' stroke='%23fffdfc' d='M13.413836,4.32004688 C13.413836,1.93404688 11.479836,4.68846679e-05 9.093836,4.68846679e-05 C6.707836,-0.0109531153 4.765836,1.91504688 4.754836,4.30104688 L4.754836,4.32004688'></path><line x1='12.022736' y1='8.823947' x2='11.976736' y2='8.823947'></line><line x1='6.191636' y1='8.823947' x2='6.145636' y2='8.823947'></line><path fill='none' stroke='%23fffdfc' d='M9.08423611,18.939647 C2.57623611,18.939647 1.82723611,16.889647 0.366236112,11.472647 C-1.09976389,6.038647 1.84123611,4.005647 9.08423611,4.005647 C16.3272361,4.005647 19.2682361,6.038647 17.8022361,11.472647 C16.3412361,16.889647 15.5922361,18.939647 9.08423611,18.939647 Z'></path></g></svg>") center / 12px no-repeat;background-size:20px 20px}.dark-mode .rahuser-log:before{content:'';background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><line fill='none' stroke='%23fffdfc' x1='19.791' y1='10.1207' x2='7.75' y2='10.1207'></line><polyline fill='none' stroke='%23fffdfc' points='16.8643 7.2047 19.7923 10.1207 16.8643 13.0367'></polyline><path fill='none' stroke='%23fffdfc' d='M0.2588,5.6299 C0.5888,2.0499 1.9288,0.7499 7.2588,0.7499 C14.3598,0.7499 14.3598,3.0599 14.3598,9.9999 C14.3598,16.9399 14.3598,19.2499 7.2588,19.2499 C1.9288,19.2499 0.5888,17.9499 0.2588,14.3699' transform='translate(7.309300, 9.999900) scale(-1, 1) translate(-7.309300, -9.999900) '></path></g></svg>") center / 12px no-repeat;background-size:20px 20px}.dark-mode .rahuser-log:before{content:'';background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><line fill='none' stroke='%23fffdfc' x1='12.791' y1='10.1207' x2='0.75' y2='10.1207'></line><polyline fill='none' stroke='%23fffdfc' points='9.8643 7.2047 12.7923 10.1207 9.8643 13.0367'></polyline><path fill='none' stroke='%23fffdfc' d='M5.2588,5.6299 C5.5888,2.0499 6.9288,0.7499 12.2588,0.7499 C19.3598,0.7499 19.3598,3.0599 19.3598,9.9999 C19.3598,16.9399 19.3598,19.2499 12.2588,19.2499 C6.9288,19.2499 5.5888,17.9499 5.2588,14.3699'></path></g></svg>") center / 12px no-repeat;background-size:20px 20px}.dark-mode .rahuser-reg:before{content:'';background:url("data:image/svg+xml,<svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(2.850300, 2.150000)'><path fill='none' stroke='%23fffdfc' d='M7.072,19.6583 C3.258,19.6583 1.15463195e-13,19.0813 1.15463195e-13,16.7713 C1.15463195e-13,14.4613 3.237,12.3603 7.072,12.3603 C10.886,12.3603 14.144,14.4413 14.144,16.7503 C14.144,19.0593 10.907,19.6583 7.072,19.6583 Z'></path><path fill='none' stroke='%23fffdfc' d='M7.07200002,9.066 C9.57500002,9.066 11.605,7.036 11.605,4.533 C11.605,2.029 9.57500002,1.50990331e-14 7.07200002,1.50990331e-14 C4.56900002,1.50990331e-14 2.53897,2.029 2.53897,4.533 C2.53000002,7.027 4.54600002,9.057 7.04000002,9.066 L7.07200002,9.066 Z'></path><line fill='none' stroke='%23fffdfc' x1='16.281' y1='5.9791' x2='16.281' y2='9.9891'></line><line fill='none' stroke='%23fffdfc' x1='18.3273' y1='7.9839' x2='14.2373' y2='7.9839'></line></g></svg>") center / 12px no-repeat;background-size:20px 20px}

Info: Atau sobat bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas

Kode HTML/JavaScript

Langkah selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode html dan javascript di bawah ini kemudian kamu bisa meletakkan nya di atas kode </body>

<div class="rahuserlogin hidden">
 <a class="rahuser-log" data-text="Login" href="/p/login.html">
 </a>
 <a class="rahuser-reg" data-text="Register" href="/p/register.html">
 </a>
 <a class="rahuser-bio hidden" data-text="Profile Saya" href="/p/profile.html" target="_blank">
 </a>
 <a class="rahuser-prod hidden" data-text="Produk Saya" href="/p/my-product.html" target="_blank">
 </a>
 <a class="rahuser-log hidden" data-text="Logout" href="javascript:" onclick="logoutDong();">
 </a>
</div>
<script>
 /*<![CDATA[*/
 var _0x5823=["\x41\x70\x61\x6B\x61\x68\x20\x61\x6E\x64\x61\x20\x79\x61\x6B\x69\x6E\x20\x69\x6E\x67\x69\x6E\x20\x6B\x65\x6C\x75\x61\x72\x3F","\x6C\x6F\x67\x69\x6E","\x72\x65\x6D\x6F\x76\x65\x49\x74\x65\x6D","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x75\x72\x6C","\x73\x6C\x69\x64\x65\x54\x6F\x67\x67\x6C\x65","\x2E\x72\x61\x68\x75\x73\x65\x72\x6C\x6F\x67\x69\x6E","\x2E\x72\x61\x68\x75\x73\x65\x72\x2D\x6C\x6F\x67","\x2E\x72\x61\x68\x75\x73\x65\x72\x2D\x72\x65\x67","\x2E\x72\x61\x68\x75\x73\x65\x72\x2D\x62\x69\x6F","\x2E\x72\x61\x68\x75\x73\x65\x72\x2D\x70\x72\x6F\x64","\x63\x68\x65\x63\x6B","\x74\x72\x75\x65","\x68\x69\x64\x64\x65\x6E","\x61\x64\x64\x43\x6C\x61\x73\x73","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73"];function logoutDong(){confirm(_0x5823[0])&& (localStorage[_0x5823[2]](_0x5823[1]),setTimeout(function(){window[_0x5823[4]][_0x5823[3]]= wc[_0x5823[5]][_0x5823[1]]},1e3))}function loginUser(){$(_0x5823[7])[_0x5823[6]]();var _0x2e93x3=$(_0x5823[8]),_0x2e93x4=$(_0x5823[9]),_0x2e93x5=$(_0x5823[10]),_0x2e93x6=$(_0x5823[11]),_0x2e93x7=$(_0x5823[8]);null!= wc[_0x5823[12]][_0x5823[1]]&& _0x5823[13]== wc[_0x5823[12]][_0x5823[1]]?(_0x2e93x3[_0x5823[15]](_0x5823[14]),_0x2e93x4[_0x5823[15]](_0x5823[14]),_0x2e93x5[_0x5823[16]](_0x5823[14]),_0x2e93x6[_0x5823[16]](_0x5823[14]),_0x2e93x7[_0x5823[16]](_0x5823[14])):(_0x2e93x3[_0x5823[16]](_0x5823[14]),_0x2e93x4[_0x5823[16]](_0x5823[14]),_0x2e93x5[_0x5823[15]](_0x5823[14]),_0x2e93x6[_0x5823[15]](_0x5823[14]),_0x2e93x7[_0x5823[15]](_0x5823[14]))}/*]]>*/
</script>

Info: Fungsi kode html dan javascript di atas adalah untuk menampilkan menu navigasi login dan register di blogger tersebut

Tombol penampil

Lah masih belum selesai kamu harus menggunakn tombol untuk menampilkan menu user login tersebut, secara singkatnya ketika pengguna mengklik tombol penampi tersebut maka menu navigasi user login tersebut akan muncul

<label aria-label="Profile" class="tPrfl tIc bIc" onclick="loginUser();">
<svg class="line" viewbox="0 0 24 24">
 <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z">
 </path>
 <path d="M20.5899 22C20.5899 18.13 16.7399 15 11.9999 15C7.25991 15 3.40991 18.13 3.40991 22">
 </path>
</svg>
 </label>

Info: Jika bingung sobat bisa menaruhnya di atas kode </header>