4 Desain Halaman Partner Blog Simple Keren Terbaru

Magelang1337.com - Halaman Partner Blogger Responsive Terbaru. Partner blog atau kebanyakan disebut mitra merupakan bagian dari kerjasama antara penulis pemilik blog dengan tujuan untuk

kepentingan dari masing-masing penulis contohnya seperti meningkatkan Domain Authority (DA) dan Page Authority (PA).

Tidak cuma itu membuat partner blog bisa juga untuk ajang bertemunya para blogger dan bisa menjalin hubungan atau saling bertukar cerita tentang blog mereka. sebagai bagian para blogger menjalin kerjasama dari halaman partner itu terdiri dari nama blog, deskripsi blog dan tentunya url yang menuju ke blog partner. Ada beberapa desain yang bisa kamu pilih kami sudah menyiapkan desain yang keren.

Desain Halaman Partner Blog Keren Simple

Jika kamu mempunyai banyak partner di blog maka peluang blog kamu untuk jadi populer akan meningkat baik pada mesin pencari atau Visitor. Berikut ini kumpulan script Halaman Partner Blog :

1. Desain Halaman Partner Blog V1

Script :

<ul class="cards">
<li class="cards__item">
<div class="card">
<div class="card__content">
<div class="card__title">
MAGELANG1337</div>
<div class="card__text">
Magelang1337 membahas tentang Teknologi terbaru, dunia hiburan, tips blogging, tutorial android dan lain-lain tentunya saling berbagi pengalaman dari masing-masing penulis.</div>
<a href="https://www.magelang1337.com/" rel="dofollow"><button class="button">Kunjungi (Nama Blog)</button></a></div>
</div>
</li>
<li class="cards__item">
<div class="card">
<div class="card__content">
<div class="card__title">
Judul Blog</div>
<div class="card__text">
Bagian ini biasa diisi dengan deskripsi dari blog dengan kisaran banyak kata yang dapat diketik yaitu 150 hingga 400 kata, dan tidak lupa button yang digunakan adalah dofollow.</div>
<a href="https://www.magelang1337.com/" rel="dofollow"><button class="button">Kunjungi (Nama Blog)</button></a></div>
</div>
</li>
</ul>

<style type="text/css">
.buttonFaaris{
    background-color:#74b9ff;
    background-position:center;
    font-size:1.15rem;
    margin:5px;
    padding:8px 15px;
    color:#fff;
    text-transform:uppercase;
    cursor:pointer;
    border-radius:100px;
    border:0px;
    white-space:nowrap;
    transition:background .3s;
    }
  
.buttonFaaris:hover, .ripple:hover{
    background:#ef5350 radial-gradient(circle, transparent 2%, #ef5350 2%) center/15000% !important;
    }
  
.buttonFaaris:active, .ripple:active{
    background-color:#fff !important;
    background-size:100% !important;
    transition:background 0s !important;
    }

.cards {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    }

.cards__item {
    display: flex;
    padding: 1rem;
    @media(min-width: 40rem) {
    width: 50%;
    }
    @media(min-width: 56rem) {
    width: 33.3333%;
    }
  }

.card {
    background-color: white;
    border-radius: 0.25rem;
    box-shadow: 0 20px 40px -14px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    &:hover {
      .card__image {
        filter: contrast(100%);
      }
    }
  }

.card__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1rem;
  }

