Cara Menciptakan Halaman Partner Blog Valid Amp
Halaman partner blog sebetulnya tidak begitu penting untuk hadir di blog. Itu bagi blogger yang tujuan utamanya ngeblog demi adsense.
Lain halnya dengan seorang blogger yang menimbulkan blog sebagai hobi, salah satunya yah saya. Saya ngeblog sebab hobi.
Hari ini, saya akan memperlihatkan tutorial menciptakan halaman Partner hanya memakai HTML dan CSS, tanpa javascript yang tentunya dengan desain yang keren.
Beberapa hari yang lalu, saya gres saja menciptakan halaman Partner yang akibatnya sanggup kalian lihat pada link berikut Halaman Partner
Tentunya Halaman Partner yang saya buat, sanggup di terapkan di blog Valid AMP maupun Non AMP, sebab dibentuk tanpa memakai javascript.
Baca Juga
Apa sih tujuannya buat halaman Partner ?
Menurut saya itu penting, selain buat gaya gaya-an, kalian juga sanggup saling tukar link, jadi sanggup mampu backlink gratis.
Baik, pribadi saja menuju topiknya.
Cara Membuat Halaman Partner Blog Valid AMP
Untuk menciptakan halaman partner untuk blog AMP kalian hanya membutuhkan HTML dan CSS, untuk itu, yang pertama yang harus kalian lakukan ialah masuk ke Dashboard Blog » Edit HTML.
Selanjutnya tambahkan instruksi CSS berikut ini sempurna 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 gres dengan cara klik Halaman » Buat Halaman. Silahkan beri judul untuk halaman Partner kalian.
Oh iya, pada edit halaman ini, pilih mode HTML yah, bukan mode Compose.
Kemudian masukkan instruksi HTML berikut ini.
<span class="logo-idnxmus">
<amp-img alt="Nama Logo Blogmu" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeoeY14VXlbp4Mf5PsFaxtcKBd66_L6Wy_9gruzj_9knrnliJfZp9_eW4RPvwdUzNbKmb32U7PVeH1g7ClHN2jvEt58as6frMB-ybvGp_YmmNv98b8XiD3C0qOMOiai2-qYNv31F3H4dAy/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkbMoFgXxeiBLGcw9ClfdOeC6xsxlDQjvTw0Ig_-O3QmjOeF7eclndOHlZS0T7X7eoeoSTey5Ni-205GFCeu6OEGfNjApH6bRaFvgteGj4i6Pg19Mtu6M9S6wUfvRR3NNxJTYg4PMMg5NL/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, sanggup di lihat ada beberapa yang saya berikan tanda highlight warna kuning, untuk pertanda code yang harus kalian sesuaikan atau ubah.
Silahkan ubah yang saya beri tanda sesuai keterangan yang tertera.
Untuk menambahkan Partner gres 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/AVvXsEjkbMoFgXxeiBLGcw9ClfdOeC6xsxlDQjvTw0Ig_-O3QmjOeF7eclndOHlZS0T7X7eoeoSTey5Ni-205GFCeu6OEGfNjApH6bRaFvgteGj4i6Pg19Mtu6M9S6wUfvRR3NNxJTYg4PMMg5NL/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 sanggup kalian lihat DEMO melalui JSFiddle di bawah ini.
Masih resah ?
Tinggalkan komentar kalian di bawah, sebisa mungkin akan saya bantu untuk menjelaskan hal yang belum kalian mengerti.
Sumber https://www.idnxmus.com/
