How To Make Modern Partner Page in Blogger ?

Hello, Bloggers! Welcome to Raghavendra Technic.

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, it does not, it is made using Vanilla Javascipt

Will it work in all templates?

Yes, As it is only javascript no more coding knowledge required.

How To Make Modern Partner Page in Blogger ?

Creating a Modern Partner Page will not require much knowledge about HTML, CSS or JS because I have already designed it for you. What you need to do is to implement the codes at right place in your Blogger Theme XML.

Before we start let's take a look at its Demo.

View Demo

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 Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.

/* Modern Partner Page by (T_Mk) */ .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}}

Step 6: Paste the following HTML codes in your Modern Partner Page in your Blogger.

<div class="aAthrP"><div class="aAdm"><div class="aAdmC">
<img alt="partner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih4Xv0l2DAJWxcaXBrp_kdMVNFTfjolecP8sHyxvtVVGB615Vh5cLb8HxdJjq5kWDoC1Y7pp96RzC3V5sgjYANJ62A2WqpwLFUtuAHBqPnENQd1CRdw3tz0DloFQm_gLOqNaBRB-KXaQmHBe723PSqP-4CagCg7ZDTcp_B5-SE8vryN5qvwKh5aaVOcA/s3264/20220812_120814.png" /><div class="aAdmD" data-disc="New" nbps=""><h4>Raghavendra Technic</h4><p class="desC"><span style="color: #ff6600;">Raghavendra Technic.</span> is a Best website for downloading premium awesome and responsive blogger templates for free and cool blogger widgets just for free !  </p><p></p><p>© 2022 ‧ <span style="color: #ff6600;"> Raghavendra Technic </span>.</p><p></p><p></p></div><div class="aAdmB"><a class="btn" href="https://raghavendratechnic.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>

Step 7: Now click on Save by clicking this icon

Step 8: That's done!

---

Credit

Created by :
Sr7themes.

Conclusion

In this article I have made a tutorial on How To Make Modern Partner Page in Blogger ?. I hope you have liked it and Please do share with your friends and follow our blog for more

If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.

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. © Raghavendra Technic | All Rights Reserved

© Copyright:
raghavendratechnic.blogspot.com