Cara Membuat Kode Baca Juga Artikel Lainnya Berdasarkan Tiga Label di Blogspot untuk Melejitkan CTR dan SEO Blog

Meningkatkan durasi kunjungan dan menurunkan bounce rate adalah tantangan terbesar bagi setiap pemilik blog. Salah satu solusi paling efektif untuk mengatasi masalah ini adalah dengan menerapkan membuat kode baca juga artikel lainnya di blogger yang bekerja secara otomatis berdasarkan relevansi topik. Teknik ini tidak hanya memanjakan pengunjung dengan navigasi yang mudah, tetapi juga mengirimkan sinyal positif ke mesin pencari Google bahwa situs kita memiliki struktur internal linking yang kuat.

Menampilkan rekomendasi artikel berdasarkan satu label mungkin sudah biasa dan sering kali menghasilkan artikel yang itu-itu saja. Namun, dengan memanfaatkan tiga label sekaligus, sistem rekomendasi pada blog kita akan menjadi jauh lebih dinamis, kaya akan variasi konten, dan tentunya memiliki tingkat relevansi yang sangat tinggi bagi pembaca. Artikel kali ini akan saya coba mengupas tuntas cara membuat dan memasang script tersebut tanpa membuat loading blog menjadi lambat.

gambar di ambil dari tangkapan layar ngerpik blog ini saat menggunakan template starter

Mengapa Internal Linking Berdasarkan Label Sangat Penting?

Mesin pencari seperti Google menggunakan robot perayap untuk memahami struktur dan kedalaman konten di dalam sebuah blog dan website. Ketika kita menghubungkan satu artikel dengan artikel lainnya melalui tautan internal yang relevan, kita sedang membantu robot tersebut memetakan topik utama blog kita secara keseluruhan. Hal ini sangat berdampak pada peningkatan otoritas halaman atau page authority blog di mata Pencarian Google.

Dari sudut pandang pengalaman pengguna atau user experience, menyajikan kotak baca juga yang tepat sasaran akan memicu rasa ingin tahu pembaca. Jika seorang pengunjung sedang membaca tutorial tentang optimasi kecepatan blogger, dan di tengah artikel mereka melihat rekomendasi mengenai cara kompres gambar di blogspot serta optimasi kode CSS blogger, kemungkinan besar mereka akan mengeklik tautan tersebut. Aktivitas inilah yang disebut dengan peningkatan nilai Click-Through Rate internal situs blog kita.

Konsep Kerja Script Baca Juga dengan Tiga Label

Prinsip kerja dari kode ini sebenarnya cukup sederhana namun sangat cerdas. Script akan membaca meta data atau label dari postingan aktif yang sedang dibuka oleh pengunjung. Dari sekian banyak label yang mungkin kita miliki, script ini secara khusus akan mengambil maksimal tiga label pertama yang disematkan pada postingan tersebut.

Setelah mendapatkan tiga label tersebut, script akan mengirimkan permintaan ke feed JSON blogspot kita secara simultan. Sistem kemudian mengumpulkan daftar artikel terbaru yang memiliki label yang sama, menyaringnya agar tidak terjadi duplikasi tautan, mengacak hasilnya agar selalu segar, dan menampilkannya dalam bentuk kotak rekomendasi yang elegan di tengah atau akhir artikel secara otomatis.

Langkah Mudah Memasang Kode di Blogspot

Proses pemasangan kode ini sangat fleksibel dan dapat disesuaikan dengan kebutuhan. Kita dapat memasangnya langsung di dalam html template agar muncul otomatis di setiap artikel, atau memasangnya secara manual di dalam postingan tertentu saat kita sedang menulis artikel baru.

Jika memilih untuk memasangnya secara manual di setiap postingan, langkah pertama yang harus di lakukan adalah masuk ke dashboard blogger terlebih dahulu. Silakan buat postingan baru atau edit postingan lama yang ingin ditambahkan widget rekomendasi ini.

