CARA MEMBUAT RELATED POST blogger PALING RELEVAN DI TAHUN 2025

Oleh Di publikasikan pada:
Image

Mengapa harus menggunakan Related Post Liquid Glass di tahun 2025?

Karena tampilannya tidak hanya modern dan ringan, tetapi juga mendukung template Blogger terbaru (versi ke-3) seperti Contempo, Soho, dan Essential. Selain itu, fitur ini juga akan:

    Klik Tombol di bawah Gambar di bawah untuk melihat hasilny/b>

  • Menyegarkan tampilan Popular Post dan menambahkan tombol liquid.
  • Mempercantik tampilan homepage dengan tombol Read More bergaya liquid glass.
  • Mencegah konten <pre> dan <code> agar tidak meluber keluar batas halaman.

Langkah 1 – Tambahkan Kode Related Post di Template

  1. Masuk ke dasbor Blogger → Theme → klik tanda panah di tombol Customize → pilih Edit HTML.
  2. Gunakan Ctrl + F, cari tag: <data:post.body/>
  3. Tempelkan kode HTML dengan tag conditional berikut di atas tag tersebut:
<b:if cond='data:view.isPost'>
  <div id='related_posts'>
    <h4 style='text-align:center'>
      <i class='fa fa-book gradient-icon' aria-hidden='true'> Artikel Terkait</i>
    </h4>
    <b:loop values='data:post.labels' var='label'>
      <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgthum&max-results=50"' type='text/javascript'/>
    </b:loop>
    <ul id='related_img'>
      <script type='text/javascript'>relatpost();</script>
    </ul>
  </div>
</b:if>

Langkah 2 – Tambahkan CSS dan Font

  1. Cari tag </head> di editor template.
  2. Copy lalu Tempelkan seluruh kode berikut tepat di atas tag </head> tersebut:
<link href='https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap' rel='stylesheet'/>
<style>
/* Tambahkan CSS lengkap dari kamu di sini (sudah sangat baik) */
#related_posts {
  margin-top: 30px;
}

.related-title {
  font-size: 18px;
  color: #004080;
  text-align: center;
  margin-bottom: 15px;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
}

/* Related post list */
#related_img {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Item related post — hanya bagian ini yang diubah */
#related_img li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  margin-bottom: 12px;
  border-radius: 12px;

  /* Liquid glass effect */
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

#related_img li:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Thumbnail tetap */
#related_img img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
}

/* Judul */
#related_img .news-title {
  font-weight: bold;
  font-size: 15px;
  color: #003366;
  text-decoration: none;
  display: block;
  margin-bottom: 5px;
}

#related_img .news-title:hover {
  color: #007BFF;
}

/* Cuplikan */
#related_img .news-text {
  font-size: 13px;
  color: #555;
  line-height: 1.4;
}
    /* === Prevent HTML code overflow === */
pre, code {
  display: block;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
  max-width: 100%;
  background: #f5f5f5;
  color: #111111;
  padding: 10px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.5;
  font-family: 'Courier New', monospace;
  box-sizing: border-box;
}

.post-body pre {
  overflow: auto;
  word-break: break-word;
}

.post-body {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
/* === SIDEBAR MENU LIQUID GLASS === */
.sidebar-menu {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.15);
  padding: 20px;
  border-radius: 12px;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
  color: #111;
}

.sidebar-menu h3 {
  font-size: 18px;
  text-align: center;
  margin-bottom: 15px;
  color: #003366;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 8px;
}

/* Menu Vertikal */
.menu-vertikal {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-vertikal li {
  position: relative;
  margin-bottom: 10px;
}

.menu-vertikal li a {
  display: block;
  padding: 10px 16px;
  background: rgba(255,255,255,0.25);
  color: #000;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.1),
    inset 0 1px 1px rgba(255,255,255,0.2);
  transition: all 0.3s ease;
}

.menu-vertikal li a:hover {
  background: rgba(255,255,255,0.4);
  transform: translateY(-1px);
}

/* Dropdown */
.menu-vertikal .dropdown > a::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.menu-vertikal .submenu {
  display: none;
  list-style: none;
  padding-left: 15px;
  margin-top: 8px;
}

.menu-vertikal .dropdown:hover .submenu {
  display: block;
}

.menu-vertikal .submenu li a {
  background: rgba(255,255,255,0.2);
  font-size: 0.95rem;
}
       
       
       /* === Efek Liquid Glass untuk menuIcon === */
.hamburger-menu.flat-icon-button.ripple {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 10px;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.1),
    inset 0 1px 2px rgba(255,255,255,0.2);
  transition: all 0.3s ease;
}

.hamburger-menu.flat-icon-button.ripple:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

/* === Efek Liquid Glass untuk tombol Read More === */
.readmore a, a.read-more {
  display: inline-block;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #0a3d62;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 10px 22px;
  border-radius: 50px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow:
    0 6px 12px rgba(0,0,0,0.1),
    inset 0 1px 2px rgba(255,255,255,0.3),
    inset 0 -3px 5px rgba(0,0,0,0.05);
  transition: all 0.25s ease;
}

