Cara Gampang Membuat Halaman Partner Site Blog Keren dan Modern ala JejakPintar 2020

Halaman Partner Site Blog Keren - Halo sobat blogger, kembali lagi dengan coretan admin yang kali ini masuk pada label "blogger". Partner blog adalah bentuk kerja sama antar sesama penulis blog dengan tujuan agar dapat menambah relasi dengan banyak penulis atau tujuan lain dan biasanya partner blog ini digunakan sebagai alternatif untuk meningkatkan Domain Authority (DA) dan Page Authority (PA).

Tak hanya itu saja, kerja sama ini juga dapat menjadi jalan antar sesama blog untuk saling bertukar cerita dan berbagi ilmu tentang dunia blogging.

Sehingga tak heran, banyak blogger yang membuat halaman tersendiri di blognya untuk dijadikan sebagai bagian dari kerja sama yang dilakukan.

Biasanya, halaman partner blog terdiri dari logo blog, nama blog, deskripsi blog dan tentunya link yang menuju ke blog si partner tersebut.

Memang apa sih manfaat membuat halaman partner di blog kita?

Selain kedua manfaat yang sudah admin sebutkan diatas, manfaat lain yang dapat kita peroleh adalah

• Dapat menjangkau blog sobat pada banyak pembaca, dan juga 
• Meningkatkan probabilitas blog kita agar menjadi page one. 

Bagaimana sobat? Poin plus banget kan memasang halaman partner di blog kita?

Lha memang benar membuat halaman partner blog bisa meningkatkan DA dan PA blog kita?

Kenapa tidak? Admin kasih penjelasan nih, ketika sobat membuat halaman partner blog dan memasukkan beberapa nama blog yang bermitra dengan blog sobat, tentu sobat akan menyertakan link yang menuju ke blog si partner kan? Dan partner blog sobat tentu juga akan melakukan hal yang sama kan?

Nah, hal tersebutlah yang akan menghasilkan Quality Backlink. Dan Quality Backlink inilah yang menjadi pendongkrak untuk meningkatkan DA dan PA blog kita.

Sehingga dapat kita simpulkan, semakin banyak partner blog kita, maka semakin meningkat nilai DA dan PA kita. Dengan modal nilai DA dan PA yang tinggi maka mudah bagi blog kita untuk bertengger di page one.

Keren banget ya sobat?

Yuk langsung saja ke tutorialnya..

Cara Gampang Membuat Halaman Partner Site Blog Keren dan Modern

Sebenarnya tidak ada yang istimewa banget dengan tutorial yang admin berikan kali ini. Namun, halaman partner yang admin bagikan kali ini merupakan buah inovasi admin sendiri untuk membuat style halaman partner yang berbeda dengan yang lain.

Untuk desainnya sendiri sudah pasti sangat modern dan responsive sehingga blog sobat akan lebih kelihatan elegan. Yuk ikuti langkah-langkah dibawah ini:

1. Pertama, silahkan login blog sobat.
2. Kedua, klik menu Tema kemudian klik Edit Tema.
3. Tekan CTRL+F dan cari kode
4. Silahkan sobat copy kode css dibawah ini dan pastekan tepat diatas kode ]]></b:skin>

/* CSS PARTNER CARD */
.partner {
  background: #fff;
  border-radius: 4px;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  max-width: 100%;
  max-height: 320px;
  display: flex;
  flex-direction: row;
  border-radius: 25px;
  position: relative;
  margin-bottom: 10px;
}
.partner h2 {
  margin: 0;
  padding: 0 1rem;
  font-size:19px;
}
.partner .title {
  padding: 1rem;
  text-align: right;
  color: green;
  font-weight: bold;
  font-size: 12px;
}
.partner .desc {
  top: 50px;
  padding: 0.5rem 1rem;
  font-size: 12px;
}
.partner .actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding: 0.5rem 1rem;
}
.partner svg {
  width: 85px;
  height: 85px;
  margin: 0 auto;
}

