AMP Partner Pages on blogs are usually created to exchange links between other bloggers. The goal is to increase the position of the blog in Google search results. This time, the tutorial to create a partner page is aimed at AMP blog template users because this tutorial uses pure CSS without javascript.
The Partner Blog page is not really that important to be on the blog. That's for bloggers whose main purpose is blogging for adsense.
It's different with a blogger who makes blogging as a hobby, one of them is me. I blog for a hobby.
Today, I will provide a tutorial to create a Partner page using only HTML and CSS, without javascript which is of course a cool design.
A few days ago, I just created a Partner page, the results you can see on the following link NQnia Partner Page
Of course, the Partner Page that I created can be applied to both AMP and Non AMP Valid blogs , because it was created without using javascript.
What is the goal for the Partner page?
In my opinion, it is important, besides creating a stylish style, you can also exchange links, so you can get free backlinks.
Okay, just get to the topic.
How to Create a Valid AMP Blog Partner Page
To create a partner page for your AMP blog you only need HTML and CSS, for that, the first thing you have to do is go to Dashboard Blog » Edit HTML.
Next, add the following CSS code just below the code <style amp-custom>.
/*---- Blog Partner ----*/
span.logo-nqnia{text-align:center;display:block}
span.logo-nqnia amp-img{border:5px solid #413965;border-radius:50%;background:#413965}
span.logo-nqnia amp-img img{border-radius:50%}
ul.blog-partner{list-style:none;margin:0;padding:80px 0 0;position:relative}
ul.blog-partner:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-39%);background:#0177FA;width:8px;height:8px;border-radius:50%}
ul.blog-partner:after{content:"";position:absolute;top:0;bottom:0;left:50%;background:#0177FA;width:2px;z-index:1}
li.partner-wrap{background:#FFF;border:2px solid #0177FA;border-radius:5px;margin-bottom:50px;padding:20px;position: relative;z-index:2}
li.partner-wrap:before{content:"";position:absolute;width:16px;height:16px;left:50%;transform:translateX(-45%);top:-11px;background:#FFF;border:2px solid #0177FA;border-radius:50%}
h3.title-partner{border-bottom:2px solid #aaa;text-align:center;padding-bottom:10px;margin-bottom:20px}
h3.title-partner a {text-decoration: none;}
span.logo-partner amp-img{border:5px solid #0177FA;border-radius:50%;background:#0177FA;z-index: 1;}
span.logo-partner amp-img img{border-radius:50%}
span.logo-partner{margin-right:20px;position:relative;font-size:12px}
span.logo-partner:before,span.logo-partner:after{position:absolute;white-space:nowrap;left:60px;border-radius:0 5px 5px 0;padding:4px 10px 4px 20px;opacity:0;}
span.logo-partner:before{content:attr(id);background:#21ef8b;color:#242038;top:15px;transition: all .6s ease;}
span.logo-partner:after{content:attr(data-tooltip);background:#3498db;color:#fff;top:45px;transition: all 1.2s ease;}
li.partner-wrap:hover .deskripsi-partner .logo-partner:before, li.partner-wrap:hover .deskripsi-partner .logo-partner:after {opacity: 1;left: 70px;}
.deskripsi-partner{display:flex;margin-bottom: 25px;align-items: center;}
.deskripsi-partner p{display:block;margin:0;text-align: justify;color: #212121;}
li.partner-wrap:after{content:attr(data-tooltip);position:absolute;right:-1px;bottom:0;background: #0177FA;color: #FFF;padding: 0 10px;border-radius: 5px 0 0 0;font-size: 14px;}
li.partner-wrap:hover::before {-webkit-animation: pulse 1.2s infinite;box-shadow: 0 0 0 0 rgba(90,153,212,0.5);left: 48.92%;}
li.partner-wrap:hover .deskripsi-partner .logo-partner amp-img {transform: rotate(360deg);transition: all .8s ease;}
span.logo-partner amp-img, span.logo-nqnia amp-img {box-shadow:0 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0 rgba(0,0,0,0.14),0px 1px 10px 0 rgba(0,0,0,0.12);}
@-webkit-keyframes pulse{0%{-moz-transform:scale(0.9);-ms-transform:scale(0.9);-webkit-transform:scale(0.9);transform:scale(0.9)}70%{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);box-shadow:0 0 0 50px rgba(90,153,212,0)}100%{-moz-transform:scale(0.9);-ms-transform:scale(0.9);-webkit-transform:scale(0.9);transform:scale(0.9);box-shadow:0 0 0 0 rgba(90,153,212,0)}}
@media screen and (max-width: 530px){
li.partner-wrap:hover::before {left: 47.4%;}
.deskripsi-partner {display: block;}
span.logo-partner {margin:0 auto;display: table;}
li.partner-wrap:hover .deskripsi-partner .logo-partner:before, li.partner-wrap:hover .deskripsi-partner .logo-partner:after {left: 80%;}
span.logo-partner:before, span.logo-partner:after {left: 60%;}
}
After that click Save, to save changes.
Continue, create a new page by clicking Page» For Page. Please give a title for your AMP Partner page .
By the way, on this edit page, choose yes mode HTML, no mode Compose.
Then enter the following HTML co
<span class="logo-nqnia">
<amp-img alt="Name your Blog Logo" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAEPJLF2Outbp_PB9VVGZZBeEc60o_kh-rOxg3J3VdpRQLyPBRHdRl0lmDfizgP4PDC4YHbcko4k3kM8Q3BssCWqgrPnh4Km6PD9IXdqTH5ONIemyEVwIHpcC5FikeNno438xa35cJurg/s1600/NQNia+%25282%2529.png" title="Name your Blog Logo
" width="75"></amp-img>
</span>
<div id="blog-partner">
<ul class="blog-partner">
<li class="partner-wrap" data-tooltip="NQnia.blogspot.com">
<h3 class="title-partner"><a href="http://bit.ly/2BZyxbe" title="Your Partner's Blog Name" rel="nofollow noopener" target="_blank">NAME OF YOUR PARTNER BLOG</a></h3>
<div class="deskripsi-partner">
<span class="logo-partner" id="Your Partner's Niche Blog" data-tooltip="Name of Blog Partner Owner">
<amp-img alt="Nama Logo Partner" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibJEfQWPFyb6RoC61kkhPt7OECqoeaLQfZDSBavvrX_seCvCQI64gT-OTyxU7dyRDEEpChk9W4bqzRAcG6U0-fCjevmQdrRYcJD-bMhDd3EuiwwWq3rDsU-Wm3FeGKMf1-4BFXmqqjLy4-/s1600/logo-part.png" title="Partner Logo Name" width="75"></amp-img>
</span>
<p>
Your Partner's Blog Description
</p>
</div>
</li>
</ul>
</div>
In the HTML Code above, you can see that there are several that I highlighted in yellow, to indicate the code that you have to adjust or change.
Please change what I marked according to the information listed.
To add a new partner, just add the following HTML code above the tag </ul>
<li class="partner-wrap" data-tooltip="NQnia.blogspot.com">
<h3 class="title-partner"><a href="http://bit.ly/2BZyxbe" title="Your Partner's Blog Name" rel="nofollow noopener" target="_blank">NAME OF YOUR PARTNER BLOG</a></h3>
<div class="deskripsi-partner">
<span class="logo-partner" id="Your Partner's Niche Blog" data-tooltip="Name of Blog Partner Owner">
<amp-img alt="Name your Partner Logo" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibJEfQWPFyb6RoC61kkhPt7OECqoeaLQfZDSBavvrX_seCvCQI64gT-OTyxU7dyRDEEpChk9W4bqzRAcG6U0-fCjevmQdrRYcJD-bMhDd3EuiwwWq3rDsU-Wm3FeGKMf1-4BFXmqqjLy4-/s1600/logo-part.png" title="Partner Logo Name" width="75"></amp-img>
</span>
<p>
Your Partner's Blog Description
</p>
</div>
</li>