Partner Amp : Untuk Blog yang Menggunakan Template Valid AMP

Partner Amp

Suhux.com – Agan Menggunakan Template blogger Valid AMP? Agan ingin menjalin hubungan (Partner AMP) dengan sesama Blogger lain untuk saling bertukar link yang agan buat di halaman (page) blog?, iya…..?

Ok. Fix..

Menjalin hubungan dengan sesama blogger yang lain dengan cara saling bertukar Link (backlink gratis) sudah menjadi rahasia umum bagi para blogger. Tujuannya adalah untuk meningkatkan posisi blog mereka di hasil pencarian Mbah google. Karena dengan bertukar link, blog mereka saling menguntungkan dan menguatkan satu sama lain (simbiosis mutualisme)

Kali ini Suhu X akan memberikan tutorial Cara membuat halaman Partner untuk pengguna template blog Valid AMP, agar halaman (Static page) partner blog agan bisa valid amp dan pastinya blog agan tambah meroket di pencarian Google.

Apakah Halaman Statis (Static Page) partner template valid AMP berbeda dengan template non-AMP?

Sudah pasti..

Template Valid AMP tidak ada Javascript di dalamnya. Sehingga tutorial yang anda baca sekarang sudah pasti tidak terdapat Javascript, yang ada hanya pure CSS.

Apakah Partner AMP yang untuk template valid AMP ini bisa diterapkan pada template non AMP?

Ya..  Sangat bisa sekali. Malah itu lebih baik.

Why?

Karena dalam Code Partner template valid AMP ini tidak menggunakan javascript, dan Javascript adalah salah satu komponen yang dapat membuat kinerja blog jadi lambat.

Tapi agan jangan khawatir, Walaupun halaman Partner Valid AMP ini hanya menggunakan HTML dan CSS, tanpa melibatkan javascript sama sekali, tampilan Partner AMP ini sangat keren.

Btw, Partner yang dikhususkan Untuk blog AMP ini termasuk karya Mas Abdul Mustahab, pemilik IDNXMUS

Oke…  lanjut…

Sekarang Langsung saja kita terapkan tutorial berikut ini di Halaman Statis (Static Page) agan.

Cara Membuat Halaman Statis (Static Page) Partner Blog Valid AMP

Untuk membuat halaman Partner AMP ini, agan hanya membutuhkan HTML dan CSS. Untuk itu, yang harus agan lakukan adalah :

Pertama, masuk ke Dashboard Blog » Edit HTML.

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

/*---- Blog Partner ----*/ span.logo-ataeh{text-align:center;display:block} span.logo-ataeh amp-img{border:5px solid #413965;border-radius:50%;background:#413965} span.logo-ataeh 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-ataeh 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.

Ketiga, buatlah sebuah halaman baru dengan cara klik Halaman » Buat Halaman.
Silahkan agan beri judul untuk halaman Partner AMP agan.
Lalu, pilihlah mode HTML, bukan mode Compose.

Keempat, masukkan kode HTML berikut ini.

<span class="logo-ataeh"> <amp-img alt="Nama Logo Blogmu" height="75" src="https://4.bp.blogspot.com/-kRbWy6CPHC4/Wpk6DcbFerI/AAAAAAAAABU/rsJ-C0XPsxEP2MokvVYOpjEjTMBWBTX1wCPcBGAYYCw/s1600/ataeh.blogspot.com.jpg" title="Nama Logo Blogmu" width="75"></amp-img> </span> <div id="blog-partner"> <ul class="blog-partner"> <li class="partner-wrap" data-tooltip="https://blogpartnermudotcom"> <h3 class="title-partner"><a href="https://www.blogpartnermudotcom" 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 kode HTML di atas, ada beberapa yang saya berikan tanda highlight warna biru, ini untuk menandakan code yang harus agan sesuaikan atau ubah.

Silahkan ubah yang saya beri tanda sesuai keterangan yang tertera.

Kalau agan mau menambahkan anggota Partner baru, agan cukup menambahkan HTML Code berikut di atas tag </ul>

<li class="partner-wrap" data-tooltip="https://blogpartnermudotcom"> <h3 class="title-partner"><a href="https://www.blogpartnermudotcom" 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 melihat hasilnya, silahkan Agan klik DEMO di bawah ini

DEMO

Bagaimana, cukup mudahkan?

Kalau masih bingung, silahkan tanyakan pada kolom komentar di bawah, Insya Allah saya akan membantu dan menjelaskan sebisa mungkin hal yang mana yang agan belum mengerti.