Cara Membuat Halaman Partner Blog Keren

Bangevtan.com - Hallo sahabat blogger, apa kabar kalian semua?, semoga kalian baik-baik saja ya Aminn.

Di artikel kali ini saya akan share tutorial tentang cara membuat halaman partner blog keren, tapi sebelum itu saya akan sedikit memperkenalkan kepada kalian apasih partner blog itu?, dan apa saja manfaat yang didapat ketika kita memasang halaman partner blog?.

DAFTAR ISI

• 1 Apasih Partner Blog Itu?
• 2 Apasih Manfaat partner blog?
  
  • 2.1 Meningkatkan Pageview
  • 2.2 Menjalin Silaturahmi Sesama Blogger
  • 3.2 Meningkatkan Pagerank
• 3 Cara Membuat Halaman Partner Blog Keren
  
  • 3.1 Memasang kode CSS
  • 3.2 Tahap Memasang Kode HTML

1. Apasih Partner Blog Itu?

Partner berasal dari bahasa inggris jika diartikan kepada bahasa indonesia yaitu Pasangan, tetapi jangan sampai salah mengartikan ya:). Partner blog bisa disebut juga dengan kerjasama antara blog satu dengan blog yang lainnya.

Misalkan blog kamu pengen bekerjasama dengan blog saya, maka sebaiknya kamu kirimkan nama blog, deskripsi, dan lain sebagainya begitupun sebaliknya. Manfaatnyapun tergolong sangat banyak. Lalu apa saja sihh manfaat yang dapat di dapat ketika kita bekerja sama dengan blog lain?.

2. Apasih Manfaat partner blog?

Manfaat yang bisa didapatkan antara lain :

2.1. Meningkatkan Pageview

Salah satu manfaatnya yaitu meningkatkan pageview, bagaimana tidak jika kita bekerja sama dengan blog yang memiliki DA, PA yang tinggi, begitu pula dengan alexa rank yang rendah, sudah pasti blog kita akan dipadati dengan pengunjung.

2.2. Menjalin Silaturahmi Sesama Blogger

Jika kita bekerja sama dengan seseorang, pastinya kita sedang menjalin silaturahmi. Seperti halnya partner blog, pasti kita akan bekerja sama dengan blog lain dan menjalin silaturahmi antara blog satu dengan yang lainnya.

2.3. Meningkatkan Pagerank

Sudah sangat jelas, ketika kita berpartneran dengan blog lain, otomatis kita akan mendapatkan backlink ( Dofollow ) atau langsung menuju ke homepage blog kalian.  Sedangkan backlink merupakan salah satu syarat SEO.

Bagamana?, apakah kalian tertarik untuk mmbuat halaman partner blog tersebut?, jika kalian tertarik maka simak caranya berikut ini :

3. Cara Membuat Halaman Partner Blog Keren

3.1. Memasang kode CSS

Untuk caranya tergolong sangat mudah, kalian bisa gunakan kode CSS dibawah ini, kemudian kalian pastekan tepat diatas </style> atau ]]</b:skin>.

/*---- Blog Partner Bangevtan ----*/
span.logo-idnxmus{text-align:center;display:block}
span.logo-idnxmus img{border:5px solid #008080;border-radius:50%;background:#fff}
span.logo-idnxmus 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:#008080;width:8px;height:8px;border-radius:50%}
ul.blog-partner:after{content:"";position:absolute;top:0;bottom:0;left:50%;background:#008080;width:2px;z-index:1}
li.partner-wrap{background:#FFF;border:2px solid #008080;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 #008080;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 img{border:5px solid #008080;border-radius:50%;background:#008080;z-index: 1;}
span.logo-partner 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:#008080;color:#fff;top:15px;transition: all .6s ease;}
span.logo-partner:after{content:attr(data-tooltip);background:#008080;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: #008080;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 img {transform: rotate(360deg);transition: all .8s ease;}
span.logo-partner img, span.logo-idnxmus 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%;}
}

Kemudian kalian klik " Simpan Tema ".

3.2. Tahap Memasang Kode HTML

Untuk selanjutnya kalian klik menu Halaman ---> kemudian kalian buat halaman baru untuk dijadikan sebagai halaman partner blog kalian nanti.

Ingat jangan di mode compose, kalian pindahkan terlebih dahulu ke mode HTML. Jika sudah kalian pastekan kode HTML dibawah ini

<span class="logo-idnxmus">
<img alt="Nama Logo Blogmu" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirpxEUKasyiQDmzlWLZ0YsoasZ0sGbmeq9suQK8k3XR4ibx35xsAsnihQE3arg3UMGeDxKhRt9GGmJmP_MjUGJUwMhqIseH68VWSx7n-iJeUSIRUycaZXgAHXBoKvzEbRIIuOuTfPGLv-q/s1600/partner-idnxmus.png" title="Nama Logo Blogmu" width="75"></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">
<img alt="Nama Logo Partner" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5XPYNy3dnE6wFwxqF8-4N1LxiYRrwXU8-H7tRHREL75iCvWMq_LqKWBrPtLJOEsAtos7zOanz3thyOJfXudaPFCtzqDeJ7Run9s1SoO0LSS-DWrvr6YHsgZvW2BLgDviB6XaYKNkHEbGq/s1600/logo-part.png" title="Nama Logo Partner" width="75"></img>
</span>
<p>
Deskripsi Blog Partnermu
</p>
</div>
</li>

</ul>
</div>

1. Ganti www.blogpartnermu.com dengan URL Blog partnermu.
2. Ganti Nama Blog Partnermu dengan nama blog partner.
3. Ganti Niche Blog Partnermu dengan niche blog partner.
4. Ganti Deskripsi Blog Partnermu dengan Deskripsi Blog Partnermu.
5. Ganti Nama Pemilik Blog Partner dengan Nama Pemilik Blog Partnermu.
6. Ganti src="https://-------/------/------/------/s600/logo-part.png " dengan logo blog partnermu.
7. Ganti src="https://-------/------/------/------/s600/partner-idnxmus.png dengan logo blog kalian.

Silahkan kalian ganti sesuai dengan yang kalian inginkan.

Jika kalian ingin menambahkan partner blog baru, kalian cukup menambahkan kode HTML dibawah ini tepat diatas kode
</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">
<img alt="Nama Logo Partner" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5XPYNy3dnE6wFwxqF8-4N1LxiYRrwXU8-H7tRHREL75iCvWMq_LqKWBrPtLJOEsAtos7zOanz3thyOJfXudaPFCtzqDeJ7Run9s1SoO0LSS-DWrvr6YHsgZvW2BLgDviB6XaYKNkHEbGq/s1600/logo-part.png" title="Nama Logo Partner" width="75"></img>
</span>
<p>
Deskripsi Blog Partnermu
</p>
</div>
</li>

Sampai disini kalian sudah berhasil membuat halaman partner blog keren. Maaf ya halaman partner blog ini dibuat oleh idnxmus.com, saya hanya membuat tutorial versi non amp saja dan ini sudah disetujui oleh admin idnxmus.com .

Jika ada yang ditanyakan silahkan kalian berkomentar. Ingat berkomentarlah dengan bijak.

Share this post