Beranda
Blogger

Posting Terkait Otomatis

Postingan terkait otomatis untuk Blogger: Widget HTML/CSS/JS meningkatkan SEO & interaksi dengan saran berbasis label. Responsif, instalasi cepat!
Admin
Related Posts Accordion
Automatic Related Posts for Blogger source code

Widget postingan terkait otomatis adalah solusi ampuh bagi Blogger mana pun yang ingin meningkatkan retensi pengguna dan mengubah pengunjung biasa menjadi pengikut setia. Berdasarkan perkembangan blog saya selama bertahun-tahun, saya belajar bahwa tanpa saran cerdas, pembaca sering kali meninggalkan postingan, sehingga kehilangan konten berharga Anda. Alat intuitif ini menelusuri label postingan Anda untuk menampilkan rekomendasi yang disesuaikan, dengan mudah menjalin jaringan penemuan yang membuat pengunjung tetap tertarik dan menjelajah lebih jauh.

Menyiapkan postingan terkait otomatis untuk Blogger sangatlah mudah bagi para kreator – semuanya didukung oleh HTML, CSS, dan JavaScript yang bersih dan hemat sumber daya tanpa memperlambat situs Anda. Sepenuhnya responsif berdasarkan desainnya, platform ini beradaptasi dengan sempurna di desktop, tablet, dan ponsel, memastikan saran Anda terlihat menarik dan dapat diklik di mana saja. Tanpa plugin yang berat atau tweak yang tak ada habisnya; hanya keajaiban yang murni dan ringan yang cocok untuk tema apa pun.

Saya telah mengintegrasikan fitur postingan terkait ini ke blog saya, dan hasilnya? Lonjakan tampilan halaman per sesi yang signifikan, karena fitur ini mengkurasi nuansa "satu lagi" dengan sempurna. Fitur ini memoles profesionalisme situs Anda sekaligus meningkatkan SEO melalui tautan internal alami - mesin pencari menyukai waktu tunggu yang lebih lama yang dihasilkannya. Dengan tata letaknya yang cerdas dan dapat diperluas, pembaca mengontrol alurnya, menyembunyikan informasi tambahan saat dibutuhkan atau menampilkannya untuk penelusuran yang lebih mendalam, membuat setiap kunjungan terasa personal dan menarik.

Daftar isi

Pasang Posting Terkait Otomatis untuk Blogger

Jika Anda tertarik untuk mengintegrasikan widget postingan terkait otomatis ke dalam pengaturan Blogger Anda dengan HTML, CSS, dan JavaScript, ikuti langkah-langkah di bawah ini. Saya telah menerapkannya di situs saya beberapa kali, jadi ikuti langkah-langkahnya dengan tepat – melewatkan satu detail mungkin menyebabkan gangguan kecil, tetapi semuanya dapat diperbaiki.

Penting! Sebelum menambahkan kode apa pun ke tema XML Anda, sangat disarankan untuk mencadangkan tema Anda saat ini. Dengan demikian, jika terjadi kesalahan, Anda dapat dengan mudah memulihkannya nanti.

Ikuti semua langkahnya

  1. Copy CSS Code 
    <style>
  /*--[ copyright plusui.my.id ]--*/