Setelah berada di halaman editor postingan, ubah mode penulisan dari Tampilan Menulis menjadi Tampilan HTML dengan mengeklik ikon pensil di pojok kiri atas editor. Gulir halaman ke bagian tengah atau akhir paragraf di mana kita ingin menyelipkan kotak baca juga tersebut. Tempelkan seluruh kode HTML, CSS, dan Javascript yang telah disediakan di atas, lalu klik publikasikan atau perbarui postingan.

Cara Kustomisasi Label pada Script

Untuk memastikan script bekerja secara maksimal, kita perlu menyesuaikan nama label yang ada di dalam script dengan label aktif yang digunakan di blog kita. Cari bagian kode labelsArray.push dan ganti kata di dalam tanda kutip dengan nama label asli secara presisi, termasuk penggunaan huruf besar dan kecil.

Sebagai contoh, jika blog membahas tentang dunia kuliner, kita bisa mengganti nama label tersebut menjadi Resep, Kue Tradisional, dan Tips Memasak. Jika pembaca sedang melihat salah satu topik tersebut, mereka akan mendapatkan rekomendasi silang dari ketiga kategori besar tersebut yang membuat mereka betah membaca lebih lama.

Persiapan untuk Kode HTML dan CSS untuk Desain Responsif

Disini saya akan membagi 2 versi kode, yang pertama dari MODE AI GEMINI, dan versi kedua VERSI EDIT SAYA, silahkan teman teman blogger pilih yang mana mau diterapkan dan diaplikasikan dalam blog teman teman semua.

VERSI MODE AI GEMINI

Sebelum melangkah pada bagian Javascript, kita perlu menyiapkan struktur tampilan atau CSS terlebih dahulu agar kotak baca juga terlihat profesional dan menyatu dengan desain template blog kita. Desain yang bersih, modern, dan responsif sangat krusial agar tampilan tetap rapi saat diakses melalui perangkat seluler maupun komputer desktop.

Berikut adalah kode kombinasi HTML, CSS, dan Javascript yang dirancang khusus agar ringan, ramah SEO, dan tidak membebani kecepatan loading blogspot. Teman teman dapat menyalin kode di bawah ini secara utuh untuk digunakan nanti. Salin kode dibawah ini tepat diatas </body> pada Edit HTML Template Blogger:

Kode Full Ai:

</> Versi Ai

<pre><code>
<style>
.baca-juga-box {
    margin: 20px 0;
    padding: 15px;
    background-color: #f9f9f9;
    border-left: 5px solid #0073ff;
    border-radius: 4px;
    font-family: Arial, sans-serif;
}
.baca-juga-title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}
.baca-juga-list {
    margin: 0;
    padding: 0;
}
.baca-juga-item {
    margin-bottom: 6px;
}
.baca-juga-item:last-child {
    margin-bottom: 0;
}
.baca-juga-link {
    color: #0073ff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: color 0.2s ease;
}
.baca-juga-link:hover {
    color: #0056b3;
    text-decoration: underline;
}
</style>

<div class="baca-juga-box">
    <div class="baca-juga-title">BACA JUGA ARTIKEL LAINNYA:</div>
    <div class="baca-juga-list" id="baca-juga-container"></div>
</div>

// Silakan isi target 3 label blog Anda secara manual di bawah ini jika tidak ingin otomatis
labelsArray.push("Blogger");
labelsArray.push("Tutorial");
labelsArray.push("Template");

var relatedPosts = [];
var completedRequests = 0;

function fetchRelatedPosts() {
    labelsArray.forEach(function(label) {
        var scriptUrl = bloggerUrl + "/feeds/posts/summary/-/" + encodeURIComponent(label) + "?alt=json-in-script&callback=processData&max-results=5";
        var script = document.createElement("script");
        script.src = scriptUrl;
        document.body.appendChild(script);
    });
}

window.onload = function() {
    fetchRelatedPosts();
};
</script>
</code></pre>

