Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat menu navigasi profile yang keren di blogger
Info: Jika kamu sudah penasaran dengan pembahasan kita kali ini yuk lagsung aja kita bahas bersama sama
Navigasi Profile
Menu navigasi profile merupakan suatu menu yang berisikan informasi mengenai data atau yang lainnya terhadap user alias pengguna, ataupun terhadap informasi data dari pemilik blog itu sendiri, namun pada pembahasan kita kali ini khusus membahas cara membuat menu navigasi profile untuk menampilkan informasi admin pemilik blog
Ringan dan Responsif
Tampilan dari menu navigasi profile tersebut sangat responsif dan juga cepat, yakni responsif pada tampilan mobile dan juga responsif pada tampilan desktop, nantinya di dalam menu navigasi profile tersebut kamu bisa menampilkan informasi semisal, bio, nama dan alamat serta jumlah pengikut dan sebagiannya
Menggunakan CSS
Untuk membuat tampilan menu navigasi profile tersebut cukup di buat menggunakan kode CSS saja, namun karena kita akan menambahkan fitur menghitung jumlah pengikut dan lain sebaginya itu di butuhkan penggunaan kode javascript, namun jangan khawatir megenai kestabilan dan performa blog menjadi lambat
Contoh Tampilan
Baiklah jika kamu sudah penasaran dengan bagaimana sih contoh tampilan dari menu navigasi profile yang keren di blogger tersebut, gunakan tombol di bawah ini untuk memeriksa nya
Info: Bagaimanapun sobat dengan contoh tampilan nya keren sekali yak
Cara pembuatan
Baiklah sobat ICloudzer sekarang saatnya admin bakalan menjabarkan mengenai bagaimana caranya membuat menu navigasi profile di blogger, silahkan ikuti setiap arahan yang admin jabarkan di bawah ini
Kode CSS
Langkah pertama seperti biasa silahkan salin dan gunakan kode CSS di bawah ini kemudian kamu bisa meletakkan nya di atas kode ]]></b:skin>
/* Menu profile navigasi by ICloudice.com */
.rahprlWp{background-color:#fefefe;z-index:535;position:fixed!important;padding:20px 20px 20px 20px auto;box-shadow:0px 8px 60px -10px rgba(13, 28, 39, 0.6);left:50%;width:350px;transform:translateX(-50%);border-radius:30px;-webkit-transition:all .2s ease;transition:all .2s ease;opacity:0;visibility:hidden}.rahprlWp .gbr{width:120px;height:120px;margin-left: auto;margin-right:auto;transform:translateY(-50%);
border-radius:50%;overflow:hidden;position: relative;z-index:4;box-shadow: 0px 5px 50px 0px #de3535, 0px 0px 0px 7px #de3535 ;}.rahprlWp .gbr img{display:block;width:100%;height:100%;object-fit: cover;border-radius: 50%;}.rahprlWp .gbr img{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;}.rahprlWp .ident{margin-top:-45px;
text-align: center;padding: 0 20px;padding-bottom:30px;transition: all .3s;}.rahprlWp .ident .name{font-weight:800;font-size:15px;color:#de3535;margin-bottom:10px;}i#verified,.rahprlWp a{color:#de3535!important}.rahprlWp .ident .bio{font-size:12px;font-weight:500;margin-bottom:10px;}.rahprlWp .bio strong{font-weight: 800;}.rahprlWp .ident .lok{display: flex;justify-content: center;align-items: center;font-size:14px;font-weight:500;}.rahprlWp .ident .lok .icon{display:inline-flex;font-size:25px;margin-right:-5px;}.rahprlWp .lok .icon svg{width:24px;height:24px;fill:#de3535}.rahprlWp .ident .count{display:flex;
justify-content: center;flex-wrap: wrap;align-items: flex-start;margin-top:5px;}.rahprlWp .count .br{padding: 10px 35px;
min-width:35px;}.rahprlWp .ident .count .judul{font-weight:500;font-size:14px}.rahprlWp .ident .count .isi{font-weight: 500;margin-top: 5px;}.rahprlWp .ident .sosmed{margin-top:5px;display: flex;justify-content: center;align-items:center;flex-wrap:wrap;}.rahprlWp .ident .sosmed .br{display:inline-flex;width:35px;height:35px;margin:12px;border-radius: 50%;align-items: center;justify-content: center;color:#fefefe;background:#fefefe;box-shadow: 0px 7px 30px rgba(43, 98, 169, 0.5);position:relative;font-size:15px;flex-shrink:0;transition: all .3s;}.rahprlWp .ident .sosmed .br:hover{transform: scale(1.2);}.rahprlWp .ident .sosmed .br.facebook{background: linear-gradient(45deg, #fefefe, #fefefe);box-shadow: 0px 4px 30px rgba(43, 98, 169, 0.5);}.rahprlWp .ident .sosmed .br.twitter{background: linear-gradient(45deg, #fefefe, #fefefe);box-shadow: 0px 4px 30px rgba(19, 127, 212, 0.7);}.rahprlWp .ident .sosmed .br.instagram{background: linear-gradient(45deg, #fefefe, #fefefe, #fefefe, #fefefe, #fefefe, #fefefe);box-shadow: 0px 4px 30px rgba(120, 64, 190, 0.6);}.rahprlWp .ident .sosmed .br.email{background: linear-gradient(45deg, #fefefe, #fefefe);
box-shadow: 0px 4px 30px rgba(223, 45, 70, 0.6);}.rahprlWp .ident .sosmed .icon-font{display: inline-flex;}
/* dark mode */
.dark-mode .rahprlWp{border:1px solid #fefefe}.dark-mode .rahprlWp, .dark-mode .rahprlWp .ident{background-color:#242526;color:#fefefe}
/* Responsif */
@media screen and (max-width:1200px){
.rahprlWp{top:35%;}}
@media screen and (max-width:800px){
.rahprlWp{top:auto!important;bottom:0!important;border-radius:20px 20px 0 0!important;width:100%!important}.rahprlWp .ident .sosmed .br{margin:8px;}.rahprlWp .ident .count .br{padding: 0 12px;min-width:30px;}.rahprlWp .ident{margin-top:-21px!important}.rahprlWp .gbr{width:69px!important;height:69px!important;}.rahprlWp .gbr img{margin-left:20px;}}.rahPrlwp:checked + .rahprlWp{opacity:1;visibility:visible}.rahPrlwp:checked ~ .rahprlWp ~ .fCls{z-index:515;background:rgba(0,0,0,.35);opacity:1;visibility:visible;}Info: Atau sobat ICloudzer bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas
Kode HTML
Langkah selanjutnya kamu bisa salin kode HTML di bawah ini kemudian kamu bisa meletakkan nya di atas kode <body>
<input class='rahPrlwp hidden' id='rahpRlwp' type='checkbox'/>
<div class='rahprlWp'>
<div class='gbr'>
<a href='/'><img alt='Autor Icloudice' src='url_gambar_mu'/></a>
</div>
<div class='ident'>
<div class='name'>
<a href='https://icloudice.com/p/about.html'>
Muhammad Rahmat Uliady
</a>
<i id='verified' class='fa fa-check-circle'title='Verified Author'>
</i>
</div>
<div class='bio'>
Perkenalkan Nama saya M.rahmat uliady, saat ini saya berumur 20 tahun, saya sangat menyukai Bidang IT dan komputer, Mempelajari Teknologi dan mengembangkannya adalah kegemaran saya
</div>
<div class='lok'>
<span class='icon'>
<svg class='icon' viewbox='0 0 35 35' xmlns='http://www.w3.org/2000/svg'>
<path class='svg-c' d='M16 31.68c-0.352 0-0.672-0.064-1.024-0.16-0.8-0.256-1.44-0.832-1.824-1.6l-6.784-13.632c-1.664-3.36-1.568-7.328 0.32-10.592 1.856-3.2 4.992-5.152 8.608-5.376h1.376c3.648 0.224 6.752 2.176 8.608 5.376 1.888 3.264 2.016 7.232 0.352 10.592l-6.816 13.664c-0.288 0.608-0.8 1.12-1.408 1.408-0.448 0.224-0.928 0.32-1.408 0.32zM15.392 2.368c-2.88 0.192-5.408 1.76-6.912 4.352-1.536 2.688-1.632 5.92-0.288 8.672l6.816 13.632c0.128 0.256 0.352 0.448 0.64 0.544s0.576 0.064 0.832-0.064c0.224-0.096 0.384-0.288 0.48-0.48l6.816-13.664c1.376-2.752 1.248-5.984-0.288-8.672-1.472-2.56-4-4.128-6.88-4.32h-1.216zM16 17.888c-3.264 0-5.92-2.656-5.92-5.92 0-3.232 2.656-5.888 5.92-5.888s5.92 2.656 5.92 5.92c0 3.264-2.656 5.888-5.92 5.888zM16 8.128c-2.144 0-3.872 1.728-3.872 3.872s1.728 3.872 3.872 3.872 3.872-1.728 3.872-3.872c0-2.144-1.76-3.872-3.872-3.872z'>
</path>
<path d='M16 32c-0.384 0-0.736-0.064-1.12-0.192-0.864-0.288-1.568-0.928-1.984-1.728l-6.784-13.664c-1.728-3.456-1.6-7.52 0.352-10.912 1.888-3.264 5.088-5.28 8.832-5.504h1.376c3.744 0.224 6.976 2.24 8.864 5.536 1.952 3.36 2.080 7.424 0.352 10.912l-6.784 13.632c-0.32 0.672-0.896 1.216-1.568 1.568-0.48 0.224-0.992 0.352-1.536 0.352zM15.36 0.64h-0.064c-3.488 0.224-6.56 2.112-8.32 5.216-1.824 3.168-1.952 7.040-0.32 10.304l6.816 13.632c0.32 0.672 0.928 1.184 1.632 1.44s1.472 0.192 2.176-0.16c0.544-0.288 1.024-0.736 1.28-1.28l6.816-13.632c1.632-3.264 1.504-7.136-0.32-10.304-1.824-3.104-4.864-5.024-8.384-5.216h-1.312zM16 29.952c-0.16 0-0.32-0.032-0.448-0.064-0.352-0.128-0.64-0.384-0.8-0.704l-6.816-13.664c-1.408-2.848-1.312-6.176 0.288-8.96 1.536-2.656 4.16-4.32 7.168-4.512h1.216c3.040 0.192 5.632 1.824 7.2 4.512 1.6 2.752 1.696 6.112 0.288 8.96l-6.848 13.632c-0.128 0.288-0.352 0.512-0.64 0.64-0.192 0.096-0.384 0.16-0.608 0.16zM15.424 2.688c-2.784 0.192-5.216 1.696-6.656 4.192-1.504 2.592-1.6 5.696-0.256 8.352l6.816 13.632c0.096 0.192 0.256 0.32 0.448 0.384s0.416 0.064 0.608-0.032c0.16-0.064 0.288-0.192 0.352-0.352l6.816-13.664c1.312-2.656 1.216-5.792-0.288-8.352-1.472-2.464-3.904-4-6.688-4.16h-1.152zM16 18.208c-3.424 0-6.24-2.784-6.24-6.24 0-3.424 2.816-6.208 6.24-6.208s6.24 2.784 6.24 6.24c0 3.424-2.816 6.208-6.24 6.208zM16 6.4c-3.072 0-5.6 2.496-5.6 5.6 0 3.072 2.528 5.6 5.6 5.6s5.6-2.496 5.6-5.6c0-3.104-2.528-5.6-5.6-5.6zM16 16.16c-2.304 0-4.16-1.888-4.16-4.16s1.888-4.16 4.16-4.16c2.304 0 4.16 1.888 4.16 4.16s-1.856 4.16-4.16 4.16zM16 8.448c-1.952 0-3.552 1.6-3.552 3.552s1.6 3.552 3.552 3.552c1.952 0 3.552-1.6 3.552-3.552s-1.6-3.552-3.552-3.552z'>
</path>
</svg>
</span>
<a class='jd' href='https://maps.google.com/?cid=14698207527903827433&entry=gps'>
Tanjung batu
</a>
</div>
<div class='count'>
<div class='br'>
<div class='judul' id='hitung-fans'>
0
</div>
<div class='isi'>
Followers
</div>
</div>
<div class='br'>
<div class='judul' id='hitung-pacar'>
0
</div>
<div class='isi'>
Girl Friends
</div>
</div>
<div class='br'>
<div class='judul' id='hitung-share'>
0
</div>
<div class='isi'>
Share
</div>
</div>
<div class='br'>
<div class='judul' id='hitung-project'>
0
</div>
<div class='isi'>
Projects
</div>
</div>
<div class='br'>
<div class='judul' id='hitung-pekerjaan'>
0
</div>
<div class='isi'>
Work
</div>
</div>
<div class='sosmed'>
<a class='br Instagram' href='https://instagram.com/icloudice' target='_blank'>
<span class='icon-font'>
<svg viewbox='0 0 32 32'>
<path class='svg-c' d='M20.45,13.32a1,1,0,0,0-.57,1.3,4,4,0,1,1-2.31-2.3,1,1,0,1,0,.71-1.87,6,6,0,0,0-6.37,9.85,6,6,0,0,0,8.48,0,6,6,0,0,0,1.36-6.41A1,1,0,0,0,20.45,13.32Z'>
</path>
<circle class='svg-c' cx='23' cy='9' r='1'>
</circle>
<path d='M28,9a5,5,0,0,0-4.9-5h0A77.11,77.11,0,0,0,9,4,5,5,0,0,0,4,8.92,91.91,91.91,0,0,0,4,23a5,5,0,0,0,4.9,5h0c2.36.22,4.73.34,7.1.34s4.71-.11,7.05-.34A5,5,0,0,0,28,23.08,87.09,87.09,0,0,0,28,9ZM26,23a3,3,0,0,1-3,3h-.1A71.73,71.73,0,0,1,9,26a3,3,0,0,1-3-3.08A92.4,92.4,0,0,1,6,9,3,3,0,0,1,9.09,6q3.44-.31,6.9-.32T23,6a3,3,0,0,1,3,3.08A85.13,85.13,0,0,1,26,23Z'>
</path>
</svg>
</span>
</a>
<a class='br twitter' href='https://twitter.com/icloud_ice' target='_blank'>
<span class='icon-font'>
<svg viewbox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>
<g>
<path d='M13.35,28A13.66,13.66,0,0,1,2.18,22.16a1,1,0,0,1,.69-1.56l2.84-.39A12,12,0,0,1,5.44,4.35a1,1,0,0,1,1.7.31,9.87,9.87,0,0,0,5.33,5.68,7.39,7.39,0,0,1,7.24-6.15,7.29,7.29,0,0,1,5.88,3H29a1,1,0,0,1,.9.56,1,1,0,0,1-.11,1.06L27,12.27c0,.14,0,.28-.05.41a12.46,12.46,0,0,1,.09,1.43A13.82,13.82,0,0,1,13.35,28ZM4.9,22.34A11.63,11.63,0,0,0,13.35,26,11.82,11.82,0,0,0,25.07,14.11,11.42,11.42,0,0,0,25,12.77a1.11,1.11,0,0,1,0-.26c0-.22.05-.43.06-.65a1,1,0,0,1,.22-.58l1.67-2.11H25.06a1,1,0,0,1-.85-.47,5.3,5.3,0,0,0-4.5-2.51,5.41,5.41,0,0,0-5.36,5.45,1.07,1.07,0,0,1-.4.83,1,1,0,0,1-.87.2A11.83,11.83,0,0,1,6,7,10,10,0,0,0,8.57,20.12a1,1,0,0,1,.37,1.05,1,1,0,0,1-.83.74Z'>
</path>
</g>
</svg>
</span>
</a>
<a class='br facebook' href='https://facebook.com/icloudicepage' target='_blank'>
<span class='icon-font'>
<svg viewbox='0 0 32 32'>
<path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5h8a1,1,0,0,0,1-1V20a1,1,0,0,0-1-1H15V17h1a1,1,0,0,0,1-1V12.5A2.5,2.5,0,0,1,19.5,10H22v2H21a2,2,0,0,0-2,2v2a1,1,0,0,0,1,1h1.72l-.5,2H20a1,1,0,0,0-1,1v4a1,1,0,0,0,2,0V21h1a1,1,0,0,0,1-.76l1-4a1,1,0,0,0-.18-.86A1,1,0,0,0,23,15H21V14h2a1,1,0,0,0,1-1V9a1,1,0,0,0-1-1H19.5A4.51,4.51,0,0,0,15,12.5V15H14a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h1v6H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3V24a3,3,0,0,1-3,3H20a1,1,0,0,0,0,2h4a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Z'>
</path>
</svg>
</span>
</a>
<a class='br email' href='mailto:angkasaraya455@gmail.com' target='_blank'>
<span class='icon-font'>
<svg class='line' viewbox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
<g>
<rect height='16' rx='5' stroke-width='1.5' width='20' x='2' y='4'>
</rect>
<path class='svg-c' d='M90.15056,261.91842l1.082.83317a6.66376,6.66376,0,0,0,8.13139,0l1.02841-.79194' stroke-width='1.5' transform='translate(-83.27144 -252.82349)'>
</path>
</g>
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
<label class='fCls rahgtr' for='rahpRlwp'/>Info: Fungsi kode html di atas adalah untuk menampilkan menu navigasi profile tersebut
Tombol Icon
Karena menu navigasi profile tersebut muncul saat di klik maka sobat bisa menggunakan tombol icon profile di bawah ini
<label for='rahpRlwp' onclick='vibRate(50)'>
<svg class='line' viewBox='0 0 24 24'><path class='svgC' 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 d='M20.5899 22C20.5899 18.13 16.7399 15 11.9999 15C7.25991 15 3.40991 18.13 3.40991 22'/></svg>
</label>Info: Jika pengunjung mengklik tombol tersebut maka secara otomatis menu navigasi profile tersebut akan muncul alias tampil
Kode Javascript
Langkah terakhir setelah menginstal kode CSS dan kode HTML yang saya berikan di atas selanjutnya silahkan salin kode javascript di bawah ini kemudian letakkan diatas kode </body>
<script>
//<![CDATA[
!function(e){var t=function(t,n){"use strict";var o=e.document.getElementsByTagName("script")[0],r=e.document.createElement("script");return r.src=t,r.async=!0,o.parentNode.insertBefore(r,o),n&&"function"==typeof n&&(r.onload=n),r};"undefined"!=typeof module?module.exports=t:e.loadJS=t}("undefined"!=typeof global?global:this);
function rahCount(gantengrah, result) {
let numAnim = new CountUp(document.getElementById(gantengrah),0, result);
setTimeout(function() {
numAnim.start()
}, 1e4);
}
function updrahImpo(json) {
rahCount('hitung-fans', 1000/* ubah value*/)
rahCount('hitung-pekerjaan', 1000/* ubah value*/)
rahCount('hitung-share', 1000/* ubah value*/)
rahCount('hitung-project', 1000/* ubah value*/)
}
function updrahIndi(json) {
rahCount('hitung-pacar', 1000/* ubah value*/)
}
loadJS('//cdnjs.cloudflare.com/ajax/libs/countup.js/1.9.3/countUp.min.js', function() {
loadJS('/feeds/posts/default/?alt=json&max-results=0&callback=updrahImpo');
loadJS('/feeds/comments/default?alt=json&max-results=0&callback=updrahIndi');
});
//]]>
</script>Info: Fungsi kode javascript diatas adalah untuk menampilkan jumlah pengikut, jumlah share, jumlah pekerjaan, dan sebagiannya, namun fitur tersebut berfungsi secara manual, dan kamu bisa mengubah setiap value yang tertera di dalam kode javascript di atas
Perkenalkan Nama saya M.rahmat uliady, saat ini saya berumur 20 tahun, saya sangat menyukai Bidang IT dan komputer, Mempelajari Teknologi dan mengembangkannya adalah kegemaran saya