Hello everyone, on this occasion I will share how to modify the Median UI slider to become a random post.
I'm using the Median UI theme, it's been quite a while since version 1.3, if I'm not mistaken, this slider has been around since version 1.5 or 1.4 but I've never activated or used it.
because I find it complicated to have to update - keep updating even though it's made easy through the layout but it's still a bit of a hassle if I have to update manually.
Recently I thought about making it a random post because I saw the igniplex theme made by igniel.com so I wanted to make something similar too.
How to Add Slider Median Ui Random Post in Blogger
please go to blogger > themes > edit html copy the css below and paste it above the code]]></b:skin>or above code</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}
}
further copy the javascript below and place it above the code</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>
ok, so that's all the modification of the Median UI slider so it's a random post that I can share this time, thank you for visiting and I hope this is useful.