Cara Mudah Membuat Halaman Partner Blog AMP & Non-AMP

Halaman Partner Blog merupakan suatu halaman yang berfungsi untuk menampilkan list Partner Blog sebagai salah satu sarana saling bertukar link antara Blogger satu dengan blogger lain. Dengan Adanya halaman Parner dalam suatu blog dapat meningkatkan tali silaturahmi dan saling mengenal antar Blogger satu dengan Blogger lainnya menjalin suatu pertemanan yang saling menguntungkan.



Dengan cara ini Anda akan mendapat banyak teman Blogger baru dengan latar belakang yang berbeda-beda. Bisa saling sharing dan berbagi ilmu pengetahuan dan yang tidak kalah penting adalah mendapatkan backlink secara geratis dengan saling bertukar link yang dapat meningkatkan kwalitas blog di mata search engine seperti google dengan adanya keterkaitan antara blog satu dengan blog lainnya.

Berikut ini Panduan Tutorial Cara Mudah Membuat dan Memasang Halaman Partner Blog AMP dan Non AMP, silahkan sesuaikan dengan type Blog Anda masing-masing Apakah AMP atau Non-AMP.

Cara Membuat dan Memasang Halaman Partner Blog Valid AMP

1. Buka Dashboard Blogger kemudian Klick Menu Tema pilih EDIT HTML

2. Cari dan Temukan kode <style amp-custom='amp-custom'> dan letakkan kode berikut ini tepat di bawahnya:

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


3. Klick Simpan Tema  untuk menerapkan

4. Buat Postingan berupa halaman melalui Dashboard Blogger Klick Halaman kemudian Buat Halaman Baru. Salin Kode Berikut ini dan tempelkan dalam Mode HTML. Ingat ya mode HTML bukan Compose.

 
<span class="logo-blog">
<amp-img alt="Nama Logo Blog Anda" height="75" src="URL Link Logo Blog Anda" title="Nama Logo Blog Anda" width="75"></amp-img>
</span>

<div id="blog-partner">
<ul class="blog-partner">
<li class="partner-wrap" data-tooltip="www.blogpartner.com">
<h3 class="title-partner">
<a href="https://www.blogpartner.com/" rel="nofollow noopener" target="_blank" title="Nama Blog Partner">NAMA BLOG PARTNER</a></h3>
<div class="deskripsi-partner">
<span class="logo-partner" data-tooltip="Nama Pemilik Blog Partner" id="Niche Blog Partner">
<amp-img alt="Nama Logo Partner" height="75" src="URL Link Logo Blog Partner" title="Nama Logo Partner" width="75"></amp-img>
</span>
<br />
Deskripsi Blog Partner
</div>
</li>
----------- Tambahkan Disini ------------
</ul>
</div>


5. Sesuaikan point-point penambahan Partnet Blog berdasarkan petunjuk yang ada.

6. Setelah dirasa cukup dan selesai menambahkan input data Blog Partner Klick Publikasikan, jangan lupa untuk memberikan deskripsi halaman sebelum mempublikasikannya.

Untuk menambahkan Blog Partner Baru gunakan kode HTML berikut ini sebelum </ul>


<li class="partner-wrap" data-tooltip="www.blogpartner.com">
<h3 class="title-partner">
<a href="https://www.blogpartner.com/" rel="nofollow noopener" target="_blank" title="Nama Blog Partner">NAMA BLOG PARTNER</a></h3>
<div class="deskripsi-partner">
<span class="logo-partner" data-tooltip="Nama Pemilik Blog Partner" id="Niche Blog Partner">
<amp-img alt="Nama Logo Partner" height="75" src="URL Link Logo Blog Partner" title="Nama Logo Partner" width="75"></amp-img>
</span>
<br />
Deskripsi Blog Partner
</div>
</li>


Berikut ini Demo Halaman Partner Blog Valid AMP

Cara Membuat dan Memasang Halaman Partner Blog Non-AMP

1. Buka Dashboard Blogger kemudian Klick Menu Tema pilih EDIT HTML

2. Cari dan Temukan kode </head> dan letakkan kode berikut ini tepat di atasnya
 
<!-- CSS Partner List GoSEO.id -->
<style type="text/css">
.bg-merah{
background-color: #EC7777 !important;
}
.timeline{
border-left: 5px solid #B0B0B0;
margin:0px;
padding: 0px;
height: 100%;
padding: 10px;
padding-top: 0px;
margin-left:50px;
}
.timeline li{
list-style: none;
margin-top:10px;
margin-left: 20px;
margin-bottom: 20px;
}
.timeline li .bulet{
width: 30px;
height: 30px;
margin-left: -49px;
padding: 3px;
color: #fff;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
border-radius:100px;
position: absolute;
text-align: center;
}
.timeline li .box-time{
width: 60px;
padding: 5px;
background-color: #F26248;
color: #fff;
height: 20px;
box-shadow:0 3px 4px #949494;
margin-left: -70px;
position: relative;
margin-bottom: 20px;
border-radius: 5px;
margin-top: -50px;
}
.timeline li .box .header{
padding: 3px;
height: 20px;
border-bottom: 1px solid #BDBDB3;
margin-bottom: 3px;
}
.timeline li .box .link{
color: #888875;
float: right;
font-size: 12px;
}
.timeline li .box a{
color: #64A8B7;
font-size: 16px;
font-family: calibri;
font-weight: bold;
text-decoration: none;
}
.timeline li .box a:hover{
color: #468A99;
}
.timeline li .box small{
color: #666659;
font-size: 16px;
}
.timeline li .box-attachment{
margin-top: 10px;
margin-left: 20px;
background-color: #EAEAEA;
padding: 5px;
}
.timeline li .footer{
width: 30px;
height: 30px;
margin-left: -49px;
padding: 3px;
color: #fff;
background-color: #C8C8BF;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
border-radius:100px;
position: absolute;
text-align: center;
top:100%;
}
.box{
width: 100%;
padding: 5px;
background-color: #fff;
border:1px solid #ccc;
line-height: 20px;
font-family: calibri;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
}
.btn{
padding: 5px;
font-size: 12px !important;
border:none;
text-decoration: none;
color: #fff !important;
margin-right:10px;
clear: both;
cursor: pointer;
border-radius: 3px;
}
.btn:hover{
opacity: 0.8;
}
.row{
margin:5px;
margin-left: 0px;
}
</style>


