Cara Membuat Halaman Partner Keren di Blog

Cara Membuat Halaman Partner Keren di Blog

Hallo semua, pada halaman ini saya akan membagikan cara membuat halaman partner di blog. Partner atau yang biasa disebut mitra adalah sebuah kerjasama antar pemilik blog. 

Dengan membuat halaman partner tentu akan memberikan dampak yang bagus kepada kedua belah pihak. Misalnya mendapatkan backlink gratis, membangun relasi dan lainnya tergantung kepentingan si pemilik.

Umumnya untuk menjadi partner sebuah blog kita hanya perlu mengirim keterangan blog kita seperti Nama Penulis, Nama Blog, URL Blog dan Kategori atau Niche Blog. Namun sebelum itu pastikan blog kamu memenuhi syarat dan ketentuan yang diberikan si pemilik blog.

Cara Membuat Halaman Partner Keren di Blog

Buka dashboard blogger > halaman > buat halaman baru lalu salin semua kode di bawah ini dan pastekan dalam tampilan html setelah itu simpan.

<style>
/* partner page by Media 903 ubah warna cari kode #00BFFF */
.m903-pt-usr img{position:absolute;width:85px;border-radius:30px 30px 5px;top:15px}
.m903-pt-usr{position:relative;padding:15px;padding-bottom:0;border-radius:30px 0 30px;;background-color:#fefefe;box-shadow:0 2px 12px -2px rgb(0 0 0 / 12%);border:1px solid #ddd;margin-top:25px}
.m903-pt-usr h2{margin-left:100px;margin-top:5px;font-size:16px;color:#969696}
.m903-pt-usr h2:before{content:attr(aria-label);position:absolute;margin-top:25px;font-size:12px;font-style:italic;color:#00BFFF}
.m903-pt-usr p{font-size:12px;color:#48525c;line-height:1.3em}
.m903-pt-usr .m903-pt-kt{margin-left:60px;display:flex;list-style:none;font-size:10px;color:#48525c;}
.m903-pt-usr .m903-pt-kt li{margin-right:10px;margin-top:10px;border-radius:3px;border:1px solid #ddd;padding:5px;line-height:1.5em;white-space:nowrap;}
.m903-pt-usr a{display:flex;align-items:center;margin-bottom:10px;font-size:14px;color:#00BFFF}
.m903-pt-usr a:before{content:attr(aria-label)}
.m903-pt-usr a svg{height:18px;margin:5px;stroke:#00BFFF!important;fill:none!important}
.m903-ptpop-wrap,.m903-ptsypop-wrap{position:fixed;height:100%;width:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:9999999;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:9999999;opacity:0;visibility:hidden;transition:all 0.3s ease}
.m903-ptpop-wrap.aktif,.m903-ptsypop-wrap.aktif{opacity:1;visibility:visible}
.m903-ptpop-wrap .m903-ptstr-pop h2,.m903-ptsypop-wrap .m903-ptsy-pop h2{font-size:16px;color:#969696;text-align:center}
.m903-ptpop-btn{display:flex;align-items:center;justify-content:center;padding:15px;outline:0;border:0; border-radius:3px;line-height:1em; color:#fff;background-color:#00BFFF;font-size:14px;font-weight:bold;white-space:nowrap;overflow:hidden;width:96;margin:30px 10px}
.m903-ptpop-cls{position:absolute;top:15px;right:15px;width:30px;height:30px;background-color:#f3f3f3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' fill='%23878787'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:25px;background-position:center;cursor:pointer;border-radius:50%;z-index:10}
.m903-btnpt-wrap{display:flex;justify-content:center;margin:20px 0 0}
.m903-ptstr-pop,.m903-ptsy-pop{position:relative;top:50%;left:50%;padding:20px;display:inline-block;background-color:#fefefe;flex-direction:column;width:100%;max-width:800px;max-height:calc(100% - 40px);border-radius:5px;transform: translate(-50% , -50%) scale(0.97);overflow:auto}
.m903-pt-inp{position:relative;margin:20px auto;}
.m903-pt-inp input[type=text]{font-size:15px;padding:15px 0 15px 12px;display:block;width:100%;border:1px solid #ddd;border-radius:5px;background-color:#fefefe}
.m903-pt-inp input[type=text]:focus,.m903-pt-inp input[type=text]:hover{outline:none;border-color:#00BFFF!important;background-color:#fefefe}
.m903-pt-inp input[type=text]::-webkit-input-placeholder{color:#a5a5a5;font-size:12px}
.m903-pt-inp label{color:#999;border-radius:20px;font-size:14px;font-weight:500;position:absolute;pointer-events:none;left:15px;top:15px;transition:.2s ease all}
.m903-pt-inp input[type=text]:valid~label{top:-25px!important;font-size:13px;color:#00BFFF;font-weight:700;padding:1px 7px;margin:10px 0 0 -5px;background-color:#fefefe}
  
/* sembunyikan label k4 dan seterusnya hanya pada layar 600px ke bawah */
@media screen and (max-width: 600px){.m903-pt-kt li:nth-child(n+4){display:none}}
/* sembunyikan label k7 dan seterusnya hanya pada layar 800px ke bawah */
@media screen and (max-width: 800px){.m903-pt-kt li:nth-child(n+7){display:none}}
  
/* CSS darkmode sesuaikan class ( .darkMode ) dengan template yang kalian gunakan agar dapat berfungsi */
/* Dark Mode */
.darkMode .m903-pt-usr,.darkMode .m903-ptsy-pop,.darkMode .m903-ptpop-cls,.darkMode .m903-ptstr-pop,.drK .m903-pt-inp input[type=text]:valid~label,.darkMode .m903-pt-inp input[type=text]:focus,.darkMode .m903-pt-inp input[type=text]:hover{background-color:#1e1e1e}
.darkMode .m903-pt-usr p,.darkMode .m903-pt-usr h2,.drK .m903-pt-kt,.darkMode .m903-ptsy-pop p,.drK .m903-ptsy-pop h2,.darkMode .m903-ptstr-pop p,.darkMode.m903-ptstr-pop h2{color:#fefefe}
.darkMode .m903-pt-usr,.darkMode .m903-pt-kt li{border-color:rgba(255,255,255,.1)}
</style>

<!--[partner 1]-->
<div class="m903-pt-usr">
<img alt="Media 903" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiYyA22PcI-NIWNXPrzOScmFud9PbcdtkO7ZChbt1rU20d3gLtEOB2_DOTeDF9U9npJEg5ZU4rBhc_deVtKcgZnkoD1qcUlVrnHe5I6tKms5RYoV9BjwU50aDmru6ZendIprhS5MMYpYb-/s1600/logo.png" />
<h2 aria-label="www.example.com">Nama Blog</h2>
<ul class="m903-pt-kt">
<li>example</li>
<li>example</li>
<li>example</li>
</ul>
<p>isi deskripsi blog kamu disni</p>
<a aria-label="kunjungi blog" href="#" target="_blank"><svg class="line" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) translate(5.500000, 4.000000)"><line x1="6.7743" x2="6.7743" y1="15.7501" y2="0.7501"></line><path d="M12.7988,9.6998 C12.7988,9.6998 9.5378,15.7498 6.7758,15.7498 C4.0118,15.7498 0.7498,9.6998 0.7498,9.6998"></path></g></svg></a>
</div>
<!--[partner 1]-->

<!--[partner 2]-->
<div class="m903-pt-usr">
<img alt="Media 903" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiYyA22PcI-NIWNXPrzOScmFud9PbcdtkO7ZChbt1rU20d3gLtEOB2_DOTeDF9U9npJEg5ZU4rBhc_deVtKcgZnkoD1qcUlVrnHe5I6tKms5RYoV9BjwU50aDmru6ZendIprhS5MMYpYb-/s1600/logo.png" />
<h2 aria-label="www.example.com">Nama Blog</h2>
<ul class="m903-pt-kt">
<li>label</li>
<li>label</li>
<li>label</li>
</ul>
<p>isi deskripsi blog kamu disni</p>
<a aria-label="kunjungi blog" href="#" target="_blank"><svg class="line" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) translate(5.500000, 4.000000)"><line x1="6.7743" x2="6.7743" y1="15.7501" y2="0.7501"></line><path d="M12.7988,9.6998 C12.7988,9.6998 9.5378,15.7498 6.7758,15.7498 C4.0118,15.7498 0.7498,9.6998 0.7498,9.6998"></path></g></svg></a>
</div>
<!--[partner 2]-->

<!--[partner 3]-->
<div class="m903-pt-usr">
<img alt="Media 903" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiYyA22PcI-NIWNXPrzOScmFud9PbcdtkO7ZChbt1rU20d3gLtEOB2_DOTeDF9U9npJEg5ZU4rBhc_deVtKcgZnkoD1qcUlVrnHe5I6tKms5RYoV9BjwU50aDmru6ZendIprhS5MMYpYb-/s1600/logo.png" />
<h2 aria-label="www.example.com">Nama Blog</h2>
<ul class="m903-pt-kt">
<li>label</li>
<li>label</li>
<li>label</li>
</ul>
<p>isi deskripsi blog kamu disni</p>
<a aria-label="kunjungi blog" href="#" target="_blank"><svg class="line" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) translate(5.500000, 4.000000)"><line x1="6.7743" x2="6.7743" y1="15.7501" y2="0.7501"></line><path d="M12.7988,9.6998 C12.7988,9.6998 9.5378,15.7498 6.7758,15.7498 C4.0118,15.7498 0.7498,9.6998 0.7498,9.6998"></path></g></svg></a>
</div>
<!--[partner 3]-->

Bagi pengguna template median ui v1.5 tidak perlu mengubah class dark mode dikarenakan saya sendiri pengguna template tersebut jadi class diatas sudah sesuai dan bagi yang bukan silahkan sesuaikan dengan template masing-masing.

Sekian pembahasan kali ini, jika ada yang ingin ditanyakan jangan ragu untuk menuliskannya pada kolom komentar. Dan baca juga artikel lainnya untuk mendapatkan informasi dan tips seputar blogging.