Cara Membuat Recent Post Berdasarkan Label di Blogger

Hallo teman-teman, selamat datang di Blog Codebanba. Kali ini, saya akan memberikan tutorial tentang cara membuat dan memasang recent post berdasarkan label di blogger. Widget ini, biasanya sering digunakan orang-orang untuk menampilkan kategori lain di halaman homepage-nya.

Disini, saya akan membagikan beberapa style tampilan yang bisa kamu gunakan. Seperti, postingan lengkap dengan tanggal pembuatan, nama label, gambar postingan. Kamu bisa memilih bebas, sesuai keinginan kamu. Nah, bagi kamu yang tertarik ingin memasang widget ini di template blogger kamu. Silahkan simak ulasannya di bawah ini.

Cara membuat dan memasang Recent Post berdasarkan label di Blogger

Pastikan kamu sudah mem-backup template kamu terlebih dahulu sebelum memasang kode ini, untuk menghindari kesalahan atau error.

Pada Dashboarad Blogger, buka Tema.
Klik icon arrow down disebelah tombol SESUAIKAN, lalu klik Edit HTML.
Salin kode di bawah ini, lalu letakkan tepat di atas kode </head>.

javascript
<script>
  /* Recent post by Label by Codebanba.com */
  var numPost = 6;
  var showThumb = true;
  var showLabel = false;
  var showSnip = 100;
  var showDate = true;
</script>
<script>/*<![CDATA[*/
/* Recent post by Label by Codebanba.com */
function recentPostbyLabel(e) {var a = document, f = e.feed.entry, t, l, m, d, y, b, h, c, s, A, D;for (let i = 0; i < numPost; i++) {if (i == f.length) break;var w = "<article>";t = f[i].title.$t;for (let j = 0; j < f[i].link.length; j++) {l = 'alternate' == f[i].link[j].rel ? l = f[i].link[j].href : '#'}m = ("media$thumbnail" in f[i] !== false) ? "<a class='thumbnail' href='" + l + "'><img alt='" + t + "' src='" + f[i].media$thumbnail.url.replace(/\/s\d+(\-c)?\//, "/w600-h333-p-k-no-nu/").replace(/\=s\d+(\-c)?/, "=w600-h333-p-k-no-nu") + "'/></a>" : "<div class='thumbnail'><span class='no-thumb'>No image</span></div>";if (showThumb != false) {w += "<div class='post-thumbnail'>"+ m +"</div>"}w += "<div class='post-content'><h2 class='post-title'><a href='" + l + "' rel='bookmark'>" + t + "</a></h2>";c = (f[i].category.length >= 2) ? '<a arial-label="' + f[i].category[0].term + '" class="label" href="/search/label/' + f[i].category[0].term + '" rel="rel">' + f[i].category[0].term + '</a><a arial-label="' + f[i].category[1].term + '" class="label" href="/search/label/' + f[i].category[1].term + '" rel="rel">' + f[i].category[1].term + '</a>' : '<a arial-label="' + f[i].category[0].term + '" class="label" href="/search/label/' + f[i].category[0].term + '" rel="rel">' + f[i].category[0].term + '</a>';if (showLabel != false) {w += "<div class='post-label'>"+ c +"</div>"}s = "summary" in f[i] && showSnip > 0 ? f[i].summary.$t.replace(/<br *\/?>/gi," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,showSnip) + "&hellip;" : "";if (showSnip > 0) {w += "<div class='post-snippet'>"+ s +"</div>"}d = f[i].published.$t;y = d.substring(0, 4);b = d.substring(5, 7);h = d.substring(8, 10);A = new Array();A[1] = "Januari";A[2] = "Februari";A[3] = "Maret";A[4] = "April";A[5] = "Mei";A[6] = "Juni";A[7] = "Juli";A[8] = "Agustus";A[9] = "September";A[10] = "Oktober";A[11] = "November";A[12] = "Desember";D = A[parseInt(b, 10)];if (showDate != false) {w += "<div class='post-info'><time class='post-timestamp' datetime='" + d + "' title='Published: " + D + " " + h + ", " + y + "'>" + D + " " + h + ", " + y + "</time></div>";}w += "</div>";w += "</article>";a.write(w)}}
/*]]>*/</script>

Keterangan:

Variable	Type	Value	Keterangan
`numPost`	`number`	`6`	6 Untuk menampilkan jumlah postingan.
`showThumb`	`boolean`	`true`	Kode true untuk menampilkan gambar.
`showLabel`	`boolean`	`true`	Kode true untuk menampilkan label.
`showSnip`	`number`	`100`	100 Untuk menampilkan jumlah snippet.
`showDate`	`boolean`	`false`	Kode false untuk tidak menampilkan tanggal.

Setelah itu, cari kode </style> atau ]]></b:skin>. Lalu letakkan kode berikut di atasnya.

Style-1 - Grid 3 Column

css
/* Recent post by Label by Codebanba.com */
.recent-post {
  display: flex;
  flex-wrap: wrap;
}

.recent-post article {
  width: calc(33.334% - 10px);
  margin: 0 5px 10px;
}

.recent-post .post-thumbnail {
  margin-bottom: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.recent-post .post-content {
  padding: 0 5px;
}

.recent-post .post-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  margin: 0 0 5px;
}

.recent-post .post-title a {
  color: #222222;
}

.recent-post .post-label {
  display: flex;
  align-items: center;
  font-size: 13px;
  margin-bottom: 5px;
}

.recent-post .post-label::before {
  content: '#';
  margin-right: 2px;
}

.recent-post .post-label a:not(:last-child) {
  margin-right: 5px;
}

.recent-post .post-snippet {
  font-size: 13px;
  line-height: 1.2rem;
  color: #444444;
  margin: 10px 0;
}

.recent-post .post-info {
  display: flex;
  align-items: center;
  font-size: 13px;
  margin-top: 10px;
}

Demo

Style-2 - Grid 2 Column

css
/* Recent post by Label by Codebanba.com */
.recent-post {
  display: flex;
  flex-wrap: wrap;
}

.recent-post article {
  width: calc(50% - 10px);
  margin: 0 5px 20px;
}

.recent-post .post-thumbnail {
  margin-bottom: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.recent-post .post-content {
  padding: 0 5px;
}

.recent-post .post-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 18px;
  margin: 0 0 10px;
}

.recent-post .post-title a {
  color: #222222;
}

.recent-post .post-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 5px;
}

