Suhux.com – Agan Menggunakan Template blogger Valid AMP? Agan ingin menjalin hubungan (PartnerAMP) 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 templatevalid 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 link partner untuk template blogger valid AMP
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>.
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>
<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
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.