Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogging

Cara membuat halaman partner [Blogger] Keren

Posting Komentar

    Kali ini masrodi akan memberikan sedikitnya pengetahuan untuk membuat suatu halaman partner di blog yang kita miliki, di mana pada halaman partner ini dapat mempererat hubungan blog kita dengan pemilik blog yang lainya, halaman blog paetner ini sangat bermanfaat bagi kita dan tentunya juga bermanfaat bagi pemilik blog yang lainya tanpa merugikan satu sama lain, sehingga pada halaman partner blog dapat memberikan informasi seputar blog-blog yang di miliki oleh para pecinta atau yang sangat hobi dengan dunia blogging.

Cara membuat halamab partner

   Tujuan dari membuat halaman blog partner terutama adalah membuat suatu backlink yang menuju  pada halaman blog partner yang terhubung dengan dengan link yang memang sudah di berikan sebelum du buat,  dan juga akan menambahkan nilai domain autority yang kita punya secara bertahap, sehingga pada domain autority  kita akan mendapatkan nilai lebih pada mesin pencari google tentunya sehingga pada saat kita membuat artikel baru akan dengan mudah mendapatkan peringkat pada mesin pencari, untuk membuat halaman partner blog ini sangat mudah silahkan ikuti panduan bagiamana cara membuat halaman partner pada platform blogger ini dengan mudah.

Cara membuat halaman partner di blog

Yang pertama kita lakukan adalah menambahkan css ke dalam template yang kita milki, untuk dapat di lakukan secara terstruktur dengan baik

  • Silahkan buka platform blogger milik kita.
  • Pilih salah satu blog akan di pasangkan halaman partner.
  • Silahkan klik menu garis tiga horizontal (hamburger menu)
  • Tekan tema dan, pada bilah kiri akan tampil halaman tema.
  • silahkam pilih segitiga ke bawah dan klik html untuk menampilkan kode template pada mode html tersebut
  • Jika sudah terbuka jendela tema mode html silahkan copy css di bawah ini dan letakan di atas kode ]]</b:skin>

/*---- Blog Partner ----*/
span.logo-masrodi {
	text-align: center;
	display: block
}
span.logo-masrodi amp-img {
	border: 5px solid #413965;
	border-radius: 50%;
	background: #413965
}
span.logo-masrodi amp-img img {
	border-radius: 50%
}
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: #0177FA;
	width: 8px;
	height: 8px;
	border-radius: 50%
}
ul.blog-partner:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	background: #0177FA;
	width: 2px;
	z-index: 1
}
li.partner-wrap {
	background: #FFF;
	border: 2px solid #0177FA;
	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 #0177FA;
	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
}
span.logo-partner amp-img {
	border: 5px solid #0177FA;
	border-radius: 50%;
	background: #0177FA;
	z-index: 1
}
span.logo-partner amp-img img {
	border-radius: 50%
}
span.logo-partner {
	margin-right: 20px;
	position: relative;
	font-size: 12px
}
span.logo-partner:before, span.logo-partner:after {
	position: absolute;
	white-space: nowrap;
	left: 60px;
	border-radius: 0 5px 5px 0;
	padding: 4px 10px 4px 20px;
	opacity: 0
}
span.logo-partner:before {
	content: attr(id);
	background: #21ef8b;
	color: #242038;
	top: 15px;
	transition: all .6s ease
}
span.logo-partner:after {
	content: attr(data-tooltip);
	background: #3498db;
	color: #fff;
	top: 45px;
	transition: all 1.2s ease
}
li.partner-wrap:hover .deskripsi-partner .logo-partner:before, li.partner-wrap:hover .deskripsi-partner .logo-partner:after {
	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: #0177FA;
	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 .logo-partner amp-img {
	transform: rotate(360deg);
	transition: all .8s ease
}
span.logo-partner amp-img, span.logo-masrodi amp-img {
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0 rgba(0, 0, 0, 0.14), 0px 1px 10px 0 rgba(0, 0, 0, 0.12)
}
@-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)
	}
}
@media screen and (max-width:530px) {
	li.partner-wrap:hover::before {
		left: 47.4%
	}
	.deskripsi-partner {
		display: block
	}
	span.logo-partner {
		margin: 0 auto;
		display: table
	}
	li.partner-wrap:hover .deskripsi-partner .logo-partner:before, li.partner-wrap:hover .deskripsi-partner .logo-partner:after {
		left: 80%
	}
	span.logo-partner:before, span.logo-partner:after {
		left: 60%
	}
}

  • Jika kode css sudah di letakan, kemudian save/simpan.

    Diatas hanya menambahkan kode CSS pada tema blog, berikutnya adalah cara membuat halaman partner di blog, dan langkah berikutnya adalah dengan membuka halaman baru untuk membuat halaman partner yang nanti akan terlihat satu buah artikel tentang halaman partner blog yang kita miliki dan berisikan partner blog kalian.

Cara membuat halaman partner blog.

  • Buka blog kita sendiri
  • Pilih halaman
  • Tambah halaman
  • Pilih mode html pada halaman
  • Copy script di bawah ini
