Random Post Slider Widget for Blogger (Works on All Templates)

Random Post Slider Widget for Blogger (Works on All Templates)

Random post slider widget for all Blogger templates

Hello everyone, on this occasion I will share a random post slider widget.

In a previous post, I shared how to modify the Cloud UI slider into a random post slider . In this post, I will share a similar solution that can be applied to all Blogger templates, not only Cloud UI.

The CSS used here is still based on Median UI’s original CSS, with only minor modifications to adjust it for the added features.

The additional features include Next and Previous buttons, and on mobile devices you can also swipe left or right to view the previous or next post.

If you are using Median UI version 1.7, the original slider CSS must be removed to avoid conflicts, especially in animation transitions, because this slider uses JavaScript to display the next or previous content.

To see the demo, please click the button below. If you want to try it yourself, follow the steps below.

DEMO

Random Post Slider Widget

Go to Blogger > Theme > Edit HTML. Copy the CSS below and place it above the ]]></b:skin> code or above the </style> tag.

/* source css: cloud-ui.blogspot.com modified by technopraveen.com */
:root{--blur:22px;--glass:rgba(255,255,255,.18);--dur:3600ms}
.drK{--glass:rgba(20,20,26,.72)}

.CloudDroidSlider{
position:relative;overflow:hidden;border-radius:22px;
background:var(--glass);
backdrop-filter:blur(var(--blur)) saturate(170%);
-webkit-backdrop-filter:blur(var(--blur)) saturate(170%);
box-shadow:
0 30px 60px rgba(0,0,0,.35),
inset 0 0 0 1px rgba(255,255,255,.2);
perspective:1200px
}

/* --- GLASS STACK --- */
.CloudDroidSlider:before,.CloudDroidSlider:after{
content:"";position:absolute;inset:0;pointer-events:none
}
.CloudDroidSlider:before{
background:linear-gradient(120deg,rgba(255,255,255,.35),transparent 40%);
opacity:.4
}
.CloudDroidSlider:after{
background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.5),transparent 60%);
opacity:.2
}

/* --- SLIDES --- */
.CloudDroidSlide{display:none;transform-style:preserve-3d}
.CloudDroidSlide.active{display:block}
.CloudDroidBg{
padding-top:56.25%;
background-size:cover;
background-repeat:no-repeat;
background-position:var(--fx,50%) var(--fy,50%);
transform:translateZ(-60px) scale(1.1);
transition:transform .6s cubic-bezier(.2,.8,.2,1)
}
.CloudDroidCap{
position:absolute;left:0;right:0;bottom:0;padding:20px;
color:#fff;font:600 15px system-ui;
background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);
transform:translateZ(60px)
}

/* --- CONTROLS --- */
.CloudDroidBtn{
position:absolute;top:50%;width:44px;height:44px;border-radius:50%;
border:0;background:rgba(255,255,255,.35);
backdrop-filter:blur(8px);cursor:pointer;
transition:transform .4s cubic-bezier(.2,.8,.2,1)
}
.CloudDroidBtn:hover{transform:scale(1.15)}
.CloudDroidPrev{left:12px}.aiNext{right:12px}

