Script Random Post Blogger

Dalam artikel ini, saya akan share beberapa kode script random post untuk di pasang di blogspot atau blogger. Dari mulai tampilan random post yang sederhana, sampai tampilan ui modern. Tapi tetap dengan konsep SEO Friendly, ringan saat load, dan responsive desain.

Untuk anda yang sedang mencari script Random post yang siap pasang untuk blog atau mencari Tutorial cara memasang script, semoga dengan adanya artikel di blog sederhana ini, bisa sedikit membantu dalam dunia blogging anda, khususnya untuk pemula seperti saya.

Baiklah kita lanjut ke bahasan tentang kode script random post

Apa Itu Script Random Post dan Fungsinya pada Blog

Script random post adalah kode yang digunakan untuk menampilkan postingan secara acak dari blog atau website. Script ini biasanya dipasang pada sidebar, bawah artikel, halaman tertentu, atau widget khusus agar pengunjung melihat artikel yang berbeda setiap kali halaman dimuat.

Pada blog, terutama platform seperti Blogger, script random post sangat berguna untuk meningkatkan interaksi pengunjung. Dengan menampilkan artikel secara acak, visitor akan menemukan konten lama yang mungkin sebelumnya tidak terlihat.

Pengertian Script Random Post

Random post merupakan sistem otomatis yang mengambil beberapa artikel dari database blog lalu menampilkannya secara acak berdasarkan aturan tertentu. Proses ini biasanya dilakukan menggunakan JavaScript yang mengambil data feed postingan dan mengacak urutannya sebelum ditampilkan.

Karena bekerja secara otomatis, script ini tidak perlu diperbarui manual setiap kali ada artikel baru. Semua postingan yang sudah terbit bisa langsung masuk ke dalam daftar acak.

Fungsi Script Random Post

Script random post memiliki banyak manfaat untuk pengelolaan blog, di antaranya:

1. Menampilkan artikel secara dinamis
Setiap refresh halaman dapat menampilkan artikel berbeda/acak sehingga tampilan blog terasa lebih hidup.

2. Meningkatkan pageview
Pengunjung berpeluang membuka artikel lain yang sebelumnya tidak mereka lihat. dan itu bisa menambah trafik page view stau halaman yang di lihat pada blig.

3. Menghidupkan artikel lama
Konten lama yang jarang dikunjungi bisa muncul kembali karena system random dari script, sehingga berpeluang bisa mendapatkan trafik kembali.

4. Mengurangi bounce rate
Dengan melihat list postingan acak yang di tampilkan di blog, Pengunjung cenderung menjelajahi lebih banyak halaman.

5. Membantu internal linking otomatis
Script random post menjadi solusi praktis untuk menampilkan tautan antar artikel. tanpa perlu membuat manual di dlm postingan.

Cara Kerja Script Random Post

Secara umum, script random post bekerja melalui beberapa tahap:

Pertama, script mengambil data postingan dari feed blog.

Kedua, data tersebut diproses menggunakan fungsi pengacakan.

Ketiga, hasil acakan dipilih sesuai jumlah yang ingin ditampilkan.

Keempat, postingan ditampilkan ke halaman dalam bentuk daftar, kartu, thumbnail, atau slider.(tergantung selera)

Kelebihan Menggunakan Script Random Post

Beberapa kelebihan utama script random post yang akan saya bagikan ini yaitu ringan, otomatis, fleksibel, tampilan menarik dan mudah dipasang pada berbagai template blog.

Selain itu, script random post yang sahare disini sebagian sudah dikombinasikan dengan desain modern seperti card grid, slider horizontal, atau widget rekomendasi interaktif.

Tempat Pemasangan Script Random Post

Script ini biasanya dipasang di beberapa area strategis seperti:

- Sidebar blog
- Bawah artikel
- Halaman homepage
- Popup rekomendasi artikel
- Widget artikel terkait

Perbedaan Random Post dan Related Post

Random post menampilkan artikel secara acak tanpa melihat hubungan topik.