.relatedPostsList{padding:0px 16px 24px}
.relatedPostsContainer{margin:20px 0;border:1px solid #e0e0e0;border-radius:10px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.04);overflow:hidden}
.relatedPostsContainer summary{cursor:pointer;font-weight:600;font-size:17px;color:#222;padding:12px 16px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;background:#f8f9fb}
.relatedPostsContainer summary::after{content:attr(data-hide);font-size:10px;color:#666}
.relatedPostsContainer[open] summary::after{content:attr(data-hide)}
.relatedPostsContainer:not([open]) summary::after{content:attr(data-show)}
.relatedPostsContainer:not([open]) .relatedPostsList{display:none!important}
.relatedPostsList{padding:10px 16px 24px}
.relatedPostsList a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;word-break:break-word;font-size:15px;color:#333;border-bottom:1px dashed #ddd;text-decoration:none;line-height:1.5em;padding:4px 0;max-height:calc(1.5em * 2 + 8px)}
</style>
  2. Buka Dasbor Blogger → Tema → Edit HTML.
  3. Klik Ctrl + F temukan tag </head>, dan Pastekan kode CSS berikut ini di atas tag </head>
  4. Salin Kode JavaScript 
    <script>
  /*<![CDATA[*/ 
  /*--[ copyright plusui.my.id ]--*/
document.addEventListener("DOMContentLoaded",()=>{ const relBox=document.querySelector(".relatedPostsList"); if(!relBox)return; let labelElem=document.querySelector(".post-labels a, .labels a, a[rel='tag']"); function fetchPosts(feedURL,fallback=false){ fetch(feedURL).then(r=>r.json()).then(data=>{ let entries=data.feed?.entry || []; let html=""; entries.forEach(e=>{ let title=e.title.$t; let link=e.link.find(l=>l.rel==="alternate").href; if(link !==location.href)html+=`<a href="${link}">${title}</a>`; }); if(!html && !fallback){ fetchPosts("/feeds/posts/default?alt=json&max-results=5",true); }else{ relBox.innerHTML=html || "<p style='color:#666;padding:10px;'>No related posts found.</p>"; } }).catch(()=>{ relBox.innerHTML="<p style='color:#666;padding:10px;'>Error loading related posts.</p>"; }); } if(labelElem){ let label=labelElem.textContent.trim(); let feedURL=`/feeds/posts/default/-/${encodeURIComponent(label)}?alt=json&max-results=`; fetchPosts(feedURL); }else{ fetchPosts("/feeds/posts/default?alt=json&max-results=5",true); } });
  /*]]>*/
</script>
  5. Klik lagi Ctrl + F temukan tag </body> dan Paste kode JS berikut ini di atas </body>.
  6. Simpan pengaturan tema.
  7. Salin Kode HTML 
    <!-- Automatic Related Posts -->
<details class="relatedPostsContainer" open>
  <summary data-show="Buka" data-hide="Tutup">Postingan Terkait</summary>
  <div class="relatedPostsList"></div>
</details>
  8. Buka postingan Blogger Anda dalam Tampilan HTML.
  9. Tempelkan kode HTML di tempat Anda ingin widget postingan terkait muncul.
  10. Simpan dan pratinjau postingan Anda – postingan akan diambil dan ditampilkan secara otomatis berdasarkan label!

Cukup masukkan cuplikan Kode HTML ini ke dalam postingan tempat Anda ingin saran terkait muncul. CSS dan JS merupakan tambahan sekali pakai pada tema Anda, jadi tidak perlu pengulangan. Anda bebas mengubah warna atau spasi, tetapi tampilannya sangat cantik, langsung pakai seperti di pengaturan saya.

Fitur & Siapa yang Dapat Menggunakan

  • Smart Label Matching: Mengambil postingan berdasarkan tag untuk rekomendasi yang sangat relevan, dengan cadangan postingan terkini.
  • Dynamic Fetching: Menggunakan feed JSON Blogger untuk pemuatan instan dan ringan tanpa plugin.
  • Fully Responsive: Skalanya bagus di setiap perangkat, menjaga tautan tetap tajam dan mudah diketuk.
  • Expandable Toggle: Dapat dilipat dengan rapi hanya dengan satu klik, mencegah halaman menjadi berantakan.
  • SEO Enhancement: Memperkuat tautan internal agar pengguna bertahan lebih lama di situs dan menyenangkan algoritma.

Siapa yang Dapat Menggunakan: Pembuat konten dengan blog yang dikelola berdasarkan tag, penulis niche, situs ulasan, atau siapa saja yang membangun ekosistem konten untuk mendorong kunjungan berulang dan pencermatan lebih dalam.

FAQ Posting Terkait Otomatis untuk Blogger

Apa itu Related Posts Otomatis untuk Blogger?

Postingan terkait otomatis untuk Blogger adalah widget dinamis yang memindai label postingan Anda atau kembali ke entri terbaru, menghasilkan daftar saran yang dapat diklik di akhir artikel. Alat posting terkait Blogger ini meningkatkan retensi pembaca dengan mempromosikan konten serupa dengan mudah, mengurangi rasio pentalan, dan memperkuat SEO melalui navigasi internal yang cerdas dan durasi sesi yang lebih lama.

Bisakah saya menambahkannya ke beberapa postingan?

Ya, menerapkan postingan terkait otomatis di beberapa entri Blogger sangatlah mudah. Cukup masukkan kode HTML ringkas ke dalam setiap postingan yang diinginkan - JavaScript akan menangani sisanya dengan melakukan kueri feed secara otomatis, menjadikannya ideal untuk seri, kategori, atau konten bertag apa pun untuk meningkatkan strategi interaksi Anda dengan lancar.

Apakah ini terintegrasi dengan semua tema Blogger?

Tentu saja - widget postingan terkait otomatis ini kompatibel dengan semua tema Blogger yang ada, karena sepenuhnya independen dari tata letak. Cukup tambahkan CSS dan JS ke template Anda sekali, dan widget ini akan langsung terpasang tanpa hambatan, meningkatkan tautan silang untuk SEO yang lebih unggul sekaligus menjaga integritas desain kustom Anda.

Bisakah saya menyesuaikan jumlah postingan yang disarankan?

Tentu saja! Menyesuaikan jumlah postingan terkait di widget Blogger Anda sangat mudah. Ubah parameter 'max-results' di URL umpan JS ke angka yang Anda inginkan (misalnya 3-7 untuk keseimbangan) - penyesuaian ini menjaga saran tetap segar dan relevan, mengoptimalkan minat pengguna tanpa membebani tata letak.

Postingan Terkait

Demo

Ingin melihatnya berfungsi?
Anda dapat memeriksa Gaya Akordeon Posting Terkait sebelum menambahkannya di Posting Blog Anda.
Mari kita lihat!

Pemikiran Akhir:

Postingan Terkait Otomatis untuk Blogger telah merevolusi alur blog saya, mengubah bacaan tunggal menjadi eksplorasi penuh. Efisien, adaptif, dan benar-benar meningkatkan daya tarik tanpa usaha ekstra.

Dari rangkaian tutorial hingga hub tematik, menggabungkan widget ini melalui HTML, CSS, dan JS adalah tiket Anda untuk mendapatkan audiens yang tertarik dan peningkatan SEO. Cobalah hari ini - saksikan trafik Anda meningkat pesat!

Posting Komentar