.recent-post .post-label::before {
  content: '#';
  margin-right: 2px;
}

.recent-post .post-label a:not(:last-child) {
  margin-right: 5px;
}

.recent-post .post-snippet {
  font-size: 14px;
  line-height: 1.4rem;
  color: #444444;
  margin: 10px 0;
}

.recent-post .post-info {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-top: 10px;
}

Demo

Style-3 - Flat

css
/* Recent post by Label by Codebanba.com */
.recent-post article {
  display: flex;
  margin: 0 0 20px;
}

.recent-post .post-thumbnail {
  width: 40%;
  flex-shrink: 1;
  margin-right: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.recent-post .post-content {
  width: 60%;
  flex-grow: 0;
}

.recent-post .post-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 20px;
  margin: 0 0 10px;
}

.recent-post .post-title a {
  color: #222222;
}

.recent-post .post-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 5px;
}

.recent-post .post-label::before {
  content: '#';
  margin-right: 2px;
}

.recent-post .post-label a:not(:last-child) {
  margin-right: 5px;
}

.recent-post .post-snippet {
  font-size: 14px;
  line-height: 1.4rem;
  color: #444444;
  margin: 10px 0;
}

.recent-post .post-info {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-top: 10px;
}

Demo

Kemudian klik simpan, dan keluar dari halaman itu.
Pada Dashboard Blogger, buka Tata Letak.
Lalu tambahkan gadget HTML/JavaScript tepat dimana kamu ingin menampilkan recent post tersebut.
Setelah ditambahkan masukkan kode berikut ke gadget HTML/JavaScript.

html
<div class='recent-post'>
  <script src='/feeds/posts/default/-/Tutorial?orderby=updated&amp;alt=json-in-script&amp;callback=recentPostbyLabel'></script>
</div>

Ganti kode yang ditandai dengan jenis label yang ingin kamu tampilkan, misal Design.