.readmore a:hover, a.read-more:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.readmore a:active, a.read-more:active {
  transform: translateY(1px);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.2),
    inset 0 2px 3px rgba(0,0,0,0.2);
}
       /* === Efek Liquid Glass untuk Read More === */
.readmore a,
a.read-more,
a.jump-link,
.blog-post .jump-link {
  display: inline-block;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #0a3d62;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 10px 22px;
  border-radius: 50px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow:
    0 6px 12px rgba(0,0,0,0.1),
    inset 0 1px 2px rgba(255,255,255,0.3),
    inset 0 -3px 5px rgba(0,0,0,0.05);
  transition: all 0.25s ease;
}

.readmore a:hover,
a.read-more:hover,
a.jump-link:hover,
.blog-post .jump-link:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.readmore a:active,
a.read-more:active,
a.jump-link:active,
.blog-post .jump-link:active {
  transform: translateY(1px);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.2),
    inset 0 2px 3px rgba(0,0,0,0.2);
}
       
       /* === Liquid Glass untuk Tombol Read More === */
.jump-link.flat-button.ripple {
  display: inline-block;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50px;
  padding: 10px 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 2px rgba(255, 255, 255, 0.3),
    inset 0 -3px 5px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
  text-align: center;
}

.jump-link.flat-button.ripple a {
  text-decoration: none;
  color: #0a3d62;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-block;
}

.jump-link.flat-button.ripple:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.jump-link.flat-button.ripple:active {
  transform: translateY(1px);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.2),
    inset 0 2px 3px rgba(0,0,0,0.2);
}

</style>
<script type='text/javascript'>
/* Tambahkan JavaScript relpost lengkap dari kamu di sini (sudah sangat baik) */
/*<![CDATA[*/
var reljudul = [], relurls = [], relcuplikan = [], relgambar = [];
var relnum = 0, relmaxposts = 5, numchars = 135, morelink = " ";

function saringtags(teks, batas) {
  var teksBersih = teks.split("<").map(function(e) {
    return e.indexOf(">") != -1 ? e.substring(e.indexOf(">")+1) : e;
  }).join("");
  return teksBersih.substring(0, batas - 1);
}

function relpostimgthum(json) {
  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    var title = entry.title.$t;
    var content = entry.content ? entry.content.$t : (entry.summary ? entry.summary.$t : "");
    var cuplikan = saringtags(content, numchars);
    var thumb = entry.media$thumbnail ? entry.media$thumbnail.url : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4WSGpLArnPuW4T8EDt-YT78XzULowWf3rGgQW5zhwfvlFFx5BliQi-vOABpVZ4NRX65P0JKixtFBA0Aa1YEY30qnH9A_hvEo-H1HnmJ6CpNcTekgd503c3lAHBaNcdPJueY-WqBmLdbR1/d/noimagethumb.gif";
    
    var link = "";
    for (var j = 0; j < entry.link.length; j++) {
      if (entry.link[j].rel == "alternate") {
        link = entry.link[j].href;
        break;
      }
    }

    reljudul.push(title);
    relcuplikan.push(cuplikan);
    relgambar.push(thumb);
    relurls.push(link);
  }
}

function contains(arr, val) {
  return arr.indexOf(val) !== -1;
}

function relatpost() {
  var uniqueUrls = [], uniqueJudul = [], uniqueCuplikan = [], uniqueGambar = [];

  for (var i = 0; i < relurls.length; i++) {
    if (!contains(uniqueUrls, relurls[i])) {
      uniqueUrls.push(relurls[i]);
      uniqueJudul.push(reljudul[i]);
      uniqueCuplikan.push(relcuplikan[i]);
      uniqueGambar.push(relgambar[i]);
    }
  }

  // Acak
  for (var i = 0; i < uniqueJudul.length; i++) {
    var swap = Math.floor(Math.random() * uniqueJudul.length);
    [uniqueJudul[i], uniqueJudul[swap]] = [uniqueJudul[swap], uniqueJudul[i]];
    [uniqueUrls[i], uniqueUrls[swap]] = [uniqueUrls[swap], uniqueUrls[i]];
    [uniqueCuplikan[i], uniqueCuplikan[swap]] = [uniqueCuplikan[swap], uniqueCuplikan[i]];
    [uniqueGambar[i], uniqueGambar[swap]] = [uniqueGambar[swap], uniqueGambar[i]];
  }

  var printed = 0;
  var idx = Math.floor(Math.random() * uniqueJudul.length);
  var current = idx;
  var currentUrl = document.URL;

  while (printed < relmaxposts) {
    if (uniqueUrls[idx] != currentUrl) {
      var g = "<li>";
      g += "<a href='" + uniqueUrls[idx] + "' rel='nofollow' target='_top'><img src='" + uniqueGambar[idx] + "' alt='Thumbnail'></a>";
      g += "<div>";
      g += "<a class='news-title' href='" + uniqueUrls[idx] + "' target='_top'>" + uniqueJudul[idx] + "</a>";
      g += "<span class='news-text'>" + uniqueCuplikan[idx] + " ...</span>";
      g += "</div>";
      g += "</li>";
      document.write(g);
      printed++;
    }
    idx = (idx + 1) % uniqueJudul.length;
    if (idx === current) break; // agar tidak loop tak berujung
  }
}
/*]]>*/ 
</script>

