In today's digital age, creating engaging and dynamic user interfaces (UI) is crucial for captivating your audience and providing them with an enjoyable browsing experience. One effective way to enhance the interactivity of your website is by incorporating a random post slider into your Median UI design. This feature not only adds visual appeal but also ensures that users are presented with a diverse range of content, increasing their chances of discovering new and interesting posts.
In this guide, we will walk you through the step-by-step process of adding a random post slider to your Median UI. Whether you're a web developer, designer, or someone with basic coding knowledge, you'll find this tutorial accessible and practical. By the end, you'll have a compelling and dynamic slider that showcases random posts from your website, enticing visitors to explore more of your content.
Before we delve into the implementation, let's briefly understand what a random post slider entails. A random post slider is a UI component that displays a selection of posts from your website in a visually appealing and interactive slideshow format. Each time a user visits a page, the slider dynamically presents a new set of posts, ensuring a fresh and engaging browsing experience.
How to setup Random Post Slider
Creating Random Post Slider in your Median UI will not required no advanced coding skills or not much knowledge about HTML, CSS or JavaScript because I have already designed it for you. We will provide clear and concise instructions, guiding you through each step of the process. So, without further ado, let's get started on adding a captivating random post slider to your Median UI Blogger Theme XML.
Important!Before we begin adding XML codes, I strongly advise you to make a backup of your current theme. If an issue arises, you can always restore it later.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to the 'Customize' button.
Step 4: Choose Edit HTML, you will be redirected to the editing page.
Step 5: Next search the ]]></b:skin> code and paste the CSS code just above the ]]></b:skin> code or ]]></style> .
.slideB >*{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}
.slideB:hover .slider .cap{background-image:none}
.slideB a:hover{filter:none}
.slider .img{position:relative;border-radius:var(--sliderBd-radius)}
.slider .cap{background-image:linear-gradient(0deg,rgb(45 49 56 / 55%) 0%,rgb(45 49 56 / 22%) 60%,rgb(45 49 56 / 0%) 100%);border-radius:var(--sliderBd-radius);font-size:1rem;font-weight:600;text-shadow:0 2px 10px #272733,0 1px 1px rgba(10,10,10,.5);color:var(--lightBg-alt)}
.slider .category{top:0;right:1em;position:absolute;padding:20px;}
.slideB a.button{padding:5px 7px;font-size:12px;border-radius:12px;color:#0e2045;background-color:#fffdfc;box-shadow:5px 5px 15px 0 rgb(0 0 0 / 10%)}
@media screen and (max-width:640px){
.slider .img{padding-top:var(--thumbnailRatio);}.slideB a.button{font-size:10px}
}
Step 6: Now add the following JavaScript Code just above to </body> tag. If you don't find it, it is probably already parsed which is </body> or <!--</body>--></body>.
<script>/*<![CDATA[*/
const wcSliderRandom = {
noImage: 'data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=',
thumbnailSize: '1600',
sharedBy: 'www.wendycode.com' // credit
};
function sliderLoad(){var script=document.createElement('script');script.async= true;script.src='https://cdn.wendycode.com/blogger/widget/median-ui-slider-random-post.js';document.body.appendChild(script)}function sldDtcLazy(){sliderLoad(),localStorage.setItem("sliderJs","true")}var wcLdStorage=localStorage.getItem("sliderJs");if("true"!=wcLdStorage){var t=!1,e=!1;window.addEventListener("scroll",()=>{(0!=document.documentElement.scrollTop&&!1===t||0!=document.body.scrollTop&&!1===t)&&(sldDtcLazy(),t=!0,e=!0)},!0),window.addEventListener("click",()=>{!1===e&&!1===e&&(sldDtcLazy(),e=!0,t=!0)},!0)}"true"===wcLdStorage&&sliderLoad();
/*]]>*/</script>
Step 7: Finally, click this icon to save your changes.
Conclusion
The purpose of this tutorial is to show you how to add random post slider in Median UI. I hope you find this information interesting. Please share this article with your friends and family. And if you have any questions or encounter any difficulties in any aspect, please ask them in the comment section.