.card__title {
    color: ;
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

.card__text {
    flex: 1 1 auto;
    line-height: 1.5;
    font-weight: 350;
    margin-bottom: 1.25rem;
}
</style>

Jika ingin menambahkan partner tambahan kamu tinggal menambahkan script dibawah tepat diatas kode </ul>

<li class="cards__item">
<div class="card">
<div class="card__content">
<div class="card__title">
judul Blog</div>
<div class="card__text">
Bagian ini biasa diisi dengan deskripsi dari blog dengan kisaran banyak kata yang dapat diketik yaitu 150 hingga 400 kata, dan tidak lupa button yang digunakan adalah dofollow.</div>
<a href="https://www.magelang1337.com/" rel="dofollow"><button class="button">Kunjungi (Nama Blog)</button></a></div>
</div>
</li>

2. Desain Halaman Partner Blog V2

Script :

<style type="text/css">
/* CSS Partner Blog */
.partner-box{font-size:14px;line-height:1.5em;padding:15px 18px 20px;border-radius:12px;background-color:#fefefe;box-shadow:0 6px 18px 0 rgba(9,32,76,.035)}
.partner-box:not(:last-child){margin-bottom:15px}
.partner-box .title-partner h4{margin-top:0;font-size:16px}
.partner-box .title-partner h4 span{display:inline-block;color:#767676;font-weight:400;font-size:12px;margin-left: 7px}
.partner-box li:not(:last-child){margin-bottom:10px}
.partner-box li{display:flex;align-items:flex-start}
.partner-box li a{display:inline-block;color:#161617}
.partner-box.start .title-partner h4{font-size:14px;margin-bottom:12px}
.partner-box.start .description p{margin:0}
.partner-box.start .description a{color:#505050}
.partner-box.start .description a span{display:inline-block;color:#767676;font-size:11px}
.partner-box.start .description a span:after{content:'0b7';margin:0 8px 0 5px}
.partner-box.start .category a{display:inline-block;color:#767676;font-size:12px;padding-top:20px}
.dark-mode .partner-box{background-color:#212121}
.dark-mode .partner-box li a,
.dark-mode .partner-box.start .description a{color:#fefefe}
.dark-mode .partner-box .title-partner h4 span{color:#005af0}
.dark-mode .partner-box.start .description a span{color:#fdd835}
.dark-mode .partner-box.start .category a{color:#005af0}
</style>

<!--Partner Satu-->
<div class="partner-box start">
  <a class="title-partner" href="https://www.magelang1337.com/" target="_blank" title="Magelang1337">
    <h4>Magelang1337<span style="text-align: right;">Magelang1337.com </span></h4>
  </a>
  <div class="description">
    <a title="Deskripsi Blog">
      <span>Admin MNHBLOG</span>Magelang1337 membahas tentang Teknologi terbaru, dunia hiburan, tips blogging, tutorial android dan lain-lain tentunya saling berbagi pengalaman dari masing-masing penulis.</a>
  </div>
  <div class="category">
  <a title="Kategori Blog"><b>Kategori :</b> Teknologi, Blogger, Umum</a>
  </div>
</div>

<!--Partner Kedua-->  
<div class="partner-box start">
  <a class="title-partner" href="https://www.namabloganda.com/" target="_blank" title="namabloganda">
    <h4>Nama Blog Anda<span style="text-align: right;">namabloganda.com </span></h4>
  </a>
  <div class="description">
    <a title="Deskripsi Blog">
      <span>Nama Anda </span>Ini adalah deskripsi blog Anda.</a>
  </div>
  <div class="category">
  <a title="Kategori Blog"><b>Kategori :</b> Kategori Blog Anda</a>
  </div>
</div>

<!--Partner Ketiga-->  
<div class="partner-box start">
  <a class="title-partner" href="https://www.namabloganda.com/" target="_blank" title="namabloganda">
    <h4>Nama Blog Anda<span style="text-align: right;">namabloganda.com </span></h4>
  </a>
  <div class="description">
    <a title="Deskripsi Blog">
      <span>Nama Anda </span>Ini adalah deskripsi blog Anda.</a>
  </div>
  <div class="category">
  <a title="Kategori Blog"><b>Kategori :</b> Kategori Blog Anda</a>
  </div>
</div>

Untuk Menambahkan Partner kamu tambahkan script dibawah

<!--Partner Tambahan-->  
<div class="partner-box start">
  <a class="title-partner" href="https://www.namabloganda.com/" target="_blank" title="namabloganda">
    <h4>Nama Blog Anda<span style="text-align: right;">namabloganda.com </span></h4>
  </a>
  <div class="description">
    <a title="Deskripsi Blog">
      <span>Nama Anda </span>Ini adalah deskripsi blog Anda.</a>
  </div>
  <div class="category">
  <a title="Kategori Blog"><b>Kategori :</b> Kategori Blog Anda</a>
  </div>
</div>

3. Desain Halaman Partner Blog V3

Script :

<div class="Buka">
<ul class="BlogList">
<li class="ArticleTeaser">
<h3 class="ArticleTeaser-title">
<a href="https://www.magelang1337.com" target="_blank" title="Magelang1337">Magelang1337</a></h3>
<div class="ArticleTeaser-bubble">
</div>
<div class="ArticleTeaser-date">
Magelang1337 membahas tentang Teknologi terbaru, dunia hiburan, tips blogging, tutorial android dan lain-lain tentunya saling berbagi pengalaman dari masing-masing penulis.</div>
</li>
<li class="ArticleTeaser">
<h3 class="ArticleTeaser-title">
<a href="https://www.magelang1337.com" target="_blank" title="Magelang1337">MNHBLOG</a></h3>
<div class="ArticleTeaser-bubble">
</div>
<div class="ArticleTeaser-date">
Blog Pribadi Yang Berisi Tentang Tutorial Android Dan Blog Yang Paling Lengkap, Paling Simpel Dan Paling mudah Di Pahami</div>
</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js" type="text/javascript"></script>
<br />
<br />
<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdn.rawgit.com/slideseo-blog/slideseo.js/master/Part.css");
//]]>
</script>
<script src="https://cdn.rawgit.com/slideseo-blog/slideseo.js/master/Part.js" type="text/javascript"></script>

Jika ingin menambahkan partner kamu tinggal tambahkan kode berikut:

<li class="ArticleTeaser">
<h3 class="ArticleTeaser-title">
<a href="https://www.magelang1337.com" target="_blank" title="Magelang1337">MNHBLOG</a></h3>
<div class="ArticleTeaser-bubble">
</div>
<div class="ArticleTeaser-date">
Blog Pribadi Yang Berisi Tentang Tutorial Android Dan Blog Yang Paling Lengkap, Paling Simpel Dan Paling mudah Di Pahami</div>
</li>

4. Desain Halaman Partner Blog V4

Untuk Desain halaman partner ini cara settingnya agak berbeda. Kamu harus masuk kedalam menu Tema blogger lalu tempel kode css dibawah ini tepat diatas kode </HEAD>

<!-- CSS Partner List Magelang1337 -->
<style type='text/css'>
.bg-merah{
  background-color: #5c5c5c !important;
}
.timeline{
  border-left: 5px solid #4f4e4e;
  margin:0px;
  padding: 0px;
  height: 100%;
  padding: 10px;
  padding-top: 0px;
  margin-left:50px;
}
.timeline li{
  list-style: none;
  margin-top:10px;
  margin-left: 20px;
  margin-bottom: 20px;
}
.timeline li .bulet{
  width: 30px;
  height: 30px;
  margin-left: -49px;
  padding: 3px;
  color: #fff;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  border-radius:100px;
  position: absolute;
  text-align: center;
}
.timeline li .box-time{
  width: 60px;
  padding: 5px;
  background-color: #820000;
  color: #fff;
  height: 20px;
  box-shadow:0 3px 4px #949494;
  margin-left: -70px;
  position: relative;
  margin-bottom: 20px;
  border-radius: 5px;
  margin-top: -50px;
}
.timeline li .box .header{
  padding: 3px;
  height: 20px;
  border-bottom: 1px solid #BDBDB3;
  margin-bottom: 3px;
}
.timeline li .box .link{
  color: #888875;
  float: right;
  font-size: 12px;
}
.timeline li .box a{
  color: #64A8B7;
  font-size: 16px;
  font-family: calibri;
  font-weight: bold;
  text-decoration: none;
}
.timeline li .box a:hover{
  color: #468A99;
}
.timeline li .box small{
  color: #666659;
  font-size: 16px;
}
.timeline li .box-attachment{
  margin-top: 10px;
  margin-left: 20px;
  background-color: #EAEAEA;
  padding: 5px;
}
.timeline li .footer{
  width: 30px;
  height: 30px;
  margin-left: -49px;
  padding: 3px;
  color: #fff;
  background-color: #C8C8BF;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  border-radius:100px;
  position: absolute;
  text-align: center;
  top:100%;
}
.box{
  width: 100%;
  padding: 5px;
  background-color: #fff;
  border:1px solid #ccc;
  line-height: 20px;
  font-family: calibri;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
}
.btn{
  padding: 5px;
  font-size: 12px !important;
  border:none;
  text-decoration: none;
  color: #fff !important;
  margin-right:10px;
  clear: both;
  cursor: pointer;
  border-radius: 3px;
}
.btn:hover{
  opacity: 0.8;
}
.row{
  margin:5px;
  margin-left: 0px;
}
</style>

Selanjutnya kembali lagi pada Menu Halaman dan Copy pastekan kode dibawah pada halaman baru (HTML)

<ul class="timeline">
<li><span class="box-time">Partner List</span></li>
<li>
<span class="bulet bg-merah">1</span>
<div class="box">
<div class="header">
Partner <a href="https://www.magelang1337.com/" rel="supported" target="blank_" title="magelang1337.com">magelang1337.com</a><span class="link">magelang1337.com</span></div>
<a href="https://www.magelang1337.com/" rel="supported" target="blank_" title="magelang1337.com"><img height="60" src="https://1.bp.blogspot.com/-rzLt_rUCAGc/YDPdGH754dI/AAAAAAAAJ4E/S9yTAUrrTqYRax_hN5tcVUrvXSYEC-HjQCLcBGAsYHQ/w400-h61/dggg.jpg" title="magelang1337.com" width="100" /></a>
magelang1337 membahas tentang Teknologi terbaru, dunia hiburan, tips blogging, tutorial android dan lain-lain tentunya saling berbagi pengalaman dari masing-masing penulis.
<div class="row">
</div>
</div>
</li>
<li>
<span class="bulet bg-merah">2</span>
<div class="box">
<div class="header">
Partner <a href="LINK BLOG PARTNER" rel="supported" target="blank_" title="TITLE BLOG PARTNER">NAMA BLOG PARTNER</a><span class="link">LINK BLOG PARTNER</span></div>

<a href="LINK BLOG PARTNER" rel="supported" target="blank_" title="TITLE BLOG PARTNER"><img src="https://1.bp.blogspot.com/-rzLt_rUCAGc/YDPdGH754dI/AAAAAAAAJ4E/S9yTAUrrTqYRax_hN5tcVUrvXSYEC-HjQCLcBGAsYHQ/w400-h61/dggg.jpg" title="TITLE BLOG PARTNER" width="100" /></a>

DESKRIPSI BLOG PARTNER
<div class="row">
</div>
</div>
</li></ul>

Jika ingin menambahkan list partner kamu tinggal menambahkan kode dibawah ini tepat diatas kode </ul>

<li>
<span class="bulet bg-merah">2</span>
<div class="box">
<div class="header">
Partner <a href="LINK BLOG PARTNER" rel="supported" target="blank_" title="TITLE BLOG PARTNER">NAMA BLOG PARTNER</a><span class="link">LINK BLOG PARTNER</span></div>

<a href="LINK BLOG PARTNER" rel="supported" target="blank_" title="TITLE BLOG PARTNER"><img src="https://1.bp.blogspot.com/-rzLt_rUCAGc/YDPdGH754dI/AAAAAAAAJ4E/S9yTAUrrTqYRax_hN5tcVUrvXSYEC-HjQCLcBGAsYHQ/w400-h61/dggg.jpg" title="TITLE BLOG PARTNER" width="100" /></a>

DESKRIPSI BLOG PARTNER
<div class="row">
</div>
</div>
</li>
</ul>

Panduan Membuat Halaman Partner Blog

Untuk membuat halaman partner cukup mudah, Kamu tinggal masuk menu blogger dan pilih halaman.

1. Buka halaman > Buat Halaman baru

2. Selanjutnya Pilih Mode HTML

3. Copy Paste Script diatas.

4. Klik Simpan

5. Kamu bisa untuk melihat Preview atau langsung Publish

Demikianlah Rekomendasi beberapa desain dan panduan membuat halaman partnership di blog. Jika Kami mempunyai tambahan desain lagi artikel akan terus update. Semoga bermanfaat.

Silahkan Komentar dengan bahasa yang sopan :)

Untuk membuat judul komentar, gunakan Judul Komentar
Untuk membuat kotak catatan, catatan
Untuk membuat teks stabilo, mark
Untuk membuat teks mono, kbd
Untuk membuat kode singkat, shorcode
Untuk membuat kode panjang, potongan kode
Untuk membuat teks tebal, tebal atau tebal
Untuk membuat teks miring, miring atau miring

Desain Halaman Partner Blog Keren Simple

1. Desain Halaman Partner Blog V1

2. Desain Halaman Partner Blog V2

3. Desain Halaman Partner Blog V3

4. Desain Halaman Partner Blog V4

Panduan Membuat Halaman Partner Blog

Postingan lainnya

★★★★

Belum Ada Komentar