Kemudian klik simpan pada gadget tersebut.

Penutupan

Demikian untuk cara membuat dan memasang recent post berdasarkan label. Jika kamu mengikuti langkah-langkah di atas dengan benar. Pasti tidak akan terjadi kesalahan apapun. Tapi, jika masih ada kesalahan karena kode yang error silahkan laporkan lewat kolom komentar. Terimakasih sudah berkunjung dan semoga bermanfaat.

Comments

Bosindogroup
December 22, 2021 10:16 am
Delete this comment
halo kak saya mau tanya. kenapa ya javascripnya gag bisa di simpan ada kode &&1e berwarna merah
- Banba
  December 22, 2021 12:13 pm
  
  Delete this comment
  
  Ohh, bentar gan aku cek dulu..
- Banba
  December 22, 2021 1:09 pm
  
  Delete this comment
  
  Silahkan di salin ulang gan, udah saya perbaiki..
- Reply
Bosindogroup
December 23, 2021 10:49 am
Delete this comment
terima kasih gan. sangat bermanfaat kontennya. sukses selalu ya
- Banba
  December 23, 2021 1:59 pm
  
  Delete this comment
  
  Siap, makasih gan..
- Reply
Unduhah
February 28, 2022 6:55 pm
Delete this comment
gambarnya pecah (tidak tampil)
- Banba
  March 01, 2022 11:25 am
  
  Delete this comment
  
  Pecah yah gan? Link gambarnya udah pake yang baru belom gan, soalnya saat kita upload gambar ke blogger, sekarang link-nya kan udah berubah. Jadi blogger.googleusercontent bukan x.bp.blogspot.com. Soalnya script di atas saya sesuaikan dengan update blogger saat ini. Kalo gambarnya masih pake link x.bp.blogspot, kemungkinan besar gambarnya akan pecah atau tidak muncul sama sekali.
- Reply
Admin
May 16, 2022 2:38 am
Delete this comment
hi,,, sharingnya, sangat membantu. ijin tanya..untuk membuat thumbnail responsive gimana ya.. dan apakah tampilan keseluruhannya sudah responsive? Thanks
- Banba
  June 03, 2022 10:09 am
  
  Delete this comment
  
  makasih gan. untuk kode tersebut masih belom responsive. jadi agan bisa edit lagi CSS nya supaya jadi responsive.
- Reply
Belajar Forex
June 30, 2022 10:25 pm
Delete this comment
Halo mas, makasih tutorial nya akhirnya ketemu code apa yang saya cari. Saya sudah pasang dengan jumlah post 10 tapi tidak muncul kenapa ya ?
Selain itu klo untuk model ini pake auto scroll dan apa bisa di ganti pakai page number gitu mas ?
Oh iya satu lagi mas, apa bisa load post diatur random bukan post terupdate.

Maaf terlalu banyak tanyanya hehe. Terima Kasih
- Banba
  July 02, 2022 7:15 am
  
  Delete this comment
  
  1. Jika postingan tidak muncul, pastikan kamu sudah memasangnya di atas tag head. Pastikan kamu sudah memasukkan nama Label yang benar-benar ada di Blog kamu. Contohnya, Tutorial atau nama label yang ada di Blog kamu. Jika nama Label yang kamu masukkan salah, maka tidak akan muncul. Kalo masih ada error, komen lagi aja gan, biar langsung saya cek script-nya. Takut script-nya ada yang error. Tapi tadi saya cek aman sih.
  
  2. Untuk menambahkan page number, setau saya bisa saja, kita bisa pake ajax milik jQuery (kalo gak salah yaa). Tapi saya belum pernah mencobanya.
  
  3. Untuk mengatur postingan secara random, bisa gan, tapi script-nya beda sama yang di atas. Ada yang harus ditambahkan lagi.
  
  Sama-sama gan, makasih udah mampir...
- Reply
Anonymous
August 02, 2022 10:10 am

This comment has been removed by the author.

Cara Membuat Recent Post Berdasarkan Label di Blogger

Cara membuat dan memasang Recent Post berdasarkan label di Blogger

Penutupan

Related articles

Comments