Widget Slider Random Post Berbagai Animasi

byHallo Madiun -
0

ads

Table of Contents +

Membuat budget slider random post di Blogger dengan berbagai animasi dan gaya. 


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 &lt;!--</body>--&gt;&lt;/body&gt;   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;
}

BACA JUGA:Membuat Drop Cap Otomatis Di Blogger
.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%;
}

BACA JUGA:Fre Code Multitab Syntax Otomatis Semua Template Blogger
/* 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;
}

BACA JUGA:Membuat Drop Cap Di Blogger
.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;
}

BACA JUGA:Berapa Harga Blog Dengan Adsense Sudah Atau Belum Pin Dan Po
.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.

Widget Donasi : 

Bank Seabank Indonesia

Bank Seabank Indonesia

Nomor Rekening: 901353934119

Nama Pemilik: MuslihUdin

Bank DIGITAL BCA / BCA DIGITAL (BLU BCA)

Bank DIGITAL BCA

Nomor Rekening: 007596829387

Nama Pemilik: MuslihUdin

Gopay

Gopay

Nomor: 0895405964539

QRIS

QRIS

Scan QR di aplikasi pembayaran untuk berdonasi.


Tags

You might like

Lebih baru Lebih lama

نموذج الاتصال