Partner Amp : Untuk Blog yang Menggunakan Template Valid AMP

Partner Amp

Suhux.com - Agan Menggunakan Template Valid AMP? Agan ingin menjalin hubungan (Partner) dengan sesama Blogger untuk saling bertukar link?

Ok. Fix..

Banyak para blogger yang menjalin hubungan dengan sesama blogger yang lain dengan cara saling bertukar Link (backlink gratis) yang tujuannya adalah untuk meningkatkan posisi blog di hasil pencarian Mbah google.

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.

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

Ya... Beda..

Karena pada Template Valid AMP tidak akan bisa valid kalau di dalamnya ada Javascript. Sedangkan tutorial yang ini, hanya menggunakan pure CSS.

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

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

Alasannya adalah karena dalam Code Partner template valid AMP ini tidak menggunakan javascript, dan Javascript adalah salah satu hal yang dapat memperlambat laju kecepatan blog.

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.

Oke...  Bisa dipahami gan?

Oke.. Langsung saja terapkan apa yang suhu X jelaskan berikut ini di Halaman Statis (Static Page) agan.

Partner Amp Untuk Blog yang Menggunakan Template 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>.


/*---- 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


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.
data:post.title
Seseorang yang lebih suka menulis dan membagikan apa yang di tuliskan agar dunia tahu.
  • Facebook
  • WhatsApp
  • Instagram
  • Berlangganan update artikel terbaru via email:

    0 Response to "Partner Amp : Untuk Blog yang Menggunakan Template Valid AMP"

    Post a comment