Langkah 3 – Simpan Template

Klik tombol Save di pojok kanan atas halaman editor template.

Catatan Tambahan:

  • Valid HTML5, mendukung tag conditional agar hanya tampil di halaman post, bukan di static page.
  • Efek Liquid Glass sudah diterapkan ke berbagai elemen: Related Post, Tombol Read More, Menu Sidebar, dan Ikon Menu.
  • Telah diuji di berbagai template Blogger versi ke-3 seperti: Contempo, Soho, Essential.
  • Tidak ada watermark atau kode tersembunyi. Aman digunakan untuk personal maupun profesional.

Silakan beri komentar jika tutorial ini bermanfaat. Selamat mencoba!

Comments

Post a Comment

Populer

NGODING PAKAI TABLET ANDROID? MENGAPA TIDAK

Oleh Di publikasikan pada:
Image
Orang kalau ngoding pastinya masih lebih banyak menggunakan laptop baik pc windows maupun Macbook. Namun lama kelamaan hal tersebut mulai berubah...kini banyak orang mulai ngoding menggunakan iPad dan tablet Android. Nah ini pertanda laptop PC mulai tidak populer lagi bukan? Hal tersebut tidak terlepas dari perubahan atau transformasi perangkat keras dan perangkat lunak tablet yang sudah semakin mumpuni dan gap-nya terhadap perangkat PC terutama laptop dan macbook sudah hampir tidak terlihat lagi. lagipula mobilitasnya yang sangat tinggi itu lho. Jika dilihat dari perangkat keras iPad tahun 2021 mulai menggunakan prosesor M1 namun iPad sebelumnya yang di rilis tahun 2019 -2021 juga sudah dipergunakan oleh para programmer buat ngoding, bagaimana dengan tablet Android? Ternyata Tablet Android seperti samsung tab S6 versi murah yang di sebut Tab s6 lite juga mumpuni dipergunakan buat ngoding, tapi dengan sedikit udaha lebih. Di tahun 2023 ini Tab s9 terutama yang versi ultra telah di daul...
Lanjutin Baca »

2 CARA MEMATIKAN PERANGKAT TABLET TAB S7/S8 SAMSUNG

Oleh Di publikasikan pada:
Image
Semua varian tablet flagship Samsung ini tidak memiliki opsi tombol fisik untuk mematikannya. Terutama bagi kalian yang akan dan baru memilikinya. Oleh karena perangkat mobile seperti hape dan termasuk tablet memang selalu stand by dan jarang dimatikan, kadang orang lupa kepada opsi mematikannya.  kredit gambar: samsung.com Perangkat perangkat mobile biasanya memang selalu hidup dan standby, hanya istirihat pada saat charging battery. Kalian perlahan akan menyadari ada 2 cara mematikan tablet ini ke posisi mati. 1. Cara pertama dalam posisi DEX dengan keyboard. Samsung tab S7 memiliki opsi DEX, dimana perangkat ini menjadi berfungsi seperti sebuah laptop apalagi ketika di pasangkan dengan keyboard bawaanya. DEX membuat posisi layar menjadi landscape seperti layaknya layar PC dekstop dan Laptop dapat dengan nyaman dipergunakan buat bekerja dan berproduksi. Posisi ini membuat tablet ini dalam banyak hal dapat menggantikan laptop. Untuk mematikannya kalian harus mengusap layar bawah b...
Lanjutin Baca »

CARA MEMASANG MENU NAVIGASI BLOGGER MURNI CSS

Oleh Di publikasikan pada:
Image
Menu ini cukup keren, dan ia hanya terdiri dari pengaturan CSS, tidak ada Javascript. Tanpa Javascript berarti ringan. Artinya ringan dan responsif. Menu open hamburgernya juga beranimasi. Saat di sentuh dan di klik akan berubah menjadi menu tutup (silang). Jadi tampak lebih intuitif, lebih hidup dan tidak monoton. Saya merekomendasikan menu navigasi ini jika Kalian menginginkan menu navigasi yang beda, silahkan memasangnya. Bayangkan sebuah menu sederhana namun tampak premium Judul blog, menu dan tombol pencarian dalam satu batang bar, benar benar menghemat ruang. Bayangkan dengan menggunakan ini sebagai menu navigasi pada halaman blogger default (bawaan) pengunjung tidak mengenali template kalian lagi. Karena template blog tersebut akan jadi tampak premium:  Lihat DEMO Jadi setelah melihat demonya dapat di ambil kesimpulan:  Menu hamburger beranimasi Navbar menunya posisi 'fixed' Keuntungan menggunakannya: Murni CSS sehingga ringan Mudah di pasang pada template varian terbar...
Lanjutin Baca »