For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat menu navigasi profile di blogger

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&amp;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

Autor Icloudice
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
0
Followers
0
Girl Friends
0
Share
0
Projects
0
Work

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.