Want more tutorials? Request!

How To Make Modern Partner Page in Blogger ?

Today In this session we gonna guide you "How To Make Modern Partner Page in Blogger ?" In Blogger which will amaze you.
© SR7Themes | Modern Partner Page
© SR7Themes | Modern Partner Page

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.

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> or /*]]>*/</style> and paste the following CSS Codes just above to it.

/* Modern Partner Page by SR7Themes */
.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.

<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/a/AVvXsEj7VuZ0RDGZROcDnzqRKzRw1WCgj3fhqyj0pTWqYcBU80euEDvjXrZMsDbgpgCEDs9k-aq5AysiSF26h-lRde2UAjJsObW35U9eV9DFqmrElsPZKXtrIInJ20pkfCDWAcDO1mDZpzDXkdF44TJgT4AzunT3pc1bbXPdOosQgsiSiVGNiIl6j3jAnmoR=s800" /><div class="aAdmD" data-disc="New" nbps=""><h4>SR7Themes</h4><p class="desC"><span style="color: #ff6600;">

SR7Themes.</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;">SR7Themes</span>.</p><p></p><p></p></div><div class="aAdmB"><a class="btn" href="https://www.sr7themes.eu.org/" 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 8: That's done!

Terms of Use

To appreciate our works, consider keeping the credits in codes.

We don't allow to rewrite this post in any manner. Don't copy this post, codes or any part from this article without Permission, it is strictly prohibited. If you do so, Legal Actions will be taken.

About the Author

Hey there! My name is Saim Rahmani aka Saim, a professional Web Designer, Graphic Designer, UI / Blogger as well as Content Creator. I love to Code

Buy Me A Coffee

تعليق واحد

  1. Hope 😊, You may like the post. Please share if you find this helpful !
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
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.