3. Klick Simpan kemudian Klick Simpan Tema untuk menerapkan

4. Buat Postingan berupa halaman melalui Dashboard Blogger Klick Halaman kemudian Buat Halaman Baru. Ingat ya mode HTML bukan Compose

 
<ul class="timeline">
<li><span class="box-time">Partner List</span></li>
<li>
<span class="bulet bg-merah">1</span>
<div class="box">
<div class="header">
Partner <a href="URL BLOG ANDA" rel="supported" target="blank_" title="NAMA BLOG ANDA">NAMA BLOG ANDA</a><span class="link">URL BLOG ANDA</span></div>

<a href="URL BLOG ANDA rel="supported" target="blank_" title="NAMA BLOG ANDA"><img height="60" src="URL LOGO BLOG ANDA" title="NAMA BLOG ANDA" width="200" /></a>

DESKRIPSI BLOG ANDA
<div class="row">
</div>
</div>
</li>

<li>
<span class="bulet bg-merah">2</span>
<div class="box">
<div class="header">
Partner <a href="LINK BLOG PARTNER" rel="supported" target="blank_" title="TITLE BLOG PARTNER">NAMA BLOG PARTNER</a><span class="link">LINK BLOG PARTNER</span></div>

<a href="LINK BLOG PARTNER" rel="supported" target="blank_" title="TITLE BLOG PARTNER"><img src="URL LOGO BLOG PARTNER" title="TITLE BLOG PARTNER" width="100" /></a>

DESKRIPSI BLOG PARTNER
<div class="row">
</div>
</div>
</li>
</ul>


5. Sesuaikan point-point penambahan Partnet Blog berdasarkan petunjuk yang ada.

6. Setelah dirasa cukup dan selesai menambahkan input data Blog Partner Klick Publikasikan, jangan lupa untuk memberikan deskripsi halaman sebelum mempublikasikannya.

Untuk menambahkan Blog Partner Baru gunakan kode HTML berikut ini sebelum </ul>

 
<li>
<span class="bulet bg-merah">3</span>
<div class="box">
<div class="header">
Partner <a href="LINK BLOG PARTNER" rel="supported" target="blank_" title="TITLE BLOG PARTNER">NAMA BLOG PARTNER</a><span class="link">LINK BLOG PARTNER</span></div>

<a href="LINK BLOG PARTNER" rel="supported" target="blank_" title="TITLE BLOG PARTNER"><img src="URL LINK LOGO BLOG PARTNER" title="TITLE BLOG PARTNER" width="100" /></a>

DESKRIPSI BLOG PARTNER
<div class="row">
</div>
</div>
</li>


Demikianlah Panduan Tutorial Cara Mudah Membuat dan Memasang Halaman Partner Blog AMP dan Non-AMP. Bagi Anda yang merasa tertarik dan ingin menjadi Partner Blog Berbagi Tutorial Online silahkan simak ketentuan berikut ini:

Syarat Menjadi Partner Blog Berbagi Tutorial Online
  1. Domain Authority (DA) Blog minimal 9 ke atas 
  2. Like FansPage dan atau Subcribe Channel Blog Berbagi Tutorial Online 
  3. Blog Harus Niche Tutorial atau Campuran/Gado-Gado namun harus ada postingan dengan pembahasan Tutorial

Apabila Blog Anda sudah memenuhi syarat dan ketentuan di atas silahkan kirimkan request dengan data-data Blog Anda sebagai berikut:

  • Nama Blog 
  •  Nama Pemilik Blog
  •  Nama Logo Blog 
  • URL Link Blog 
  • URL Link Logo Blog 
  • Niche Blog 
  • Deksripsi Blog 

Melalui pesan email ke jayaprima19@gmail.com dengan subjek "Blog Partner" atau melalui Pesan WhatsApp ke ke Nomor: 085156414804 sertakan bukti screenshot Like FansPage dan atau subscribe Channel Berbagi Tutorial Online.

Ingin berlangganan Notifikasi Update Postingan Terbaru? Silahkan Gabung Berbagi Tutorial Online WhatsApp Grup atau Follow Berbagi Tutorial On Google News. Yuk...Subscribe Channel Youtube Berbagi Tutorial Online bagi Kalian yang suka dengan Tutorial dalam bentuk Rekaman Video.