If you are looking for how to add a nice Profile Pageto blogger website then this post is just for you.
You may know that adding Profile Page feature requires the use of various third-party plugins or code libraries, which slow down the loading speed of the website. So no problem read this post today, even if you don't know coding you can make awesome Partner Page to your website. You will work the way I tell you and the result will be beautiful when the work is done.
I am MUSTAKIM . I have been involved with coding for a long time. I will give you proper advice from long experience so let's start.
We only used then HTML and CSS not JS operation, Are you upset about your website speed? do not worry it doesn't affect your website speed.
Your website has a dark mode function and you fussing about it works impeccably in dark mode?
Also do not worry about it this Code Box also has dark mode CSS that you just want to change the dark mode class that we gave with your theme dark mode class, you can fluently change it by following this tutorial precisely.
Why is Profile Page useful?
It helps your friend/partner's site to rank because it gives your friend's site backlinks which is very beneficial for website to rank in search and it adds a cool design and makes your site more professional look.
Does it require jQuery library?
No.
Will it work in all templates?
Yes.
So without wasting important time let's check how to make a Modern Profile Page in Blogger.
How To Make Modern Profile Page in Blogger ?
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click nav-bar.
Step 3: Go to the page/post or place which you want to add Partner Page
Step 4: Then if you are doing this in page/post then don't forget to change Compose view to the HTML view
Step 5: Now paste the following HTML code to that place .
.
<div>
<div class="ycusr"><div class="ycnbr"><span class="ycnbrpn">😍</span></div><div class="image"><img alt="Mustakim" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMr1gAljeFbMuzsh6kVcbPIQ5jyzHMTKGnSwVDjS56CeS354DgTkjZ0Fpz4-8P6dXJNTfFzcfoaYghgw_LCKKwaqddOluhCl8RUH793aNd1i0dvirIkp33kd1uUzAXY9PRrhgyZkGLLsmp8tTJ_EVtw13e6GED9EfKpFjLGHHgZB9T0TgsQep5KSgb3Q/s480/20221014_235116.png-rw" /></div><div class="ycusrLn">Made This Coffee by-</div><div class="ycusrTl">MUSTAKIM</div><div class="ycusrD"style="text-align: justify";>Hello, I am MUSTAKIM - Designer at NS Design Templates who provides the best blogger templates, amazing features, SEO friendly, Responsive designs, and Google AdSense friendly. </div> <div class="ycusrsv"><a class="getar" href="https://t.me/MustakimNS" target="_blank"><svg class="line" viewbox="0 0 24 24" width="20px" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg></a></div></div> <style>.yzfllw{position:relative;padding:15px;padding-bottom:8px;border-radius:20px 0 20px 20px;background-color:#fff;border:1px solid#0b57cf}.image img{flex-shrink:0;width:70px;height:70px;border-radius:100%;background-size:cover;background-position:center;position:absolute;padding:4px;border:1.5px solid var(--linkB);border-top-color:transparent;border-bottom-color:transparent}.Label-1{line-height:1.9em;position:relative;padding:0;list-style:none;font-size:10px;display:flex;flex-wrap:wrap;gap:20px 10px}.Label-1 li{background:rgba(155,170,175,.12);margin-right:10px;border-radius:20px;padding:5px 10px;line-height:1.5em;white-space:nowrap}.ycnbr{position:absolute;z-index:1;background-color:#fff;width:30px;height:30px;bottom:8px;right:8px;padding:5px;border-radius:50%}.ycnbr .ycnbrpn{display:flex;font-size:12px;justify-content:center;margin-top:-3px}.ycusr{position:relative;padding:15px;border-radius:20px;background:#fff;box-shadow:0 10px 25px -3px rgb(0 0 0 / 10%);margin-top:25px}.ycusr::before{content:'';display:block;position:absolute;top:0;left:0;width:115px;height:115px;background:rgba(155,170,175,.12);background-repeat:no-repeat;border-radius:20px 0 120px;transition:opacity .3s;opacity:1}.ycusr::after{content:'';display:block;position:absolute;bottom:0;right:0;width:115px;height:115px;background:rgba(155,170,175,.12);background-repeat:no-repeat;border-radius:120px 0 20px;transition:opacity .3s;opacity:1}.ycusr.c{border:1px solid var(--linkC)}.ycusrsv a{position:absolute;width:40px;height:40px;top:75%;right:18px;padding:5px;border-radius:50%;background:#ebeff3;top:8px;right:8px;box-shadow:0 10px 25px -3px rgb(0 0 0 / 10%)}.ycusrsv a svg{justify-content:center;margin:5px;margin-top:3px}.ycusrLn{margin-left:90px;color:#009ee0;font-size:10px}.ycusrTl{font-weight:700;margin-left:90px;color:#aaa;font-size:15px;margin-bottom:10px}.ycusrTl:after{margin-left:90px;content:"";display:block;height:1px;background-color:var(--linkC);margin-top:10px;animation-name:AnYz;animation-duration:2s;animation-iteration-count:infinite;margin-left:0}.ycusrD{color:#555;font-size:13px}@keyframes AnYz{0%{width:30px}50%{width:60px}100%{width:30px}}.drK .Label-1 li,.drK .ycnbr{background-color:var(--darkB)}.drK .ycusr{background-color:var(--darkBs)}.drK .ycusrLn{color:var(--darkTa)}.drK .ycusrD,.drK .ycusrTl{color:var(--darkTa)}.drK .ycnbr{color:#fff)}.drK .ycusr.c{border:1px solid var(--darkU)}.drK .ycusrsv a{background:var(--darkBa)}.drK .ycusrsv a svg{stroke:#fff}</style>
</div>
Step 6: Then Save or Publish.
Step 7: That's done!