Cara Memasang Label Artikel Ke Dalam Thumbnail

Daftar Isi

Cara Memasang Label Artikel Ke Dalam Thumbnail Postingan
Menghapus/Menyembunyikan Label Artikel Bawaan Template

Cara Memasang Label Artikel Blog Ke Dalam Thumbnail Postingan - Di artikel kali ini saya akan membagikan tutorial cara memasang label artikel ke dalam thumbnail post yang ada di halaman depan atau homepage. Label artikel yang dimaksud adalah breadcumb blog.

Bagi yang belum tahu apa itu label atau breadcumb, label atau breadcumb adalah sebuah fitur yang dimiliki Blogger untuk mengelompokkan artikel menjadi beberapa jenis.

Contohnya jika kamu menulis sebuah artikel dengan tema atau pembahasan yang berkaitan dengan teknologi atau internet, maka kamu bisa menggunakan Internet atau Teknologi sebagai label atau breadcumb blog.

Jadi ketika ada pengunjung yang mengklik label atau breadcumb tersebut, maka pengunjung akan dialihkan ke halaman yang berisi konten-konten atau artikel dengan pembahasan Internet tadi.

Pada umumnya, label atau breadcumb ini dipasang di bawah thumbnail post, di atas judul artikel. Namun beberapa blog banyak yang memasang label ini ke dalam thumbnail post juga. Dan ternyata memang terlihat lebih bagus dan unik. Oleh karena itu, saya akan membagikan tutorial cara memasang label ke dalam thumbnail post di Blogger.

Caranya gampang kok, kita hanya akan menambahkan beberapa baris kode CSS baru ke dalam template kemudian menyalin semua kode HTML label yang digunakan pada template tersebut dan memasang label ke dalam thumbnail post. Langsung ikuti langkah-langkah di bawah ini.

Cara Memasang Label Postingan Ke Dalam Thumbnail di Blogger

Pertama-tama masuk ke dashboard Blogger kamu.
Masuk ke menu Tema » Edit HTML.

Kemudian salin dan taruh kode CSS di bawah ini tepat di atas atau sebelum kode ]]></b:skin> atau </style>

/* CSS Breadcumb Dalam Thumbnail by NaminaBoky */
.iFxd.lft {
  display: flex;
  justify-content: flex-start;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 6px;
  font-size: 12px;
  line-height: 16px;
}

/* Custom Label by NaminaBoky */
.pLbls2::before,
.pLbls2 > *::before {
  content: attr(data-text);
}
.pLbls2::before {
  opacity: 0.7;
}
.pLbls2 a:hover {
  text-decoration: none;
}
.pLbls2 > * {
  color: inherit;
  display: inline;
  color: #08102b;
  padding: 0 3px;
}
.pLbls2 > *:not(:last-child)::after {
  content: "&";
  margin-left: 2px;
}
.pLbls2 > *:last-child {
  padding-right: 10px;
}

Ganti tulisan yang ditandai dengan warnai yang kamu inginkan.

Khusus untuk pengguna template selain Median UI, Fletro Pro dan juga iMagz, tambahkan juga CSS berikut ini ke dalam template.

/* Custom Label by NaminaBoky */
.iFxd > * {
  display: flex;
  align-items: center;
  margin: 0 3px;
  padding: 5px 2.5px;
  border-radius: 8px;
  background: #f7f7f7;
  color: inherit;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
.iFxd > * svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
  margin: 0 2.5px;
  opacity: 1;
}
.iFxd .cmnt {
  padding: 5px;
  color: #08102b;
}
.iFxd .cmnt::after {
  content: attr(data-text);
  margin: 0 2.5px;
  opacity: 1;
}
/* CSS Dark Mode - Sesuaikan atau Hapus */
.drK .iFxd > * svg.line {
  stroke: #08102b;
}

Ganti tulisan yang ditandai dengan warna yang kamu inginkan.

Khusus pengguna template Median UI, Fletro Pro dan iMagz, cari kode HTML seperti di bawah ini kemudian hapus semua kodenya :
```

<b:tag class='iFxd' cond='data:post.allowComments and data:post.numberOfComments &gt; 0 or data:post.labels any (label =&gt; label.name in [ &quot;Sponsored&quot; ])' name='div'>
```
Kode HTML di atas mungkin ada beberapa dalam template, kamu cari saja yang berada di bawah thumbnail atau coba satu-satu.

Setelah kode HTML di atas dihapus, ganti dengan kode HTML di bawah ini.

<!--[ Label Thumbnail Post ]-->
<b:tag class='iFxd lft' name='div'>
	<div class='pLbls2'>
		<svg class='line' viewBox='0 0 24 24'>
			<path d='M4.16989 15.3L8.69989 19.83C10.5599 21.69 13.5799 21.69 15.4499 19.83L19.8399 15.44C21.6999 13.58 21.6999 10.56 19.8399 8.69005L15.2999 4.17005C14.3499 3.22005 13.0399 2.71005 11.6999 2.78005L6.69989 3.02005C4.69989 3.11005 3.10989 4.70005 3.00989 6.69005L2.76989 11.69C2.70989 13.04 3.21989 14.35 4.16989 15.3Z'/>
			<path d='M9.5 12C10.8807 12 12 10.8807 12 9.5C12 8.11929 10.8807 7 9.5 7C8.11929 7 7 8.11929 7 9.5C7 10.8807 8.11929 12 9.5 12Z'/>
		</svg>
		<b:include name='postLabel'/>
	</div>
</b:tag>
<!--[ Comments count ]-->
<!--<b:tag class='iFxd' cond='data:post.allowComments and data:post.numberOfComments &gt; 0 or data:post.labels any (label =&gt; label.name in [ &quot;Sponsored&quot; ])' name='div'>-->
<b:tag class='iFxd' name='div'>

Jika sudah semuanya jangan lupa klik simpan dan lihat hasilnya.

Sampai tahap ini label sudah berhasil dipasang ke dalam thumbnail post. Berarti label yang terpasang ada dua, label pertama yang berada di dalam thumbnail dan yang kedua berada di bawah thumbnail atau di atas judul artikel (template Median UI dan Fletro Pro). Menurut saya pribadi hal ini terlihat jelek dan menumpuk.

Untuk menghapus label bawaan yang berada di bawah thumbnail atau di atas judul artikel, ikuti langkah-langkah di bawah ini.

Cara Menghapus atau Menyembunyikan Label di atas Judul Artikel

Masuk ke dashboard Blogger kamu.
Masuk ke menu Tema » Edit HTML.

Kemudian tambahkan CSS di bawah ini di atas kode ]]></b:skin> atau </style>

/* Menyembunyikan Label Bawaan Template */
.pHdr >* .pLbls{display:none !important}

Atau menyembunyikan label dengan cara menghapus kode HTML label bawaan template. Cari kode HTML berikut kemudian hapus.
```

<b:include cond='data:post.labels' name='postLabel'/>
```

Itu dia tutorial cara memasang label ke dalam thumbnail post di blogger yang bisa saya sampaikan. Jika ada yang ingin ditanyakan atau kurang paham, tulis saja di kolom komentar.

Cara Memasang Label Artikel Ke Dalam Thumbnail

Cara Memasang Label Postingan Ke Dalam Thumbnail di Blogger

Cara Menghapus atau Menyembunyikan Label di atas Judul Artikel

Artikel Terkait

0 Komentar