Nowadays tutorials, reviews etc... are not just in blog posts and videos. Now it's more shorter form through web stories. Web stories was originally popularised by Instagram and Snapchat then later it expanded to more websites to capture user attention faster than before.
Web Stories are short, full-screen visual narratives made up of images, texts etc... Web Stories are specially designed for mobile audiences. They look beautiful and importantly they tell a story within a few seconds. It helps you to increase your website's user engagement.
In this guide, we will discuss adding a web stories feature to Blogger. After following this tutorial carefully you will understand how to add a web stories feature to your Blogger website. Ready to transform your blog? So let's get started.
Note: This web stories implementation is a custom-built popup for non-AMP websites. As it is for non-AMP websites it's not an official Google AMP Web Stories. It may be not indexed as web stories in search results. This is intended for a better user experience.
How to Add Web Stories to Your Blogger Website?
Warning: Before doing this process we recommend you to take a backup of your theme to avoid corruption risks.
Note: This only shows on mobile devices as web stories are made for mobile devices.
- Go to your Blogger dashboard
- Click on "Theme" option on the sidebar
- Click on "" near "Customize"
- Click on "Edit HTML"
- Find
</head> - Paste the following CSS just above it
<b:if cond='data:blog.isMobileRequest'>
<style>/*<![CDATA[*//* Name: Web Stories for Blogger Source: www.incrediblegad.in */.story-slide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;display:none;justify-content:center;align-items:flex-end;text-decoration:none;color:#fff}.story-slide.active{display:flex}.story-slide h2{background:rgba(0,0,0,.6);padding:10px;margin-left:20px;width:90%;margin-bottom:30px;border-radius:10px;text-align:center;font-size:18px;color:#fff;line-height:1.8rem}#progressWrapper{display:flex;width:90%;max-width:500px;position:absolute;top:20px;gap:5px;z-index:10001;padding:8px;border-radius:6px}.progressBar{flex:1;background:rgba(255,255,255,.3);height:3px;border-radius:5px;overflow:hidden;cursor:pointer;position:relative}.progressBarInner{width:0%;height:100%;background:#fff;transition:width 3s linear;position:absolute;top:0;left:0}@media (min-width:768px){.isStory,#webStoriesPopup{display:none}}.storyTtl{filter:brightness(100)}.storyimg{filter:brightness(0.8)}/*]]>*/</style>
</b:if>- Find
</body> - Paste the following code just above it
<!-- Web Stories by IncredibleGad -->
<b:if cond='data:blog.isMobileRequest'>
<div id='webStoriesPopup' style='display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);justify-content:center;align-items:center;flex-direction:column;z-index:10000;overflow:hidden;'>
<div id='progressWrapper' style='display:flex;width:100%;max-width:500px;position:absolute;top:3px;gap:5px;'/>
<div id='storyContainer' style='width:100%;height:100%;position:relative;overflow:hidden;'/>
<button id='closeWebStories' style='position:absolute;background:none;vertical-align:middle;top:25px;right:10px;border:none;cursor:pointer;opacity:1'><svg fill='none' height='24' stroke='#fff' stroke-width='1' viewBox='0 0 24 24' width='24'><path d='M6 18 18 6M6 6l12 12' stroke-linecap='round' stroke-linejoin='round'/></svg></button>
</div>
<script>/*<![CDATA[*//* Web Stories for Blogger
Created by: IncredibleGad
Source code: https://www.incrediblegad.in/2025/04/how-to-add-web-stories-to-your-blogger.html
*/
let slides = [], progressBars = [], current = 0, timer, paused = false, startTime = 0, elapsedTime = 0, totalDuration = 5000;
const storiesData = [
{ image: "Your_image_link",
title: "Your_title",
link: "Your_link" },
{ image: "Your_image_link",
title: "Your_title",
link: "Your_link" },
{ image: "Your_image_link",
title: "Your_title",
link: "Your_link" },
{ image: "Your_image_link",
title: "Your_title",
link: "Your_link" },
{ image: "Your_image_link",
title: "Your_title",
link: "Your_link" }
];
/* Don't Edit */function createStories(){let e=document.getElementById("storyContainer"),t=document.getElementById("progressWrapper");e.innerHTML="",t.innerHTML="",storiesData.forEach((s,r)=>{let n=document.createElement("div");n.className="story-slide storyimg",0===r&&n.classList.add("active"),n.style.backgroundImage=`url(${s.image})`;let i;i=s.link?`<a href="${s.link}" target="_blank" class="storyTtl"><h2>${s.title}</h2></a>`:`<div class="storyTtl"><h2>${s.title}</h2></div>`,n.innerHTML=i,e.appendChild(n);let o=document.createElement("div");o.className="progressBar",o.innerHTML='<div class="progressBarInner"></div>',o.dataset.index=r,t.appendChild(o)}),slides=document.querySelectorAll(".story-slide"),progressBars=document.querySelectorAll(".progressBarInner"),startStorySlider(),enableProgressBarClick(),enableHoldToPause()}function showSlide(e){slides.forEach((t,s)=>{t.classList.toggle("active",s===e),progressBars[s]&&(progressBars[s].style.transition="none",progressBars[s].style.width=s<e?"100%":"0%")}),setTimeout(()=>{progressBars[e]&&(progressBars[e].style.transition=`width ${totalDuration}ms linear`,progressBars[e].style.width="100%")},50)}function nextSlide(){current>=slides.length?closeStories():(showSlide(current),startTime=Date.now(),elapsedTime=0,timer=setTimeout(()=>{current++,nextSlide()},totalDuration))}function startStorySlider(){clearTimeout(timer),current=0,resetProgressBars(),nextSlide()}function resetProgressBars(){progressBars.forEach(e=>{e.style.transition="none",e.style.width="0%"}),slides.forEach(e=>e.classList.remove("active"))}function closeStories(){document.getElementById("webStoriesPopup").style.display="none",clearTimeout(timer),resetProgressBars()}function enableProgressBarClick(){document.getElementById("progressWrapper").addEventListener("click",function(e){let t=e.target.closest(".progressBar");if(t){let s=parseInt(t.dataset.index);isNaN(s)||(clearTimeout(timer),current=s,resetProgressBars(),nextSlide())}})}function pauseStories(e){e.target.closest("a")||(e.preventDefault(),!paused&&(paused=!0,clearTimeout(timer),progressBars[current]&&(elapsedTime+=Date.now()-startTime,progressBars[current].style.transition="none",progressBars[current].style.width=`${elapsedTime/totalDuration*100}%`)))}function resumeStories(e){!e.target.closest("a")&&(e.preventDefault(),paused&&(paused=!1,progressBars[current]&&(totalDuration-elapsedTime>0?(progressBars[current].style.transition=`width ${totalDuration-elapsedTime}ms linear`,progressBars[current].style.width="100%",timer=setTimeout(()=>{elapsedTime=0,current++,nextSlide()},totalDuration-elapsedTime),startTime=Date.now()):(elapsedTime=0,current++,nextSlide()))))}function enableHoldToPause(){let e=document.getElementById("storyContainer");e.addEventListener("mousedown",pauseStories),e.addEventListener("touchstart",pauseStories,{passive:!1}),e.addEventListener("mouseup",resumeStories),e.addEventListener("touchend",resumeStories)}document.getElementById("openWebStories").onclick=function(){document.getElementById("webStoriesPopup").style.display="flex",createStories()},document.getElementById("closeWebStories").onclick=function(){closeStories()};/*]]>*/</script>
</b:if>
Don't forget to replace Your_title , Your_link and Your_image_link with your title, link and image link.
To Add More Item to Story
To add more item to story in JS add , after an item then add next item.
{ image: "Your_image_link",
title: "Your_title",
link: "Your_link" }Example given below:
{ image: "Your_image_link",
title: "Your_title",
link: "Your_link" },
{ image: "Your_image_link",
title: "Your_title",
link: "Your_link" }
{ image: "Your_image_link",
title: "Your_title",
link: "Your_link" },
{ image: "Your_image_link",
title: "Your_title",
link: "Your_link" },
{ image: "Your_image_link",
title: "Your_title",
link: "Your_link" }
To Add Item Without Link
{ image: "Your_image_link",
title: "Your_title"}After doing these changes now add id='openWebStories' to somewhere you need to make it clickable to open stories.
Example given below:
<button class='isStory' id='openWebStories'>Open Story</button>
You can also use id='openWebStories' in a, label etc...
Adding class='isStory' help to hide element in larger devices.
After making these changes click "" to save HTML.
Conclusion
By implementing this custom lightweight script you can implement web stories to your Blogger website without compromising your website performance. This method ensures that stories look modern and load quickly.
With this simple setup you don't need an AMP template to add web stories. But note that AMP Web Stories work differently when compared to this. Whether you are sharing short tutorials, affiliate links or any other content this method helps you to capture attention more effectively.
Integrating web stories manually is a smart way to keep your Blogger website fresh and interactive. As you continue to update stories regularly you will see better user engagement. If you want the advanced version of web stories that you can create multiple web stories like Blogger Posts then comment down below we will try to make a tutorial on it as soon as possible.