Sedangkan related post menampilkan artikel berdasarkan label, kategori, atau kemiripan isi artikel yang sedang dibuka saat itu.

Keduanya sama-sama berguna, namun random post lebih cocok untuk eksplorasi konten secara luas.

Kumpulan kode script Random Post Keren

Dibawah ini adalah beberapa contoh kode cript random post yang siap anda copy dan di paste pada blog anda

1. Random Post dengan thumbnail besar
Menampilkan list postingan dengan tampilan gird kartu yang menarik di tambah thumbnail yang jelas

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Random Post Thumbnail Besar </div> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <div id="random-posts" class="random-posts"></div> <style> .random-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 10px; } .random-post { position: relative; text-align: center; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; transition: transform 0.3s; } .random-post:hover { transform: scale(1.05); } .random-post img { width: 100%; height: 150px; object-fit: cover; } .random-post h2 { font-size: 16px; margin: 10px 5px; font-weight: bold; color: #333; } .random-post a { text-decoration: none; color: inherit; } </style> <script> // Konfigurasi URL Feed Blog const blogUrl = window.location.origin; const feedUrl = `https://safelink-aza.blogspot.com/feeds/posts/default?alt=json&max-results=50`; // Ambil Data Postingan dan Tampilkan Secara Acak fetch(feedUrl) .then(response => response.json()) .then(data => { const posts = data.feed.entry; const randomPostsContainer = document.getElementById('random-posts'); const randomIndexes = Array.from({ length: 5 }, () => Math.floor(Math.random() * posts.length)); randomIndexes.forEach(index => { const post = posts[index]; const title = post.title.$t; const link = post.link.find(l => l.rel === "alternate").href; const thumbnail = post.media$thumbnail ? post.media$thumbnail.url : "https://via.placeholder.com/150"; randomPostsContainer.innerHTML += ` <div class="random-post"> <a href="${link}"> <img src="${thumbnail}" alt="${title}"> <h2>${title}</h2> </a> </div> `; }); }); </script>
2. Random Post dengan Animasi ke 1
Menampilkan Cuplikan Judul postingan secara acak dengan efek animasi zoom in/out

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .box{ padding:20px; background:#f5f5f5; margin-bottom:15px; border-radius:8px; font-family:Arial,sans-serif } #randomPostDiv{ width:100%; min-height:250px; background:#f4f4f4; display:flex; justify-content:center; align-items:center; text-align:center; font-family:Arial,sans-serif; overflow:hidden; border-radius:10px; padding:20px; box-sizing:border-box } .random-post{ font-size:24px; font-weight:bold; opacity:0; animation:fadeIn 1.5s ease forwards } .random-post a{ text-decoration:none; color:#222; transition:.3s } .random-post a:hover{ color:#007bff } @keyframes fadeIn{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:translateY(0) } } @keyframes shine{ 0%{background-position:0% 0} 100%{background-position:-200% 0} } </style> <div class="box"> Random Post Animasi 1 </div> <div id="randomPostDiv"> <h2 class="random-post" id="randomPostText">Memuat postingan...</h2> </div> <script> const blogURL="https://safelink-aza.blogspot.com"; const randomPostText=document.getElementById("randomPostText"); function fetchRandomPost(){ const oldScript=document.getElementById("jsonpScript"); if(oldScript) oldScript.remove(); const script=document.createElement("script"); script.id="jsonpScript"; script.src=blogURL+"/feeds/posts/default?alt=json-in-script&max-results=50&callback=showRandomPost"; document.body.appendChild(script); } function showRandomPost(data){ try{ const posts=data.feed.entry; if(!posts || posts.length===0){ randomPostText.innerHTML="Tidak ada postingan ditemukan"; return; } const randomPost=posts[Math.floor(Math.random()*posts.length)]; const title=randomPost.title.$t; const link=randomPost.link.find(l=>l.rel==="alternate").href; randomPostText.style.animation="none"; randomPostText.offsetHeight; randomPostText.innerHTML=` <a href="${link}" target="_blank">${title}</a> `; randomPostText.style.animation="fadeIn 1.5s ease forwards"; }catch(e){ randomPostText.innerHTML="Gagal memuat postingan"; } } fetchRandomPost(); setInterval(fetchRandomPost,5000); </script> <hr> Code by: <a href="https://ayi-service.blogspot.com" target="_blank" style=" background:linear-gradient(60deg,#333,#222,#eee); background-size:300% 10%; color:#fff; padding:8px 18px; font-size:14px; text-decoration:none; border-radius:10px; animation:shine 5s linear infinite;"> Mang Ayi Service </a>
3. Random Post dengan tombol popup
Menampilkan list judul postingan acak dengan tombol buka popup disebelah kanan, yang dimana ketika diklik akan muncul tampilan halaman postingan di dalam popup iframe

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .box{ padding:20px; background:#f5f5f5; margin-bottom:15px; border-radius:8px; font-family:Arial,sans-serif } #random-post-container{ font-family:Arial,sans-serif } .post-item{ margin:10px 0; padding:12px; border:1px solid #ddd; border-radius:8px; display:flex; justify-content:space-between; align-items:center; background:#fff } .post-btn{ background:#007bff; color:#fff; border:none; padding:8px 14px; border-radius:5px; cursor:pointer } #popup{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); z-index:9999 } .popup-content{ position:relative; margin:30px auto; width:95%; height:90%; background:#fff; border-radius:10px; padding:15px } #popup-iframe{ width:100%; height:85%; border:none } .close-btn{ position:absolute; top:10px; right:10px; background:red; color:#fff; border:none; padding:6px 12px; cursor:pointer } .action-btn{ padding:10px 15px; border:none; border-radius:5px; cursor:pointer; color:#fff; margin:5px } .browser-btn{background:#28a745} .tab-btn{background:#007bff} </style> <div class="box"> Random Post dengan Tombol Popup </div> <div id="random-post-container">Loading...</div> <div id="popup"> <div class="popup-content"> <button class="close-btn" onclick="closePopup()">Tutup</button> <iframe id="popup-iframe"></iframe> <div style="text-align:center;margin-top:10px"> <button id="open-browser" class="action-btn browser-btn">Buka di Browser</button> <button id="open-tab" class="action-btn tab-btn">Buka Tab Baru</button> </div> </div> </div> <script> const blogURL="https://responsiveblogger-seo.blogspot.com"; const numPosts=5; let currentPostURL=""; function fetchRandomPosts(){ let script=document.createElement("script"); script.src=blogURL+"/feeds/posts/default?alt=json-in-script&max-results=50&callback=displayRandomPosts"; document.body.appendChild(script); } function displayRandomPosts(data){ const container=document.getElementById("random-post-container"); container.innerHTML=""; if(!data.feed.entry){ container.innerHTML="Posting tidak ditemukan"; return; } let posts=data.feed.entry.map(post=>{ let link=post.link.find(l=>l.rel==="alternate"); return{ title:post.title.$t, url:link.href }; }); posts.sort(()=>Math.random()-0.5); posts=posts.slice(0,numPosts); posts.forEach(post=>{ container.innerHTML+=` <div class="post-item"> <span>${post.title}</span> <button class="post-btn" onclick="openPopup('${post.url}')">Buka</button> </div>`; }); } function openPopup(url){ currentPostURL=url; document.getElementById("popup").style.display="block"; document.getElementById("popup-iframe").src=url; document.getElementById("open-browser").onclick=function(){ window.location.href=currentPostURL; }; document.getElementById("open-tab").onclick=function(){ window.open(currentPostURL,"_blank"); }; } function closePopup(){ document.getElementById("popup").style.display="none"; document.getElementById("popup-iframe").src=""; } fetchRandomPosts(); </script> <hr>Code by: <style> @keyframes shine { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } </style> <a href="https://ayi-service.blogspot.com" target="_blank" style="background: linear-gradient(60deg, #333, #222, #eee); background-size: 300% 10%; color: #fff; border: none; padding: 8px 18px; font-size: 14px; text-decoration: none; border-radius: 10px; cursor: pointer; animation: shine 5s linear infinite;">Mang Ayi Service</a>
4. Random Post Slider
Yang menampilkan list postingan acak berbentuk kartu yang bisa di geser secara horisontal

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .box{ padding:20px; background:#f5f5f5; margin-bottom:15px; border-radius:8px; font-family:Arial,sans-serif } .blog-slider{ position:relative; max-width:100%; overflow:hidden; margin-top:20px; border-radius:10px } .slider-wrapper{ display:flex; transition:transform .4s ease } .blog-item{ flex:0 0 100%; text-align:center; padding:10px; box-sizing:border-box } .thumbnail{ position:relative } .thumbnail img{ width:100%; height:220px; object-fit:cover; border-radius:10px } .label{ position:absolute; top:10px; right:10px; background:rgba(0,0,0,.7); color:#fff; padding:5px 10px; font-size:12px; border-radius:5px } .title{ margin:12px 0; font-size:18px; font-weight:bold } .title a{ text-decoration:none; color:#222 } .arrow{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.7); color:#fff; border:none; font-size:20px; padding:12px; cursor:pointer; z-index:10; border-radius:50% } .arrow.left{left:10px} .arrow.right{right:10px} .arrow:hover{ background:#000 } @keyframes shine{ 0%{background-position:0% 0} 100%{background-position:-200% 0} } </style> <div class="box"> Random Post dengan Slider </div> <div id="random-slider" class="blog-slider"> <div class="slider-wrapper" id="slider-wrapper"></div> <button class="arrow left" onclick="moveSlide(-1)">◀</button> <button class="arrow right" onclick="moveSlide(1)">▶</button> </div> <script> const blogURL="https://safelink-aza.blogspot.com"; let currentIndex=0; let totalSlides=0; function fetchSliderPosts(){ let script=document.createElement("script"); script.src=blogURL+"/feeds/posts/summary?alt=json-in-script&max-results=50&callback=displaySliderPosts"; document.body.appendChild(script); } function displaySliderPosts(data){ if(!data.feed.entry)return; const posts=data.feed.entry; const wrapper=document.getElementById("slider-wrapper"); wrapper.innerHTML=""; let shuffled=[...posts].sort(()=>Math.random()-0.5).slice(0,10); shuffled.forEach(post=>{ let title=post.title.$t; let link=post.link.find(l=>l.rel==="alternate").href; let thumbnail=post.media$thumbnail ?post.media$thumbnail.url.replace("/s72-c/","/s800/") :"https://via.placeholder.com/800x400?text=No+Image"; let label=post.category?post.category[0].term:"Random"; wrapper.innerHTML+=` <div class="blog-item"> <div class="thumbnail"> <img src="${thumbnail}" alt="${title}"> <div class="label">${label}</div> </div> <h2 class="title"><a href="${link}" target="_blank">${title}</a></h2> </div>`; }); totalSlides=shuffled.length; } function moveSlide(direction){ if(totalSlides===0)return; currentIndex+=direction; if(currentIndex<0) currentIndex=totalSlides-1; if(currentIndex>=totalSlides) currentIndex=0; document.getElementById("slider-wrapper").style.transform= `translateX(-${currentIndex*100}%)`; } fetchSliderPosts(); setInterval(()=>moveSlide(1),5000); </script> <hr> Code by: <a href="https://ayi-service.blogspot.com" target="_blank" style=" background:linear-gradient(60deg,#333,#222,#eee); background-size:300% 10%; color:#fff; padding:8px 18px; font-size:14px; text-decoration:none; border-radius:10px; animation:shine 5s linear infinite;"> Mang Ayi Service </a>
5. Random Post Slider Notifikasi
Menampilkan kotak mirip notifikasi secara slide dari luar ke dalam halama

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .box{ padding:20px; background:#f5f5f5; margin-bottom:15px; border-radius:8px; font-family:Arial,sans-serif } .notification-box{ position:fixed; top:15px; left:-400px; max-width:320px; background:#fff; border:1px solid #ddd; box-shadow:0 4px 12px rgba(0,0,0,.15); padding:15px; z-index:9999; border-radius:8px; transition:left .5s ease; display:flex; align-items:center; justify-content:space-between; font-family:Arial,sans-serif } .notification-box.show{ left:15px } .notification-content{ font-size:14px; line-height:1.5 } .notification-content a{ color:#007bff; text-decoration:none; font-weight:bold } .notification-close{ margin-left:12px; cursor:pointer; font-size:18px; color:#999 } .notification-close:hover{ color:#000 } @keyframes shine{ 0%{background-position:0% 0} 100%{background-position:-200% 0} } </style> <div class="box"> Random Post dengan Slider Notifikasi </div> <div id="notification" class="notification-box"> <div id="notification-content" class="notification-content"></div> <div class="notification-close" onclick="closeNotification()">×</div> </div> <script> const blogURL="https://safelink-aza.blogspot.com"; function fetchRandomPost(){ let script=document.createElement("script"); script.src=blogURL+"/feeds/posts/default?alt=json-in-script&max-results=50&callback=showRandomNotification"; document.body.appendChild(script); } function showRandomNotification(data){ if(!data.feed.entry)return; let posts=data.feed.entry; let randomPost=posts[Math.floor(Math.random()*posts.length)]; let title=randomPost.title.$t; let url=randomPost.link.find(link=>link.rel==="alternate").href; document.getElementById("notification-content").innerHTML= `Ayi Suhendar telah berkunjung dan mendownload aplikasi di sini: <a href="${url}" target="_blank">${title}</a>`; let notification=document.getElementById("notification"); notification.classList.add("show"); setTimeout(()=>{ notification.classList.remove("show"); },5000); } function closeNotification(){ document.getElementById("notification").classList.remove("show"); } window.onload=function(){ setTimeout(fetchRandomPost,1500); }; </script> <hr> Code by: <a href="https://ayi-service.blogspot.com" target="_blank" style=" background:linear-gradient(60deg,#333,#222,#eee); background-size:300% 10%; color:#fff; padding:8px 18px; font-size:14px; text-decoration:none; border-radius:10px; animation:shine 5s linear infinite;"> Mang Ayi Service </a>;
Kode Random Post yang lainnya, nanti d share di postingan yang lain..😁

Hal yang Perlu Diperhatikan

Saat menggunakan script random post, pastikan kode tidak terlalu berat agar tidak memperlambat loading blog. Pilih satu kode script random post di atas yang cocok sesuai dengan tema blog anda

Ganti URL blog dengan IRL BLOG anda, modifikasi tampilan, posisi, warna ataupun yang lainnya untuk lebih meringankan load script

Gunakan jumlah postingan secukupnya pada kode feeds max-results=max-results=100 menjadi max-results=5dan optimalkan ukuran thumbnail agar performa tetap stabil.

Pertanyaan Umum (FAQ)

Apa perbedaan random post dan related pos?

Random post script yang menampilkan daftar postingan acak dari seluruh postingan di blog. sedangkan Related post hanya mebampilkan list postingan yang sesuai dengan label postingan yang sedang dibuka saat itu.

apakah memasang script random post, blog jadi berat?

Tidak selalu, tergantung penggunaan dan cara pengoptimalan script dengan mengedit size gambar dan jumlah feeds yang d tampilkan .

Kesimpulan

Script random post adalah solusi efektif untuk menampilkan artikel secara acak dan membantu meningkatkan engagement blog. Dengan penerapan yang tepat, fitur ini dapat meningkatkan pageview, memperpanjang durasi kunjungan, dan memberi kesempatan pada seluruh artikel untuk mendapatkan trafik.

Bagi pemilik blog yang ingin membuat tampilan lebih dinamis sekaligus memaksimalkan potensi konten lama, penggunaan script random post merupakan pilihan yang sangat bermanfaat.

#randompost#relatedpost#tutorislblog#SEOfriendly

Semoga bermanfaat.

Kumpulan Kode Script Random Post Siap Tempel untuk Blog