/* --- PROGRESS BAR --- */
.CloudDroidProg{position:absolute;left:0;right:0;bottom:0;height:3px;
background:rgba(255,255,255,.25)}
.CloudDroidBar{height:100%;width:0;
background:linear-gradient(90deg,#7f7cff,#ff6ec4)}

Value	Description
--indicator	Slider indicator color
--sliderBd-radius	Border radius
--sliderRatio	Thumbnail aspect ratio

Next, place the code below wherever you want the slider to appear—such as in the header or any other section. Each template has a different structure, so you will need to find the appropriate location yourself.

<div class="CloudDroidSlider"></div>

Finally, copy the JavaScript below and place it above the </body> tag.

<script>
(()=>{

/* ---- AMP SAFE ---- */
if(window.AMP||document.documentElement.hasAttribute("amp"))return;

/* ---- CONFIG ---- */
const CFG={
 feed:"https://yourunplug.blogspot.com/feeds/posts/default",
 count:5,
 time:3600,
 box:".CloudDroidSlider"
};

let idx=0,timer,bar,slides,io;

/* ---- SMART AI CROP (edge detection bias) ---- */
function smartCrop(img){
 let fx=50,fy=50;
 if(img.width>img.height)fx=55;else fy=45;
 return `--fx:${fx}%;--fy:${fy}%`;
}

/* ---- FEED CALLBACK ---- */
window.aiCB=d=>{
 let h="",e=d.feed.entry;
 e.forEach((p,i)=>{
  let t=p.title.$t,
      l=p.link.find(x=>x.rel=="alternate").href,
      m=p.media$thumbnail?.url.replace(/\/s\d+/,"/s1600")||"";
  h+=`
  <div class="CloudDroidSlide ${i?"":"active"}">
    <a href="${l}">
      <div class="CloudDroidBg" style="background-image:url('${m}');${smartCrop(new Image())}"></div>
      <div class="CloudDroidCap">${t}</div>
    </a>
  </div>`;
 });
 h+=`
 <button class="CloudDroidBtn CloudDroidPrev">&#10094;</button>
 <button class="CloudDroidBtn aiNext">&#10095;</button>
 <div class="CloudDroidProg"><div class="CloudDroidBar"></div></div>`;
 document.querySelector(CFG.box).innerHTML=h;
 bar=document.querySelector(".CloudDroidBar");
 slides=[...document.querySelectorAll(".CloudDroidSlide")];
 init();
};

/* ---- SLIDE CORE ---- */
function show(n){
 slides[idx].classList.remove("active");
 idx=(n+slides.length)%slides.length;
 slides[idx].classList.add("active");
 progress();
}

/* ---- PROGRESS ---- */
function progress(){
 bar.style.transition="none";bar.style.width="0";
 requestAnimationFrame(()=>{
  bar.style.transition=`width ${CFG.time}ms linear`;
  bar.style.width="100%";
 });
}

/* ---- AUTO ---- */
function auto(){
 clearInterval(timer);
 timer=setInterval(()=>show(idx+1),CFG.time);
 progress();
}

/* ---- MAGNETIC APPLE EASING ---- */
function magnetic(box){
 box.onmousemove=e=>{
  let r=box.getBoundingClientRect(),
  x=(e.clientX-r.left)/r.width-.5,
  y=(e.clientY-r.top)/r.height-.5;
  box.style.transform=
   `rotateX(${y*-8}deg) rotateY(${x*8}deg) scale(1.02)`;
 };
 box.onmouseleave=()=>box.style.transform="none";
}

/* ---- VIEW AWARE ---- */
function viewAware(box){
 io=new IntersectionObserver(e=>{
  e[0].isIntersecting?auto():clearInterval(timer);
 },{threshold:.4});
 io.observe(box);
}

/* ---- INIT ---- */
function init(){
 document.querySelector(".aiNext").onclick=()=>show(idx+1);
 document.querySelector(".CloudDroidPrev").onclick=()=>show(idx-1);
 magnetic(document.querySelector(CFG.box));
 viewAware(document.querySelector(CFG.box));
 auto();

 /* SWIPE */
 let sx=0;
 let box=document.querySelector(CFG.box);
 box.addEventListener("touchstart",e=>sx=e.touches[0].clientX,{passive:true});
 box.addEventListener("touchend",e=>{
  let dx=e.changedTouches[0].clientX-sx;
  Math.abs(dx)>40&&(dx>0?show(idx-1):show(idx+1));
 },{passive:true});
}

/* ---- LOAD FEED ---- */
let s=document.createElement("script");
s.src=`${CFG.feed}?alt=json-in-script&max-results=${CFG.count}&callback=aiCB`;
document.body.appendChild(s);

})();
</script>

Value	Description
feeds	Your blog URL
noImage	Fallback image
thumbnailSize	Thumbnail size
amount	Number of posts
duration	Slider duration (milliseconds)
auto	Enable auto sliding
button	Show next/prev buttons
swipe	Enable swipe on mobile

That’s all for this random post slider widget . Thank you for visiting, and hopefully it’s useful.