How to Create an AMP Valid Blog Partner Page
AMP Partner pages on blogs are usually created to exchange links between other bloggers. The goal is to improve the position of the blog in Google search results. This time I made a partner page tutorial for users of AMP blog templates because this tutorial uses pure CSS without javascript.What is the purpose for the Partner page?
In my opinion it's important, in addition to making style, you can also exchange links, so you can get free backlinks.
Fine, get to the point.
How to Create an AMP Valid Blog Partner Page
To create a partner page for the 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>.
Or Add through Layout
/*---- Blog Partner ----*/span.logo-idnxmus{text-align:center;display:block} span.logo-idnxmus amp-img{border:5px solid #413965;border-radius:50%;background:#413965} span.logo-idnxmus 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;}
/* Code - ADD Full screen in Blogger Share by Top Blog Pk • Mubassir Ali */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-idnxmus 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 » Create Page. Please give a title for your AMP Partner page .
Oh yes, on editing this page, choose mode HTMLwell, no mode Compose.
Then enter the following HTML code.
<span class="logo-idnxmus"> <amp-img alt="Nama Logo Blogmu" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqwR4nkruswfXOijsaQeZeFtBrwk0jqTl9A8wk36ZG6va-FJ1TFHF0AKagwzeXQ5ZYQvdItORaGAK5MTuCKhqDIMvwxSb68Dhr6_WYl5OLEMiWh3AaLRQoTbVVf5C9o71s0dh3qsl5m60d/s1600/partner-idnxmus.png" title="Nama Logo Blogmu" width="75"></amp-img> </span><div id="blog-partner"> <ul class="blog-partner">/* Code - ADD Full screen in Blogger Share by Top Blog Pk • Mubassir Ali */<li class="partner-wrap" data-tooltip="www.topblogpk.com"> <h3 class="title-partner"><a href="https://topblogpk.blogspot.com" title="Name Blog Partner" rel="nofollow noopener" target="_blank">NAME BLOG PARTNER </a></h3> <div class="deskripsi-partner"> <span class="logo-partner" id="Top Blog Pk" data-tooltip="TopBlog Pk"> <amp-img alt="Name logo Partner" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrRhe-34Xu32fMfUB76aY2UC91Tw5b-_ILLDHnGtS_Xc1CcbHETNSvV1yra4edImK-rO7LPOhXMcHenGd6hsNTmlx8UtEOwv0O_Mk2HwzbGMg5l1zQ8b0nBnx0HNkVXffpLBPYn78BM3DP/s1600/logo-part.png" title="Name Logo Partner" width="75"></amp-img> </span> <p> BLOG DESCRIPTION HERE </p> </div> </li></ul> </div>
In the HTML Codeabove, you can see that there are a few that I highlighted in yellow, to indicate the code that you must adjust or change.
Please change the ones I marked according to the information listed.
To add a new Partner simply add the following HTML Code above the tag </ul>
<li class="partner-wrap" data-tooltip="www.topblogpk.com"> <h3 class="title-partner"><a href="https:// topblogpk.blogspot.com" title="Name Blog Partner" rel="nofollow noopener" target="_blank">NAME BLOG PARTNER</a></h3> <div class="deskripsi-partner"> <span class="logo-partner" id="Top Blog Pk" data-tooltip="TopBlog Pk"> <amp-img alt="Name Logo Partner" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrRhe-34Xu32fMfUB76aY2UC91Tw5b-_ILLDHnGtS_Xc1CcbHETNSvV1yra4edImK-rO7LPOhXMcHenGd6hsNTmlx8UtEOwv0O_Mk2HwzbGMg5l1zQ8b0nBnx0HNkVXffpLBPYn78BM3DP/s1600/logo-part.png" title="Name Logo Partner" width="75"></amp-img> </span> <p> Description Blog Here </p> </div> </li>
Please change the ones I marked according to the information stated.
Still confused ?
Leave your comments below, as much as possible I will help to explain things that you do not understand.