Widget Slider Random Post Berbagai Animasi

Halll Sobat, Pada kesempatan yang berbahagia ini saya akan membagikan widget slider random post di blogger dengan berbagai animasi. Seperti slider random post dengan animasi fade (berkedip) , slider random post di blog dengan animasi slide down ( dari atas ke bawah ) , random post dengan animasi slide up ( dari bawah ke atas , dan slider random post dengan animasi dari kanan ke kiri dan sebaliknya.

Di postingan kemaren kami sudah membahas Cara Membuat Tombol Subscribe Di Blogger Yang Mengarah Ke Facebook🖱. Nah pada kesempatan kali ini kami akan membahas Cara Membuat Slider Random Post Di Blogger dengan berbagai animasi.

Kode slider random post dengan berbagai animasi dan gaya yang saya bagikan ini merupakan kode dari tampilan template Blogger media ui dan plus ui yang dibagikan oleh wendy code yang sudah saya modifikasi sesuai kebutuhan sobat nantinya mau tampilan animasi seperti apa.

Cara Membuat Budget slider random post Di Blog Dengan Berbagai Animasi Dan Gaya

Setelah sobat melihat demo slider random post di atas langsung saja kita buat sekarang. Sebagai informasi demo budget slider random post di atas merupakan animasi dengan gaya slider down ( dari atas ke bawah ). Nantinya sobat bisa menyesuaikan sesuai selera sobat.

Langkah pertama langsung saja sobat pasang kode html untuk menampilkan slider random post Blogger dimana saja pada bagian tata letak sobat. Masuk tata letak > Tambahkan Widget > Html javascript.

Lalu pasang kode html berikut :

<div class='slideB wendycodeRandom'></div>

Kemudian masuk tema > Edit Html > Cari kode </body> atau </body> Lalu pasangkan kode java script di bawah ini:

<script>/*<![CDATA[*/
const wcSliderRandom = {
feeds: 'https://www.hallomadiun.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>

Pilih Dan pasang gaya animasi css slider random post Blogger

Berikut adalah gaya dari animasi slider random post di Blogger yang bisa anda pilih.

1. Gaya SLIDE Down (Dari Atas Kebawah )

/* source css: median-ui.blogspot.com modified by wendycode.com */
.slideB {
--indicator: #f89000;
--sliderBd-radius: 4px;
--sliderRatio: 56.25%;
}

/* Animasi slide dari atas ke bawah */
@keyframes slideDown {
from {
transform: translateY(-100%); /* Mulai di luar layar (di atas) */
opacity: 0;
}
to {
transform: translateY(0); /* Bergerak ke posisi normal */
opacity: 1;
}
}

/* Terapkan animasi slide ke item slider */
.slider .item {
display: none; /* Sembunyikan item awalnya */
position: relative;
border-radius: var(--sliderBd-radius);
overflow: hidden;
opacity: 0; /* Mulai dengan opacity 0 */
animation-name: slideDown;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-fill-mode: forwards; /* Pastikan animasi selesai dan item tetap muncul */
}

/* Animasi untuk item aktif */
.slider .item.active {
display: block; /* Tampilkan item aktif */
opacity: 1; /* Pastikan elemen terlihat setelah animasi selesai */
}

/* Kode lain tetap tidak berubah */
.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;
}
}

2. GAYA SLIDE UP ( Dari Bawah Ke Atas )

/* source css: median-ui.blogspot.com modified by wendycode.com */
.slideB {
--indicator: #f89000;
--sliderBd-radius: 4px;
--sliderRatio: 56.25%;
}

/* Animasi slide dari bawah ke atas */
@keyframes slideUp {
from {
transform: translateY(100%); /* Mulai di luar layar (di bawah) */
opacity: 0;
}
to {
transform: translateY(0); /* Bergerak ke posisi normal (ke atas) */
opacity: 1;
}
}

/* Terapkan animasi slide ke item slider */
.slider .item {
display: none; /* Sembunyikan item awalnya */
position: relative;
border-radius: var(--sliderBd-radius);
overflow: hidden;
opacity: 0; /* Mulai dengan opacity 0 */
animation-name: slideUp;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-fill-mode: forwards; /* Pastikan animasi selesai dan item tetap muncul */
}

/* Animasi untuk item aktif */
.slider .item.active {
display: block; /* Tampilkan item aktif */
opacity: 1; /* Pastikan elemen terlihat setelah animasi selesai */
}

/* Kode lain tetap tidak berubah */
.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;
}
}

3. DARI KANAN KE KIRI DAN SEBALIKNYA

/* source css: median-ui.blogspot.com modified by wendycode.com */
.slideB {
--indicator: #f89000;
--sliderBd-radius: 4px;
--sliderRatio: 56.25%;
}

/* Animasi slide dari kanan ke kiri */
@keyframes slideRightToLeft {
from {
transform: translateX(100%); /* Mulai dari luar layar sebelah kanan */
opacity: 0;
}
to {
transform: translateX(0); /* Bergerak ke posisi normal */
opacity: 1;
}
}

/* Animasi slide dari kiri ke kanan */
@keyframes slideLeftToRight {
from {
transform: translateX(-100%); /* Mulai dari luar layar sebelah kiri */
opacity: 0;
}
to {
transform: translateX(0); /* Bergerak ke posisi normal */
opacity: 1;
}
}

/* Terapkan animasi slide ke item slider */
.slider .item {
display: none; /* Sembunyikan item awalnya */
position: relative;
border-radius: var(--sliderBd-radius);
overflow: hidden;
opacity: 0; /* Mulai dengan opacity 0 */
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-fill-mode: forwards; /* Pastikan animasi selesai dan item tetap muncul */
}

/* Animasi untuk item aktif dengan slide dari kanan ke kiri */
.slider .item.slide-right-to-left {
animation-name: slideRightToLeft;
}

/* Animasi untuk item aktif dengan slide dari kiri ke kanan */
.slider .item.slide-left-to-right {
animation-name: slideLeftToRight;
}

/* Animasi untuk item aktif */
.slider .item.active {
display: block; /* Tampilkan item aktif */
opacity: 1; /* Pastikan elemen terlihat setelah animasi selesai */
}

.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;
}
}

4. Gaya Fade ( Berkedip)

/* 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;}}

Jangan lupa ganti https://www.hallomadiun.com

Dengan Url Blogger Kalian.

Oke sobat sekian dari saya tentang Tutorial Membuat Widget Slider Random Post Di Blogger denganberbagai animasi dan gaya yang bisa sobat terapkan.

Terima kasih untuk sobat sudah berkunjung di website kami dan selamat mencoba.

Sumber : https://www.wendycode.com/2023/05/widget-slider-random-post.html?m=1

Rate This Article

Thanks for reading: Widget Slider Random Post Berbagai Animasi, Sorry, my English is bad:)

Hallo Madiun

Hallo Madiun

Widget Slider Random Post Berbagai Animasi

Cara Membuat Budget slider random post Di Blog Dengan Berbagai Animasi Dan Gaya

Pilih Dan pasang gaya animasi css slider random post Blogger

Post a Comment

Obat Kutu Air di Sela Jari Kaki Secara Tradisional

Vidio Tabrakan Avanza Vs Inova Di Sangen Madiun

Perbedaan DeepSeek Dan ChatGpt Open AI Saat Digunakan

Manasin Nasi Sisa Jualan Agar Pulen Lagi seperti baru

Upaya Pemkab Madiun Ramaikan Pasar Tradisional Lagi

Bank Seabank Indonesia

Bank DIGITAL BCA

Gopay

QRIS

PayPal

Generate Link