Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial Cara Membuat Halaman Partners Keren di Blog dengan mudah.
Halaman partner biasanya digunakan untuk bertukar link antar sesama blogger dan salink bertukar cerita tentang isi blog mereka masing - masing. Keuntungan memasang halaman partner pada blog kalian yaitu bisa menaikan Domain Authority dan Page Authority.
Banyak blogger yang memasang halaman partner pada blog mereka, mereka membuat halaman partner ini untuk saling kerja sama antar blogger dan banyak manfaat posistif yang mereka dapat dengan memasang halaman partner di blog.
Halaman partner blog terdiri ,dari URL link blog, Deskripsi blog, dan tentunya Nama blog mereka.
Manfaat Positif Memasang Halaman Partner Blog
- Bisa menaikan Domain Authority dan Page Authority
- Meningkatkan probabilitas
- Bisa menjangkau blog kamu dengan banyak pembaca
- Menambah relasi dengan banyak penulis blog
Cara Membuat Halaman Partners Keren di Blog
- Buka Blog kalian
- Pilih Halaman
- Buat Halaman Baru
- Pilih Mode HTML ( Bukan
Compose) - Salink kode di bawah ini dan letakan pada Mode HTML
<div id="blog-partner">
<ul class="blog-partner">
<li class="partner-wrap" data-tooltip="Lapakinfo.net"> <h3 class="title-partner">
<a href="https://www.telatngoding.com/">ngoding</a></h3>
<div class="deskripsi-partner">
<br />
<center>
Telatngoding Tempatnya berbagi Tips, Trik, Search Engine Optimization, Coding, Blogger dan Adsense, HTML, CSS, Javascript...</center>
</div>
</li>
<li class="partner-wrap" data-tooltip="Lapakinfo.net"> <h3 class="title-partner">
<a href="Link Blog Kamu" rel="nofollow noopener">Nama Blog</a></h3>
<div class="deskripsi-partner">
<br />
<center>
Deskripsi Blog</center>
</div>
</li>
</ul>
</div>- Simpan Halaman kalian dan Publish
- Lanjut dan sekarang pilih Tema lalu Edit HTML
- Salin kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>
/*-- Blog Partner telatngoding.com --*/
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:#de0985;width:8px;height:8px;border-radius:50%}
ul.blog-partner:after{content:"";position:absolute;top:0;bottom:0;left:50%;background:#de0985;width:2px;z-index:1}
li.partner-wrap{background:#FFF;border:5px solid #de0985;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 #de0985;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;}
li.partner-wrap:hover .deskripsi-partner .logo-partner:before, li.partner-wrap:hover .deskripsi-partner {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: #de0985;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
@-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)}}- Simpan template kalian dan selesai.
Untuk menambah partner baru kalian cukup menambahkan kode HTML di bawah ini di atas Tag </ul>
<li class="partner-wrap" data-tooltip="Lapakinfo.net"> <h3 class="title-partner">
<a href="https://www.telatngoding.com/">ngoding</a></h3>
<div class="deskripsi-partner">
<br />
<center>
Telatngoding Tempatnya berbagi Tips, Trik, Search Engine Optimization, Coding, Blogger dan Adsense, HTML, CSS, Javascript...</center>
</div>
</li>Sekian dulu tutorial untuk Cara Membuat Halaman Partners Keren Di Blog, untuk demonya kalian bisa klik tombol demo yang ada di atas.
Buat kalian jika masih bingung atau ada pertanyaan silahkan berkomentar di kolom komentar di bawah ini. Semoga bermanfaat dan terimakasih atas kunjungannya.