Codepelajar – Slider post adalah salah satu fitur yang populer dalam pengembangan situs web. Memiliki slider post dapat memperindah tampilan situs Anda dan memberikan pengalaman pengguna yang menarik. Dalam artikel ini, kami akan menjelaskan apa itu slider post, manfaat yang dapat Anda peroleh dari penggunaannya, dan beberapa plugin slider post terbaik yang dapat Anda gunakan untuk meningkatkan situs WordPress Anda.
Apa itu Slider Post?
Slider post adalah tampilan slideshow konten yang dapat ditampilkan di beranda atau halaman situs web. Slider post biasanya terdiri dari beberapa gambar, teks, dan tombol navigasi yang memungkinkan pengguna untuk melihat berbagai konten secara otomatis atau manual. Tujuan dari slider post adalah untuk menarik perhatian pengunjung dan memperindah tampilan situs Anda.
Manfaat Memiliki Slider Post di Situs Anda:
1. Memperindah Tampilan Situs: Slider post dapat memberikan tampilan yang lebih menarik dan interaktif daripada tampilan statis. Anda dapat menggunakan gambar yang menarik, teks yang kreatif, dan efek visual untuk menarik perhatian pengunjung situs Anda.
2. Meningkatkan Pengalaman Pengguna: Dengan menggunakan slider post, Anda dapat memberikan pengalaman yang lebih dinamis kepada pengunjung. Mereka dapat melihat berbagai konten dalam slide yang sama dan menavigasi melalui konten tersebut dengan mudah.
3. Memperkenalkan Berbagai Konten: Slider post memungkinkan Anda untuk memperkenalkan berbagai konten secara efektif dalam satu slide. Anda dapat menampilkan konten terbaru, promo, produk terbaik, atau cerita menarik dalam slider post Anda.
4. Memperbaiki Tingkat Konversi: Dengan memanfaatkan slider post untuk menampilkan penawaran khusus atau tautan CTA (call-to-action), Anda dapat meningkatkan konversi pengunjung menjadi pelanggan atau pengguna aktif.
5. Meningkatkan Keterlibatan Pengunjung: Slider post yang menarik dapat meningkatkan waktu tinggal pengunjung di situs Anda. Dengan menampilkan konten yang menarik dan beragam dalam slider post, pengunjung akan lebih tertarik untuk menjelajahi situs Anda lebih lanjut.
Slider Post Random Post
Silahkan buka blog lalu masuk ke menu Tema > Edit HTML lalu salin kode dibawah ini dan tempelkan diatas kode ]]></b:skin> atau </style>
/* source css: codepelajar.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;}}
–indicators : Merupakan warna slider yang berada dibawah gambar
–sliderBd-radius : Border radius
–sliderRatio : Thumbnail ratio
Salin kode dibawah ini dan tempelkan dibawah kode </head>
<div class='slideB wendycodeRandom'></div>
Terakhir letakkan kode dibawah ini diatas kode </body> atau <!–</body>–></body>
<script>/*<![CDATA[*/
const wcSliderRandom = {
feeds: 'https://www.codepelajar.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>
Informasi:
feeds: Url Blog Anda
noImage: Tidak ada gambar
thumbnailSize: Ukuran Thumbnail
amount: Jumlah gambar
duration: Durasi slider
auto: Otomatis
button: Menuju ke URL jika ditekan
swipe: Digeser oleh tangan
Mungkin hanya ini yang dapat Codepelajar berikan untuk Slider Widget Random Post Blogspot, semiga Anda dapat mempercantik blog dengan cara ini.