.img-avatar {
  width: 80px;
  height: 80px;
  position: absolute;
  border-radius: 50%;
  border: 6px solid white;
  background: #fff;
  top: 15px;
  right:400px;
}

.partner-text {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.title-total {
  padding: 2.5em 1.5em 1.5em 1.5em;
}

path {
  fill: white;
}

.img-portada {
  width: 100%;
}

.portada {
  width: 100%;
  height: 320px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQma8WFD8VGPrZONKlNEkHh7JswHw2Cat7Ptq0gKXqfdZjuqGiWOYpYVgAwCRQTtY1PNWt_Psi4053e2CftRsGcmR-lF8LKURpxXX_uHFYBQmXfJOtlv83yA-cJ2lLRVw2HSNSGW7mhmE/s1600/OEZAUA0.jpg");
  background-position: bottom center;
  background-size: cover;
}

.partnerbutton{
    background-color:#74b9ff;
    background-position:center;
    font-size:14px;
    margin:5px;
    padding:8px 15px;
    color:#fff;
    text-transform:uppercase;
    cursor:pointer;
    border-radius:100px;
    border:0px;
    white-space:nowrap;
    transition:background .3s;
    float: right;
    width: 100px;
    top: 300px;
    }
  
.partnerbutton:hover, .ripple:hover{
    background:#ef5350 radial-gradient(circle, transparent 2%, #ef5350 2%) center/15000% !important;
    }
  
.partnerbutton:active, .ripple:active{
    background-color:#fff !important;
    background-size:100% !important;
    transition:background 0s !important;
    }
}

@media only screen and (max-width:1080px){
.img-avatar {
left: 170px;
}
}
@media only screen and (max-width:800px){
.img-avatar {
left: 195px;
}
}
@media only screen and (max-width:640px){
.img-avatar {
left: 90px;
}
@media only screen and (max-width:684px){
.img-avatar {
left: 70px;
}
@media only screen and (max-width:480px) {
.img-avatar {
left: 90px;
}
}

5. Jika sudah klik SIMPAN.

Langkah terakhir,

6. Silahkan sobat ke menu Halaman dan buatlah halaman baru.
7. Silahkan copy kode dibawah ini dan pastekan di menu HTML bukan COMPOSE.

<div class="partner">
<img alt="JejakPintar" class="img-avatar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmoB2qRauK_meQzTfC643nV3bOgvFy-OPWcYIFOCpunMU7BA3AgGBAAl94ZITOMJ3yHeuicCOWRxr1QLon5Y861QWMYjlnjI0pI_MeLQpiQqGgily7sWsrgnAUqWl6wjpgVrO8QkpQ4u8/s1600/IMG_20200613_183904.png" />
<div class="partner-text">
<div class="portada"></div>

<div class="title-total">
<div class="title">
www.jejakpintar.com</div>
<h2>
JejakPintar</h2>

<div class="desc">
Blog milenial yang menyediakan berbagai ilmu dan wawasan terkini baik dari bidang akademik maupun umum.</div>
<a href="https://www.jejakpintar.com/" rel="dofollow"><button class="partnerbutton">Kunjungi</button></a>
</div>
</div>
</div>

Silahkan sobat sesuaikan sendiri untuk bagian yang saya blok.

Jika sobat ingin menambah partner lagi dihalaman tersebut cukup copy lagi kode diatas dan pastekan dibawahnya.

Pastikan semua langkah diatas sobat lakukan dengan benar ya, untuk demonya sobat dapat melihat di halaman partner blog ini. Admin juga sudah mencobanya ditemplate lain, sebagai visualisasiya silahkan klik tombol demo dibawah ini.

PREVIEW

Bagaimana mudah bukan cara Membuat Halaman Partner Site Blog Keren dan Modern ala JejakPintar. Jika ada yang ingin ditanyakan, silahkan komen dibawah ya sobat. Jangan lupa dishare yaa..

Subscribe Our Newsletter