Silahkan ganti dan rubah kode:

Silakan isi target 3 label blog teman teman secara manual di bawah ini jika tidak ingin otomatis labelsArray.push("Blogger"); labelsArray.push("Tutorial"); labelsArray.push("Template");
var maxResults = 3; // Sesuaikan jumlah maksimal artikel yang muncul sesuai keinginan.
SAVE EDIT HTML Template

VERSI EDIT SAYA

Langsung saja salin kode dibawah ini tepat diatas </body> pada Edit HTML Template Blogger:

Kode Versi Saya:

</> Versi Saya

<style>
.kotak-baca-tengah {
  margin: 25px auto;
  padding: 18px;
  background-color: #fafafa;
  border-left: 5px solid #007bff;
  border-top: 1px solid #eee;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  border-radius: 4px;
  clear: both;
  font-family: sans-serif;
}
.kotak-baca-tengah .judul-baca {
  font-weight: bold;
  color: #222;
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.kotak-baca-tengah ul {
  margin: 0 0 0 20px !important;
  padding: 0 !important;
  list-style-type: disc !important;
}
.kotak-baca-tengah ul li {
  margin-bottom: 8px !important;
  padding: 0 !important;
}
.kotak-baca-tengah a {
  color: #007bff;
  font-weight: bold;
  text-decoration: none;
  font-size: 15px;
}
.kotak-baca-tengah a:hover {
  text-decoration: underline;
}
</style>

<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
function pasangArtikelTerkaitTengah() {
  // Mengambil 50 artikel terbaru untuk disaring berdasarkan label yang Anda inginkan
  var urlFeed = "/feeds/posts/summary?alt=json&max-results=50";
  
  // Daftar label target (Pastikan huruf besar-kecilnya mirip dengan di dasbor Blogger)
  var labelTarget = ["Blogger", "My Histori", "Template"];

fetch(urlFeed)
    .then(response => response.json())
    .then(data => {
      if (data.feed && data.feed.entry) {
        var entri = data.feed.entry;
        var urlSekarang = window.location.href.split('?')[0];
        var listHTML = "";
        var totalTersisip = 0;

for (var i = 0; i < entri.length; i++) {
          if (totalTersisip >= 5) break; // Batasi maksimal 5 artikel di dalam kotak
          
          var post = entri[i];
          var linkArtikel = post.link.find(l => l.rel === "alternate").href.split('?')[0];
          
          // Lewati jika artikel ini adalah artikel yang sedang dibuka pembaca
          if (linkArtikel === urlSekarang) continue;

// Cek apakah artikel memiliki salah satu dari 3 label target
          var punyaLabelTarget = false;
          if (post.category) {
            for (var j = 0; j < post.category.length; j++) {
              var namaLabelPost = post.category[j].term;
              if (labelTarget.includes(namaLabelPost)) {
                punyaLabelTarget = true;
                break;
              }
            }
          }

// Jika cocok, masukkan ke dalam daftar rekomendasi
          if (punyaLabelTarget) {
            var judulArtikel = post.title.$t;
            listHTML += "<li><a href='" + linkArtikel + "'>" + judulArtikel + "</a></li>";
            totalTersisip++;
          }
        }

// Jika ada artikel yang cocok, tampilkan kotak baca juga
        if (totalTersisip > 0) {
          var susunanKotak = '<div class="kotak-baca-tengah"><span class="judul-baca">BACA JUGA ARTIKEL LAINNYA:</span><ul>' + listHTML + '</ul></div>';
          
          // Selector area konten artikel
          var areaKonten = document.querySelector(".post-body, .entry-content, article, #post-body, .post-content, .post-inner");
          if (areaKonten) {
            var paragraf = areaKonten.querySelectorAll("p");
            
            if (paragraf.length > 1) {
              var indeksTengah = Math.floor(paragraf.length / 2);
              paragraf[indeksTengah].insertAdjacentHTML('beforebegin', susunanKotak);
            } else {
              // Cadangan jika format postingan tidak menggunakan tag <p>
              areaKonten.insertAdjacentHTML('beforeend', susunanKotak);
            }
          }
        }
      }
    })
    .catch(err => console.error("Gagal memuat artikel terkait:", err));
}

// Jalankan skrip setelah struktur halaman siap
if (document.readyState === 'complete' || document.readyState === 'interactive') {
  pasangArtikelTerkaitTengah();
} else {
  window.addEventListener("DOMContentLoaded", pasangArtikelTerkaitTengah);
}
//]]>
</script>
</b:if>

Silahkan ganti dan rubah kode:

var labelTarget = ["Blogger", "My Histori", "Template"]; // sesuai label blog teman teman.
if (totalTersisip >= 5) break; // Sesuaikan jumlah maksimal artikel yang muncul sesuai keinginan.
SAVE EDIT HTML Template

Manfaat Nyata Penerapan Widget Baca Juga Multi-Label

Dampak langsung dari penerapan strategi ini adalah peningkatan pageviews per session secara signifikan. Ketika seorang pengunjung menemukan satu artikel yang bermanfaat, widget ini langsung menawarkan tiga alternatif bacaan relevan lainnya yang siap diklik tanpa memaksa pengunjung kembali ke halaman beranda atau menu navigasi utama blog.

Selain meningkatkan kenyamanan pembaca, struktur tautan ini sangat disukai oleh mesin pencari. Dengan menghubungkan artikel lama dan baru melalui label yang sama, kita sedang mengalirkan jus link atau link juice secara merata ke seluruh halaman blog kita. Ini adalah taktik SEO on-page yang sangat ampuh untuk mendongkrak posisi artikel-artikel lama yang mulai kehilangan traffic di halaman hasil pencarian.

Pertanyaan yang Sering Diajukan

Apakah widget ini akan memperlambat loading blog Blogger saya?

Sama sekali tidak. Script ini menggunakan feed JSON bawaan dari blogspot yang sangat ringan dan dipanggil secara asinkron setelah halaman utama selesai dimuat. Desain CSS yang minimalis juga memastikan tidak ada beban tambahan pada memori peramban pengunjung.

Dapatkah saya menampilkan lebih dari tiga artikel rekomendasi?

Tentu saja bisa. kita hanya perlu mengubah nilai pada variabel maxResults di dalam script di atas sesuai dengan jumlah artikel yang ingin ditampilkan. Namun, untuk menjaga estetika dan kenyamanan pembaca di perangkat mobile, sangat disarankan untuk menampilkan tiga hingga lima artikel saja.

Bagaimana jika postingan saya tidak memiliki salah satu dari tiga label tersebut?

Sistem script ini dirancang sangat fleksibel. Jika salah satu label yang didefinisikan tidak ditemukan atau tidak memiliki postingan terkait, script akan secara otomatis beralih mencari artikel dari label lainnya yang tersedia sehingga kotak rekomendasi tidak akan pernah kosong.

Kesimpulan

Penerapan cara membuat kode baca juga artikel lainnya berdasarkan tiga label di blogspot merupakan langkah strategis untuk mengoptimalkan potensi SEO dan CTR blog kita secara maksimal. Dengan navigasi internal yang rapi, pengunjung akan betah berlama-lama membaca setiap untaian informasi berharga yang telah kita sajikan di blog kesayangan kita.

Kini kita tidak perlu lagi khawatir dengan tingginya angka bounce rate pada statistik Google Search Console ataupun Google Analytics. Segera terapkan panduan praktis ini, kustomisasi tampilannya agar senada dengan identitas visual blog teman teman semua, dan rasakan transformasi positif pada performa lalu lintas organik blog blogspot dalam beberapa minggu ke depan. Salam Ngrapik Blog.

Meta Hastags: #BloggerTutorial #SEOOnPage #BlogspotHTML #InternalLinking #OptimasiCTR #DesainBlogger #NgerapikBlog