Hallo sobat, pada kesempatan kali ini okayim.com akan membagikan tutorial widget slider yang bisa menampilkan random post di blogger sobat.
Widget slider yang bisa menampilkan random post di blogger yang saya bagikan ini bisa digunakan di template blogspot apapun.
Membuat slider yang menampilkan random post otomatis ini saya akan menggunakan CSS dari template median UI yang sudah saya modifikasi.
Untuk Demonya Sobat Bisa Melihatnya Melalui Tombol Button Dibawah Ini.
Cara Membuat Widget Slider Random Post Otomatis Di Blogspot
Langkah pertama silahkan sobat masuk ke menu tema blogger > pilih menu edit html > letakan kode CSS di bawah tepat di antara code <head> Dan </head>
/* source css: median-ui.blogspot.com modified by wendycode.com */
.slideB {
--indicator: #f89000;
--sliderBd-radius: 4px;
--sliderRatio: 56.25%;
}
@-webkit-keyframes fade{from{opacity:.4;}to{opacity:1;}}
@keyframes fade{from{opacity:.4;}to{opacity:1;}}
.slider .item{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;}
.slideI .i.active{width:10px;background-color:var(--indicator);}
.slideB .next,.slideB .prev{position:absolute;top:40%;font-size:2.5em;border-radius:50%;user-select:none;border:1px solid #e4e3e1;background:#fffdfc;opacity:.5;padding:0 20px 5px;outline:0;}
.slideB .next:hover,.slideB .prev:hover{opacity:.9;}
.slideB .prev{left:10px;}
.slideB .next{right:10px;}
.slideB{position:relative;border-radius:var(--sliderBd-radius);overflow:hidden;}
.slideB:hover .slideI svg{opacity:1;visibility:visible;}
.slideI.active svg .pause{display:block;}
.slideI.active svg .play,.slideI svg .pause{display:none;}
.slider.no-items~.slideI{display:none;}
.slideI .i{width:4px;height:4px;border-radius:10px;background-color:rgb(0 0 0 / 15%);transition:width .1s ease,background-color .1s ease;}
svg{width:12px;height:12px;fill:currentColor;}
.slideI svg{right:0;}
.slideI svg{position:absolute;top:0;opacity:0;visibility:hidden;transition:opacity .1s ease .4s,visibility .1s ease .4s;}
.slider{position:relative;width:400%;}
.slider >*{flex-shrink:0;width:calc(100% / 4);}
.slider .item{display:none;position:relative;border-radius:var(--sliderBd-radius);overflow:hidden;}
.slider .img{display:block;padding-top:var(--sliderRatio);color:#d9e2f0;background-color:#f9f9fb;background-position:center;background-size:cover;background-repeat:no-repeat;}
.slider .cap{display:block;position:absolute;left:0;bottom:0;right:0;padding:20px;padding-block-start:40px;background-image:linear-gradient(0deg,rgb(45 49 56 / 90%) 0%,rgb(45 49 56 / 50%) 60%,rgb(45 49 56 / 0%) 100%);}
.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:0.9em;line-height:1.2em;font-weight:600;text-shadow:0 2px 10px #272733,0 1px 1px rgba(10,10,10,.5);color:#f9f9fb;}
.slider .category{top:0;right:0;position:absolute;padding:10px;}
.slideB a.button{display:inline-flex;text-decoration:none;outline:0;border:0;padding:2px 10px;font-size:12px;border-radius:15px;color:#0e2045;background-color:#fffdfc;box-shadow:5px 5px 15px 0 rgb(0 0 0 / 10%);}
.slideI{display:flex;gap:5px;position:relative;height:12px;margin-block:5px calc(40px - 12px - 4px)) align-items:center;justify-content:center;margin-top:5px;}
@media screen and (max-width:640px){.slideB a.button{font-size:10px;padding:0 10px;}.slideB .next,.slideB .prev{font-size:1em;border-radius:50%;padding:0 10px 3px;}}
Selanjutnya sobat pasang code javascript dibawah ini di template blogger tepatnya di atas code </body> atau atau bisa menaruhnya di atas code <!--</body>--></body>
<script>/*<![CDATA[*/
const wcSliderRandom = {
feeds: 'https://www.okayim.com',
noImage: 'data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=',
thumbnailSize: '1600',
amount: '5',
duration: '3000',
auto: 'true',
button: 'true',
swipe: 'true',
sharedBy: 'www.wendycode.com' // credit do not removed
};
function sliderLoad(){var script=document.createElement('script');script.async= true;script.src='https://cdn.wendycode.com/blogger/widget/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>
Selanjutnya sobat bisa memasang code dibawah ini dimanapun yang sobat inginkan pada blogger sobat.
<div class='slideB wendycodeRandom'></div>
Oke sobat jadi itulah cara membuat widget slider otomatis di blogspot yang saya bagikan kali ini.
Sebagai informasi tambahan code yang saya bagikan tersebut bersumber dari blog