Cara Membuat Halaman Partner Blog Valid AMP

Halaman partner blog valid AMP akan sangat mudah dibuat karena tidak perlu menggunakan javascript.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU3yrNBnpTJllL9LfAdGhcLzXA7_rdMXMgOxh65HxhxMHNs0Secc9M4OI8odvSQbsLLV2ANZ4qDkKbVXgc8YrkvAtdKc8lBpW6FjE9-RtKgNlmLGSeaNvN_Yts62UJktpAYPTQYE67qTMt/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/AVvXsEgGrOojh1Web8tEPC8BqvHIMzJ85-b5pVMHOHScV8eCNr1mkvtKpBiIM43KpMkZb2yf7KeZ2N9vIOhyphenhyphenGshCAKy01jBezmPXVp2Omj05ELolKHjy8vlz9go_2v76xGxnu81a3mXFMnqs1AGU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGrOojh1Web8tEPC8BqvHIMzJ85-b5pVMHOHScV8eCNr1mkvtKpBiIM43KpMkZb2yf7KeZ2N9vIOhyphenhyphenGshCAKy01jBezmPXVp2Omj05ELolKHjy8vlz9go_2v76xGxnu81a3mXFMnqs1AGU/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.

18 komentar

@ataeh 12/28/2018 07:49:00 PM

Ini nih yang saya cari....
Btw, mau gak min partner jg ma saya...
- A. Abdul Mustahab ツ 1/06/2019 01:56:00 PM
  
  silahkan coba di terapkan. kalau untuk jadi partner blog idnxmus belum saya buka, itu masih percobaan. nanti di infokan melalui halaman partner blog ini jika sudah bisa.
Unknown 1/06/2019 12:42:00 PM

kalo untuk template non amp bisa gak mas gunakan kode itu jika kita ganti <amp-img alt="..... menjadi <img alt="...
- A. Abdul Mustahab ツ 1/06/2019 01:53:00 PM
  
  yap, benar sekali. untuk blog Non-AMP cukup ganti semua kode <amp-img> menjadi <img> yang ada pada HTML dan CSSnya.
Secret Upil 1/22/2019 12:29:00 PM

Maaf mas oot, bagaimana cara membuat komentar blogger menjadi amp seperti diblog ini? hingga bisa di reply
- A. Abdul Mustahab ツ 1/25/2019 12:41:00 PM
  
  tidak semua tampilan di blog ini valid AMP. coba buka artikel saya lewat google search, pas klik "beri komentar" pasti redirect ke halaman non-amp karena komentar blogger tidak valid AMP.
- Info 1/16/2020 01:36:00 PM
  
  Tp kok bisa di hasil penelusuran valid AMP ya?
  
  Punya saya juga AMP ingin pakai komentar blogger terbaru.. tp kalau ke non AMP, saya terlanjur cinta dengan AMP, sekejap terbuka..
- A. Abdul Mustahab ツ 1/16/2020 09:57:00 PM
  
  valid amp karena pada halaman AMP tdk saya pasang komentar, hanya ada tombol Beri Komentar. yang kalo di klik bakar masuk ke halaman non-amp.
  Blog ini valid amp di url amp=1, sedangkan di url asli bukan amp.
Andrie Kristianto 1/27/2019 11:49:00 PM

yang blogspot dong bang
- Andrie Kristianto 1/27/2019 11:55:00 PM
  
  ohh udah ya, tinggal hapus amp-img ke img nya, okee thankss, kalo ak modifikasi border kotaknya gapapa kan bang? sama transisi namanya itu.. nnti saya infokan dari sini dah
- A. Abdul Mustahab ツ 1/28/2019 06:16:00 AM
  
  silahkan di modifikasi sesuka hati..
Reno Naufal Maulidyan 3/23/2019 06:42:00 PM

kok di template saya nggak ada kode <style amp..
- A. Abdul Mustahab ツ 3/24/2019 05:44:00 PM
  
  kalau pakai template AMP pastinya ada code <style amp-custom='amp-custom'>
Unfaedah 5/29/2019 06:31:00 AM

Jika memakai template non amp kan tidak ada kode < style amp-custom='amp-custom'> berarti harus gmana mas ?
- A. Abdul Mustahab ツ 5/29/2019 11:25:00 AM
  
  untuk non-amp simpan css di bawah tag <style> dan ubah tag amp-img menjadi img
- Unfaedah 5/29/2019 05:27:00 PM
  
  Oke mas terimakasih infonya, izin praktek mas🙏
Isat Jerry 11/17/2019 10:04:00 AM

wah, ini yang saya cari,,,,sangat membantu gan,,,animasinya juga keren,,,izin gunakan gan???
Berbagi Tutorial Online 3/31/2020 01:02:00 PM

Mantab gan tutorialnya, thanks