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