<span class="logo-masrodi">
  <amp-img alt="Nama Logo Blogmu" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHcAgCMxfVHHAVmHYNqeVtRrunSS39O3TqZFCf_GOrtSfLpwzFWs2M4HjGf9MBXXPv0Zt0RoSgIycePPRxBFApwSxL6u02TT9dxAxY2VtZdjiI6h9NdAOp6mjSDPc2dIJgzrR_IbUjo2Mv/s1600/poster3_22_213819.png" title="Nama Logo Blogmu" width="75"></amp-img>
</span>

<div id="blog-partner">
  <ul class="blog-partner">
    <li class="partner-wrap" data-tooltip="www.blogpartner.blogspot.com">
      <h3 class="title-partner"><a href="https://www.blogpartner.blogspot.com" title="Nama Blog Partner" rel="nofollow noopener" target="_blank">NAMA BLOG PARTNER</a></h3>
      <div class="deskripsi-partner">
        <span class="logo-partner" id="Niche Blog Partner" data-tooltip="Nama Pemilik Blog Partner">
          <amp-img alt="Nama Logo Partner" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Z7W7HnJmC3hkJiLMD8tKuj-K6bYuNx_3vxAp3e1t5fCrUM1gZZx-7MgdDW7HRpGUv0noimystkocsClETA7slC_qB4iamirtG6I14OXra3BaxTXsJvxsTktsMmIF8Ur-KL9m5Eax9R2L/s1600/logo-part.png" title="Nama Logo Partner" width="75"></amp-img>
        </span>
        <p>Deskripsi Blog Partner</p>
      </div>
    </li>
  </ul>
</div>
  • Kemudian simpan/save

   Perlu kita ketahui untuk yang saya beri tanda warna merah di atas perlu kita rubah menurut kebutuhan yang kita perlukan dari partner kita sendiri.

Untuk menambahkan partner blog silahkan tambahkan scrpit berikut dan letakan di atas tag </ul>.


<li class="partner-wrap" data-tooltip="www.blogpartner.blogspot.com">
  <h3 class="title-partner"><a href="https://www.blogpartner.blogspot.com" title="Nama Blog Partner" rel="nofollow noopener" target="_blank">NAMA BLOG PARTNER</a></h3>
  <div class="deskripsi-partner">
    <span class="logo-partner" id="Niche Blog Partner" data-tooltip="Nama Pemilik Blog Partner">
      <amp-img alt="Nama Logo Partner" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Z7W7HnJmC3hkJiLMD8tKuj-K6bYuNx_3vxAp3e1t5fCrUM1gZZx-7MgdDW7HRpGUv0noimystkocsClETA7slC_qB4iamirtG6I14OXra3BaxTXsJvxsTktsMmIF8Ur-KL9m5Eax9R2L/s1600/logo-part.png" title="Nama Logo Partner" width="75"></amp-img>
    </span>
  <p>Deskripsi Blog Partner</p>
  </div>
</li>

    Di atas adalah cara membuat halaman partner di blog dengan baik dan keren, sebagai contoh halaman partner bisa kita lihat pada halaman partner yang saya buat di dalam blog masrodi ini.

Catatan :

   Untuk halaman dengan menu gambar di atas merupakan cara valid amp dan gambar tidak akan tampil pada blog non amp, untuk halaman non amp kita perlu merubah gambar dengan menghapus tulisan amp pada tag img tersebut yang saya beri warna hijau, dan kemudian simpan.

Sebagai bahan pertimbangan dalam membuat halaman partner di atas silahkan masukan partner masrodi sebagai bentuk persaudaraan dalam halaman partner kalian, Silahkan masukan code masrodi di atas kode </ul> di bawah ini kodenya.


<li class="partner-wrap" data-tooltip="www.masrodi.com">
  <h3 class="title-partner"><a href="https://www.masrodi.com" title="Blog Masrodi" rel="nofollow noopener" target="_blank">Blog Masrodi</a></h3>
  <div class="deskripsi-partner">
    <span class="logo-partner" id="Blogging dan teknologi" data-tooltip="Rudi Setiawan">
      <amp-img alt="Masrodi" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHcAgCMxfVHHAVmHYNqeVtRrunSS39O3TqZFCf_GOrtSfLpwzFWs2M4HjGf9MBXXPv0Zt0RoSgIycePPRxBFApwSxL6u02TT9dxAxY2VtZdjiI6h9NdAOp6mjSDPc2dIJgzrR_IbUjo2Mv/s1600/poster3_22_213819.png" title="Masrodi" width="75"><img>
    </span>
  <p>Blog yang berisi dengan berbagi tutorial seputar dunia blogging dan teknologi serta banyak ilmu bermanfaat yang bisa di dapat sesuai dengan pengalaman </p>
  </div>
</li>


Semoga ilmu yang di bagikan ini dapat bermanfaat untuk kita semua.
Lokasi:

Posting Komentar untuk "Cara membuat halaman partner [Blogger] Keren"