Pada kesempatan kali ini saya akan memberikan tutorial bagaimana Cara Mudah Membuat Halaman Partner Blog Valid AMP Dan Non AMP. Halaman Partner pada blog biasanya dibuat untuk menjalin kerja sama antar komunitas blogger diantaranya melakukan pertukaran link antar blogger lain dan mendapat backlink, tujuannya untuk meningkatkan posisi blog di hasil pencarian google.
Tutorial ini saya dapat dari blog terkenal IDNXMUS, jadi disini saya hanya menshare kembali tutorial tersebut, karna berhasil saya terapkan pada blog saya. Tutorial membuat halaman Partner ini hanya menggunakan HTML dan CSS.
Tanpa menggunakan javascript sehingga bisa di terapkan di blog Valid AMP maupun Non AMP. Jadi bagi kalian yang tetarik untuk memasang Halaman partner pada blog anda, maka silahkan ikuti tutorial di bawah ini.
Cara Mudah Membuat Halaman Partner Blog Valid AMP Dan Non AMP
1. Login Blogger > Edit HTML.
2. Selanjutnya tambahkan kode CSS berikut ini tepat di bawah code <style amp-custom>
/*---- Blog Partner ----*/
span.logo-goindoti{text-align:center;display:block}
span.logo-goindoti amp-img{border:5px solid #413965;border-radius:50%;background:#413965}
span.logo-goindoti 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-goindoti 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%;}
}3. Setelah itu klik Simpan.
4. Buatlah sebuah halaman baru dengan cara klik Halaman > Buat Halaman. Silahkan beri judul untuk halaman Partner AMP kalian. Pada edit halaman ini, pilih mode HTML, bukan mode
5. Kemudian masukkan kode HTML berikut ini.
<span class="logo-goindoti">
<amp-img alt="Nama Logo Blogmu" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUwKUCzFuTNN5hi7j-POp33qHg60CfnuDEhGB_hktZMrCVEIKfyYN6u_F6e1nGHsXDxpDctHmMLGeeeLa1OPaxGMngVZCmNL-3hySyAjMA5naz25USsLVi21A1aThCuyRrGKn_fEjz08_/s1600/Goindoti.png" title="Nama Logo Blogmu" width="75"></amp-img>
</span>
<div id="blog-partner">
<ul class="blog-partner">
<li class="partner-wrap" data-tooltip="www.blogpartnermu.com">
<h3 class="title-partner"><a href="https://www.blogpartnermu.com" title="Nama Blog Partnermu" rel="nofollow noopener" target="_blank">NAMA BLOG PARTNERMU</a></h3>
<div class="deskripsi-partner">
<span class="logo-partner" id="Niche Blog Partnermu" data-tooltip="Nama Pemilik Blog Partner">
<amp-img alt="Nama Logo Partner" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUwKUCzFuTNN5hi7j-POp33qHg60CfnuDEhGB_hktZMrCVEIKfyYN6u_F6e1nGHsXDxpDctHmMLGeeeLa1OPaxGMngVZCmNL-3hySyAjMA5naz25USsLVi21A1aThCuyRrGKn_fEjz08_/s1600/Goindoti.png" title="Nama Logo Partner" width="75"></amp-img>
</span>
<p>
Deskripsi Blog Partnermu
</p>
</div>
</li>
</ul>
</div>6. Pada HTML Code di atas, dapat di lihat ada beberapa yang saya berikan tanda highlight warna kuning, untuk menandakan code yang harus kalian sesuaikan atau ubah. Silahkan ubah yang saya beri tanda sesuai keterangan yang tertera.
7. Untuk menambahkan Partner baru cukup menambahkan HTML Code berikut di atas tag </ul>
<li class="partner-wrap" data-tooltip="www.blogpartnermu.com">
<h3 class="title-partner"><a href="https://www.blogpartnermu.com" title="Nama Blog Partnermu" rel="nofollow noopener" target="_blank">NAMA BLOG PARTNERMU</a></h3>
<div class="deskripsi-partner">
<span class="logo-partner" id="Niche Blog Partnermu" data-tooltip="Nama Pemilik Blog Partner">
<amp-img alt="Nama Logo Partner" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUwKUCzFuTNN5hi7j-POp33qHg60CfnuDEhGB_hktZMrCVEIKfyYN6u_F6e1nGHsXDxpDctHmMLGeeeLa1OPaxGMngVZCmNL-3hySyAjMA5naz25USsLVi21A1aThCuyRrGKn_fEjz08_/s1600/Goindoti.png" title="Nama Logo Partner" width="75"></amp-img>
</span>
<p>
Deskripsi Blog Partnermu
</p>
</div>
</li>8. Silahkan ubah lagi yang saya beri tanda sesuai keterangan yang tertera.
Demikian tutorial bagaimana Cara Mudah Membuat Halaman Partner Blog Valid AMP Dan Non AMP. Jika ada hal yang kurang dipahami silahkan tinggal kan pesan anda di kolom komentar, semoga informasinya bermanfaat dan sampai jumpa di postingan berikutnya.
Sumber Referensi : IDNXMUS