Cara Membuat Halaman Partner Blog Valid AMP

Halaman Partner AMP pada blog biasanya dibuat untuk saling bertukar link antar blogger lain. Tujuannya untuk meningkatkan posisi blog di hasil pencarian google. Kali ini tutorial membuat halaman partner saya tujukan untuk pengguna template blog AMP karena tutorial ini menggunakan pure CSS tanpa javascript.

Halaman Partner Blog sebenarnya tidak begitu penting untuk hadir di blog. Itu bagi blogger yang tujuan utamanya ngeblog demi adsense.

Lain halnya dengan seorang blogger yang menjadikan blog sebagai hobi, salah satunya yah saya. Saya ngeblog karena hobi.

Hari ini, saya akan memberikan tutorial membuat halaman Partner hanya menggunakan HTML dan CSS, tanpa javascript yang tentunya dengan desain yang keren.

Beberapa hari yang lalu, saya baru saja membuat halaman Partner yang hasilnya bisa kalian lihat pada link berikut Halaman Partner IDNXMUS

Tentunya Halaman Partner yang saya buat, bisa di terapkan di blog Valid AMP maupun Non AMP, karena dibuat tanpa menggunakan javascript.

Apa sih tujuannya buat halaman Partner ?

Menurut saya itu penting, selain buat gaya gaya-an, kalian juga bisa saling tukar link, jadi bisa dapat backlink gratis.

Baik, langsung saja menuju topiknya.

Cara Membuat Halaman Partner Blog Valid AMP

Untuk membuat halaman partner untuk blog AMP kalian hanya membutuhkan HTML dan CSS, untuk itu, yang pertama yang harus kalian lakukan adalah masuk ke Dashboard Blog » Edit HTML.

Selanjutnya tambahkan kode CSS berikut ini tepat di bawah code <style amp-custom>.

/*---- 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;}
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%;}
}

Setelah itu klik Simpan, untuk menyimpan perubahan.

Di lanjutkan, buatlah sebuah halaman baru dengan cara klik Halaman » Buat Halaman. Silahkan beri judul untuk halaman Partner AMP kalian.

Oh iya, pada edit halaman ini, pilih mode HTML yah, bukan mode Compose.

Kemudian masukkan kode HTML berikut ini.

<span class="logo-idnxmus">
<amp-img alt="Nama Logo Blogmu" height="75" src="https://2.bp.blogspot.com/-fsWGnHF-HCw/XAu871EJmTI/AAAAAAAAES0/4fDhvQi7A6Afli3rY65zR0IM8A_ztxpPACLcBGAs/s1600/partner-idnxmus.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://2.bp.blogspot.com/-It-oVVf9Cf0/XAu5iwhK1AI/AAAAAAAAESs/iGoLAczKBFMTW1FozfyphUFeFZiaD7kQACPcBGAYYCw/s1600/logo-part.png" title="Nama Logo Partner" width="75"></amp-img>
</span>
<p>
Deskripsi Blog Partnermu
</p>
</div>
</li>

</ul>
</div>

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.

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://2.bp.blogspot.com/-It-oVVf9Cf0/XAu5iwhK1AI/AAAAAAAAESs/iGoLAczKBFMTW1FozfyphUFeFZiaD7kQACPcBGAYYCw/s1600/logo-part.png" title="Nama Logo Partner" width="75"></amp-img>
</span>
<p>
Deskripsi Blog Partnermu
</p>
</div>
</li>

Silahkan ubah lagi yang saya beri tanda sesuai keterangan yang tertera.

Untuk lebih jelasnya dapat kalian lihat DEMO melalui JSFiddle di bawah ini.

Masih bingung ?

Tinggalkan komentar kalian di bawah, sebisa mungkin akan saya bantu untuk menjelaskan hal yang belum kalian mengerti.

Cuma anak kemarin sore. Email kerjasama ke idnxmus@gmail.com

Baca Juga Nih

Ada 14 Caci Maki

Aturan Komentar :
Centang "Beritahu Saya" atau "Notify Me" untuk mendapatkan notifikasi balasan komentar via Email.
Gunakan tag HTML < em > untuk menuliskan potongan code atau URL. Contoh : < em >isi pesan< /em >
BUKA KOMENTAR