Home
BLOGGER
TUTORIAL

Cara Membuat Halaman Partner yang Menarik 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]-->

Struktur Kode

Kode partner diatas terdiri dari:

  • CSS: Untuk styling layout partner
  • HTML: Menampilkan nama, deskripsi, logo, dan tautan blog mitra
  • Responsif: Menyesuaikan tampilan untuk semua perangkat
  • Dark Mode: Telah disesuaikan untuk pengguna Median UI v1.5

Kamu cukup mengganti bagian seperti:

<h2 aria-label="www.example.com">Nama Blog</h2>
<p>Isi deskripsi blog kamu di sini</p>
<a href="#">Kunjungi Blog</a>

Untuk menambah mitra baru, salin blok <div class="m903-pt-usr">...</div> lalu ubah isinya sesuai data partner.

Personalisasi

  • Ubah warna utama dengan mengganti kode #00BFFF sesuai warna branding blog kamu.
  • Gunakan logo partner dengan ukuran kecil (85px) dan format transparan jika memungkinkan.
  • Deskripsi blog sebaiknya ringkas, maksimal 2-3 kalimat.

Dukungan Dark Mode

Untuk pengguna template selain Median UI, silakan sesuaikan class dark mode (.darkMode) agar kompatibel dengan template masing-masing.

Penutup

Halaman partner bisa menjadi elemen penting dalam membangun komunitas blogger. Selain memperkuat relasi dan branding, tampilannya juga memberi kesan profesional pada blog kamu.

Jika kamu memiliki pertanyaan atau kendala, jangan ragu untuk menuliskannya di kolom komentar. Jangan lupa juga untuk membaca artikel lainnya seputar desain blog, optimasi, dan tips blogging terbaru.

Post a Comment

  1. Selamat datang di Media903.com
  2. Tinggalkan komentar sesuai topik pembahasan
  3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Room Chat
  4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
  5. Untuk menghapus komentar, hanya dapat dilakukan oleh admin.