If you are looking for how to add a nice Partner Pageto blogger website then this post is just for you.
You may know that adding Partner 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 Monish. 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 Partner 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 Partner Page in Blogger.
You can see the demo here:-
How To Make Modern Partner Page in Blogger ?
Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.
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
Style 1
<div class="ycusr"><div class="ycnbr"><span class="ycnbrpn">❤</span></div><div class="image"><img alt="Monish tips" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSv2I_7D44sw4KeyVg3IgMTZloBPQRCWchkYJuHsDX6ig5bf_QjxZ7gLYvdeDEB_7TnIyzwOfn7VfPApBRoChbyGwchfYkVL8uHZ1Uqe8XCLn963Z-CJQa0DqkWba-Vv_uyYfUTqaaKXvbjKJj-ZW_KWrrChagNNALgzuERH5WVmr6xqmA3UT0AwoobQ/s320/Blue%252BWhite%252BDigital%252BWallet%252BApp%252BIcon%252BFinance%252BMoney%252BBusiness%252BLogo.png-rw"></div><div class="ycusrLn">www.monishtips.com</div><div class="ycusrTl">Monish tips</div><div class="ycusrD">MONISH TIPS : A New Blog Where You Can Find Project file like PLP,PSD,DNG,AI,Mockup,Lats, Font and Many More...</div><ul class="Label-1"><li>Mockup</li><li>Tutorial</li><li>PLP & PSD & DNGJavaScript</li></ul><div class="ycusrsv"><a class="getar" href="#" 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>
Style 2
<h2 style="text-align:center"><br></h2><div class="aAthrP"><div class="aAdm"><div class="aAdmC"><img alt="partner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn2ytKJJvyxZVhBy0MeWiFJKojSTigR33J6ZxcroTM8aNg1bv-G7Zg0Czpu1t6cq7Q56PuCsmK1Q5IntwA0qdrdI9Fvnw5Otjt75r-hfVYP8ncPBdxXHHu5p8RAf67SCoSd9SqfcbTt9WPfn-OiOCU_7fucSq61kZqXRrZ0aqW7AMuvFWDPKwzUHT8nw/s320/20221002_004326.png"><div class="aAdmD" data-disc="New" nbps=""><h4>The Pro Project</h4><p class="desC"><span style="color:#f60">The Pro Project.</span>Info................ ............................. ............................... ................................ ................... ......... ............................... ......................... ................ ............................. ............................... ................................ ................... ......... ............................... ......................... ................ ............................. ............................... ................................ ................... ......... ............................... .........................</p><p></p><p>© 2022 ‧<span style="color:#f60">The Pro Project</span>.</p><p></p><p></p></div><div class="aAdmB"><a class="btn" href="https://the-pro-project.blogspot.com/" target="_blank"><svg class="line" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(2.550170, 3.550158)"><path d="M0.371729633,8.89614246 C-0.701270367,5.54614246 0.553729633,1.38114246 4.07072963,0.249142462 C5.92072963,-0.347857538 8.20372963,0.150142462 9.50072963,1.93914246 C10.7237296,0.0841424625 13.0727296,-0.343857538 14.9207296,0.249142462 C18.4367296,1.38114246 19.6987296,5.54614246 18.6267296,8.89614246 C16.9567296,14.2061425 11.1297296,16.9721425 9.50072963,16.9721425 C7.87272963,16.9721425 2.09772963,14.2681425 0.371729633,8.89614246 Z"></path><path d="M13.23843,4.013842 C14.44543,4.137842 15.20043,5.094842 15.15543,6.435842"></path></g></svg>Go to WebSite</a></div></div></div></div>
<style>/* Modern Partner Page by The Pro Project */ .aAdmD[data-disc]:not([data-disc=''])::before{content:attr(data-disc);display:block;font-weight:700;font-size:13px;width:50px;height:50px;padding:10px 0 10px;background:#f5e2f1;border-radius:5px 5px 50px 50px;position:absolute;top:-1px;right:30px}.drK .aAdmD[data-disc]::before{background:#2d2d30}.aAthrP{font-size:0.9rem;color:#08102b}.aAthrP svg{width:18px;height:18px;fill:none !important;stroke:#fefefe;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;margin-right:7px}svg .svgPro{width :90%! important;height:40%! important; margin: 50%; padding:50%;}.webSts svg{stroke:#08102b}.aAdm{padding:60px 0 20px 0}.aAdm .aAdmC{justify-content:center;position:relative;display:flex;max-width:95%;margin:auto;padding:80px 30px 95px 30px;background-color:#fff;box-shadow:0 10px 40px rgba(149,157,165,.2);border-radius:20px}.aAdmC img{position:absolute;top:-60px;background-color:#ffeaef;width:120px;height:120px;box-shadow:0 5px 20px rgba(0,0,0,.2);padding:0;border:7px solid var(--linkC);border-radius:50%;pointer-events:none}.aAdmD{text-align:center; margin-top:-50px;}.aAdmD p{font-size:x-small; margin:0;line-height:1.6em}.aAdmB{text-align:center;position:absolute;bottom:30px;left:0;right:0}.aAdmB .btn{display:inline-flex;align-items:center;margin:0;padding:10px 15px;outline:0;border:0;border-radius:50px;line-height:20px;color:#fefefe;background-color:var(--linkC);font-size:13px;font-family:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer;transition:all 0.3s ease;box-shadow:10px 10px 40px rgba(149,157,165,.2);}.aAdmB .btn:hover{opacity:.8;transform:scale(0.97)}.drK .aAthrP{color:#fffdfc}.drK .aAdmC{background-color:#252526;box-shadow:0 10px 40px rgba(0,0,0,.2)}.drK .aAdmC img{background-image:linear-gradient(to top right,#363636,#717171);border-color:#fffdfc;box-shadow:0 10px 40px rgba(0,0,0,.2)}.drK .aAdmB .btn{background-color:#ffa500}@media screen and (min-width:641px){.aAdm .aAdmC{max-width:97%}.desC:before{content:'';width:0px;display:block;position:relative;bottom:6px;border-bottom:1.5px solid var(--linkC);margin:3px auto;animation:AniAN 3s infinite;-webkit-animation:AniAN 3s infinite; border-radius:25px;}@-webkit-keyframes AniAN{0%{width:20px}50%{width:100px}100%{width:20px}}@keyframes AniAN{0%{width:20px}50%{width:100px}100%{width:20px}}</style>
You can change html texts as you want in the code box!
Step 6: Then Save or Publish.
Step 7: That's done!
Terms of Use
To appreciate our workshop, consider keeping the credits in canons.
We do not allow to rewrite this post in any manner. Do not copy this post, canons or any part from this composition without authorization, it's rigorously prohibited.However, Legal conduct will be taken, If you do so.
Conclusion
In this article I have made a tutorial on How To Make Modern Partner Page in Blogger ? I Hope you have liked this article and please do share with your friends and follow up blog for more.
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © The Pro Project | All Rights Reserved
© Copyright:
www.the-pro-project.blogspot.com
Source:
https://www.sr7themes.eu.org/
https://www.yazidtips.com/