Demo Click Disini
Pasang Style di atas tag </head>.
Style.css :
<b:if cond='data:view.isHomepage'>
<style>
#left-button{position: absolute;top: 50%;left: 0;transform: translate(0,-50%);background: #300cb0f0;border-radius: 0 8px 8px 0;padding: 8px;cursor: pointer;}
#right-button{position: absolute;top: 50%;right: 0;transform: translate(0,-50%);background: #300cb0f0;border-radius: 8px 0 0 8px;padding: 8px;cursor: pointer;}
#right-button svg,#left-button svg{stroke: white;width: 36px;height: 36px;position:relative;top:3px;}
#right-button,#left-button{display:none;}
#pxcSlide:hover #right-button,#pxcSlide:hover #left-button{display:block;}
.itemSlider {min-width: 210px;height: 100%;}
.dataItem img {width: 100%;height: 315px;border-radius: inherit;object-fit: cover;transition: transform .5s ease;}
.dataItem img,.dataItem a{-webkit-user-drag: none;-ms-user-drag: none;-moz-user-drag: none;user-drag: none;user-select: none;}
.dataItem {position: relative;}
.num {position: absolute;top: 0;left: 8px;background: #25008a;color: white;padding: 8px 10px;border-radius: 0 0 8px 8px;font-weight: 600;font-size: 16px;}
#slides {display: flex;overflow: hidden;scroll-behavior:smooth;gap: 10px;}
.active{cursor:grab;}
.ItemsTitle{font-weight:800;font-size:14px;padding: 8px;background:#0000008c;color:white;}
.dataItem div:not(.ItemsTitle):nth-child(1) {display: flex;align-items: center;overflow: hidden;border-radius: 8px;}
.itemSlider:hover .dataItem img {transform: scale(1.5);}
.itemSlider .dataItem a {position: absolute;bottom: 0;width:100%;}
@media screen and (max-width:720px){#slides{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}.itemSlider{scroll-snap-align:center}}
</style>
</b:if>Pasang Slider di atas tag </body>.
Slider.Js :
<b:if cond='data:view.isHomepage'>
<script>
$.ajax({
url: location.protocol + '//' + location.hostname +'/feeds/posts/default?orderby=published&alt=json-in-script&max-results=150',
type: 'get',
dataType: 'jsonp',
success: function(json) {
let target = [],
num = 1;
for(var i = 0;i<json.feed.entry.length;i++){
var key = {};
feeds = json.feed.entry[parseInt(Math.random() * json.feed.entry.length)];
key['title'] = feeds.title.$t;
for(var e = 0;e<feeds.link.length;e++){
key['href'] = feeds.link[e].href;
}
var imgs,
c = feeds.content.$t,
d=c.indexOf("<img"),
e=c.indexOf('src="',d),
f=c.indexOf('"',e+5),
g=c.substr(e+5,f-e-5);
imgs=-1!=d&&-1!=e&&-1!=f&&""!=g?g:"https://images.bizlaw.id/gbr_artikel/images-2_294.webp";
key['img'] = feeds.media$thumbnail != null ? feeds.media$thumbnail.url.replace(/s72-c/,'s500').replace(/s72-w400-h210-c/,'s500') : imgs;
target[i] = key;
}
var dupe = target.filter((tag, index, array) => array.findIndex(t => t.title == tag.title) == index);
for(var o=0;o<10;o++){
$('#slides').append('<div class="itemSlider"><div class="dataItem"><div><img loading="lazy" src="'+dupe[o].img+'" ondragstart="event.preventDefault();"/><div class="num">'+num+++'</div></div><a href="'+dupe[o].href+'"><div class="ItemsTitle">'+dupe[o].title+'</div></a></div></div>');
}
},
error: function() {$('#slides').html('<strong>Error Getting Data!</strong>');}
});
const scrollContainer = document.getElementById("slides"),
matchAuto = document.getElementById("pxcSlide");
function slideShow() {
var container = $('.itemSlider').width(),
matchWidth = scrollContainer.scrollLeft,
widthMax = scrollContainer.scrollWidth;
if((matchWidth+container)+700>=widthMax){
scrollContainer.scrollLeft += -widthMax;
}else{
scrollContainer.scrollLeft += container;
}
}
var slide = setInterval(slideShow, 2000);
matchAuto.addEventListener("mouseover", function(){ clearInterval(slide)});
matchAuto.addEventListener("touchstart", function(){ clearInterval(slide)});
matchAuto.addEventListener("mouseout", function(){ slide = setInterval(slideShow, 2000);});
matchAuto.addEventListener("touchend", function(){ slide = setInterval(slideShow, 2000);});
document.getElementById('right-button').addEventListener('click', function(e) {
e.preventDefault();
var container = $('.itemSlider').width(),
matchWidth = scrollContainer.scrollLeft,
widthMax = scrollContainer.scrollWidth;
if((matchWidth+container)+700>=widthMax){
scrollContainer.scrollLeft += -widthMax;
}else{
scrollContainer.scrollLeft += container;
}
});
document.getElementById('left-button').addEventListener('click', function(e) {
e.preventDefault();
var container = $('.itemSlider').width(),
matchWidth = scrollContainer.scrollLeft,
widthMax = scrollContainer.scrollWidth;
if(matchWidth==0){
scrollContainer.scrollLeft += widthMax;
}else{
scrollContainer.scrollLeft += -container;
}
});
if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
scrollContainer.addEventListener("wheel", (evt) => {
evt.preventDefault();
scrollContainer.scrollLeft += evt.deltaY;
});
let isDown = false;
let startX;
let scrollLeft;
const slider = document.querySelector('.slides');
const end = (e) => {
isDown = false;
slider.classList.remove('active');
}
const start = (e) => {
isDown = true;
slider.classList.add('active');
startX = e.pageX || e.touches[0].pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
}
const move = (e) => {
if(!isDown) return;
e.preventDefault();
const x = e.pageX || e.touches[0].pageX - slider.offsetLeft;
const dist = (x - startX);
slider.scrollLeft = scrollLeft - dist;
}
(() => {
slider.addEventListener('mousedown', start);
slider.addEventListener('touchstart', start);
slider.addEventListener('mousemove', move);
slider.addEventListener('touchmove', move);
slider.addEventListener('mouseleave', end);
slider.addEventListener('mouseup', end);
slider.addEventListener('touchend', end);
})();
}
</script>
</b:if>Slider.js [Updated FIX Issue Violets Malware By Blogger Bot Detector] :
let limitSlider = 10;
$.ajax({
url: location.protocol + '//' + location.hostname +'/feeds/posts/default?orderby=published&alt=json-in-script&max-results=150',
dataType: 'jsonp',
success: function(json) {
let num = 0;
const key = {};
for(var i = 0;i<json.feed.entry.length;i++){
feeds = json.feed.entry[parseInt(Math.random() * json.feed.entry.length)];
if(key[feeds.id.$t] == null || key[feeds.id.$t] == ''){
if(num < limitSlider){
key[feeds.id.$t] = true;
const title = feeds.title.$t,
href = feeds.link[feeds.link.length - 1].href,
c = feeds.content.$t,
d=c.indexOf("<img"),
e=c.indexOf('src="',d),
f=c.indexOf('"',e+5),
g=c.substr(e+5,f-e-5),
imgs=-1!=d&&-1!=e&&-1!=f&&""!=g?g:"https://images.bizlaw.id/gbr_artikel/images-2_294.webp",
thumb = feeds.media$thumbnail != null ? feeds.media$thumbnail.url.replace(/s72-c/,'s500').replace(/s72-w400-h210-c/,'s500') : imgs;
$('#slides').append(`<div class="itemSlider"><div class="dataItem"><div><img loading="lazy" src="${thumb}" ondragstart="event.preventDefault();"/><div class="num">${num += 1}</div></div><a href="${href}"><div class="ItemsTitle">${title}</div></a></div></div>`);
}
}}},
error: function() {$('#slides').html('<strong>Error Getting Data!</strong>');}
});
const scrollContainer = document.getElementById("slides"),
matchAuto = document.getElementById("pxcSlide");
function slideShow() {
var container = $('.itemSlider').width(),
matchWidth = scrollContainer.scrollLeft,
widthMax = scrollContainer.scrollWidth;
document.getElementById('indicator').innerHTML = `matchWidth : ${matchWidth} // widthMax : ${widthMax} // container : ${$('.itemSlider').outerWidth()}`;
document.getElementById('indicator2').innerHTML = `Total Matching If ${(matchWidth+container)+($('#pxcSlide').outerWidth()-container)} < ${widthMax} == ${(matchWidth+container)+($('#pxcSlide').outerWidth()-container)>=widthMax}`;
if((matchWidth+container)+($('#pxcSlide').outerWidth()-container)>=widthMax){
scrollContainer.scrollLeft += -widthMax;
}else{
scrollContainer.scrollLeft += container;
}
}
var slide = setInterval(slideShow, 2000);
matchAuto.addEventListener("mouseover", function(){ clearInterval(slide)});
matchAuto.addEventListener("touchstart", function(){ clearInterval(slide)});
matchAuto.addEventListener("mouseout", function(){ slide = setInterval(slideShow, 2000);});
matchAuto.addEventListener("touchend", function(){ slide = setInterval(slideShow, 2000);});
document.getElementById('right-button').addEventListener('click', function(e) {
e.preventDefault();
var container = $('.itemSlider').width(),
matchWidth = scrollContainer.scrollLeft,
widthMax = scrollContainer.scrollWidth;
document.getElementById('indicator').innerHTML = `matchWidth : ${matchWidth} // widthMax : ${widthMax} // container : ${container}`;
document.getElementById('indicator2').innerHTML = `Total Matching If ${(matchWidth+container)+($('#pxcSlide').outerWidth()-container)} < ${widthMax} == ${(matchWidth+container)+($('#pxcSlide').outerWidth()-container)>=widthMax}`;
if((matchWidth+container)+($('#pxcSlide').outerWidth()-container)>=widthMax){
scrollContainer.scrollLeft += -widthMax;
}else{
scrollContainer.scrollLeft += container;
}
});
document.getElementById('left-button').addEventListener('click', function(e) {
e.preventDefault();
var container = $('.itemSlider').width(),
matchWidth = scrollContainer.scrollLeft,
widthMax = scrollContainer.scrollWidth;
if(matchWidth==0){
scrollContainer.scrollLeft += widthMax;
}else{
scrollContainer.scrollLeft += -container;
}
});
if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
scrollContainer.addEventListener("wheel", (evt) => {
evt.preventDefault();
scrollContainer.scrollLeft += evt.deltaY;
});
let isDown = false;
let startX;
let scrollLeft;
const slider = document.querySelector('.slides');
const end = (e) => {
isDown = false;
slider.classList.remove('active');
}
const start = (e) => {
isDown = true;
slider.classList.add('active');
startX = e.pageX || e.touches[0].pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
}
const move = (e) => {
if(!isDown) return;
e.preventDefault();
const x = e.pageX || e.touches[0].pageX - slider.offsetLeft;
const dist = (x - startX);
slider.scrollLeft = scrollLeft - dist;
}
(() => {
slider.addEventListener('mousedown', start);
slider.addEventListener('touchstart', start);
slider.addEventListener('mousemove', move);
slider.addEventListener('touchmove', move);
slider.addEventListener('mouseleave', end);
slider.addEventListener('mouseup', end);
slider.addEventListener('touchend', end);
})();
}Pasang Markup Pemanggil di tempat yg diinginkan.
HTML Markup :
<b:if cond='data:view.isHomepage'>
<div id='pxcSlide'>
<div id='slides' class='slides'></div>
<div id='left-button'><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-narrow-left" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="5" y1="12" x2="19" y2="12" /><line x1="5" y1="12" x2="9" y2="16" /><line x1="5" y1="12" x2="9" y2="8" />
</svg></div>
<div id='right-button'><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-narrow-right" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="5" y1="12" x2="19" y2="12" /><line x1="15" y1="16" x2="19" y2="12" /><line x1="15" y1="8" x2="19" y2="12" />
</svg></div>
</div>
</b:if>Catatan :
- ubah URL Gambar (Jika Post gada gambar) Cari di Slider.js url dibawah ini dan ganti dengan Url Image not Found Kalian.
https://images.bizlaw.id/gbr_artikel/images-2_294.webp- Mengatur Jumlah Slider Cari Script dibawah yg terdapat pada Slider.js,kalian Ubah angak "10" dengan jumlah yg ingin kalian tampilkan
for(var o=0;o<10;o++){
$('#slides').append('<div class="itemSlider"><div class="dataItem"><div><img loading="lazy" src="'+dupe[o].img+'" ondragstart="event.preventDefault();"/><div class="num">'+num+++'</div></div><a href="'+dupe[o].href+'"><div class="ItemsTitle">'+dupe[o].title+'</div></a></div></div>');
}- Mengatur Kecepatan SlideShow.Kalian Cari script dibawah yg terdapat di Slider.js Ubah "2000" Menjadi suka2 kalian.Perlu di ingat ini Milidetik jadi 2000 = 2detik.ada 3 code kalian cari 1-1.
var slide = setInterval(slideShow, 2000);
matchAuto.addEventListener("mouseout", function(){ slide = setInterval(slideShow, 2000);});
matchAuto.addEventListener("touchend", function(){ slide = setInterval(slideShow, 2000);});
https://jempolgamer.blogspot.com/
#pxcSlide:hover #right-button,#pxcSlide:hover #left-button{
display:block;
}
tambahin !important jadinya kayak gini:
#pxcSlide:hover #right-button,#pxcSlide:hover #left-button{
display:block !important;
}
And Fixing Issue Auto Slide Annoying Scroll...
kamu ambil selain Ajax Jsonnya lalu sesuai selectornya dengan selectormu
Is there also a way to leave infinite pagination, disable autoplay and leave the image as a link to the post?
$.ajax({
url: location.protocol + '//' + location.hostname + '/feeds/posts/default?orderby=published&alt=json-in-script&max-results=150',
type: 'get',
dataType: 'jsonp',
success: function(json) {
let num = 0;
for(var i = 0;i<limitSlider;i++){
feeds = json.feed.entry[i];
const title = feeds.title.$t,
href = feeds.link[feeds.link.length - 1].href,
c = feeds.content.$t,
d=c.indexOf("<img"),
e=c.indexOf('src="',d),
f=c.indexOf('"',e+5),
g=c.substr(e+5,f-e-5),
imgs=-1!=d&&-1!=e&&-1!=f&&""!=g?g:"https://images.bizlaw.id/gbr_artikel/images-2_294.webp",
thumb = feeds.media$thumbnail != null ? feeds.media$thumbnail.url.replace(/s72-c/,'s500').replace(/s72-w400-h210-c/,'s500') : imgs;
$('#slides').append(`<div class="itemSlider"><div class="dataItem"><div><img loading="lazy" src="${thumb}" ondragstart="event.preventDefault();"/><div class="num">${num += 1}</div></div><a href="${href}"><div class="ItemsTitle">${title}</div></a></div></div>`);
}},
error: function() {$('#slides').html('<strong>Error Getting Data!</strong>');}
});
add the scope let autoSlider like this :
let limitSlider = 10,
autoSlider = false;
and add Condition in Slider interval :
if(autoSlider == true){
var slide = setInterval(slideShow, 2000);
matchAuto.addEventListener("mouseover", function(){ clearInterval(slide)});
matchAuto.addEventListener("touchstart", function(){ clearInterval(slide)});
matchAuto.addEventListener("mouseout", function(){ slide = setInterval(slideShow, 2000);});
matchAuto.addEventListener("touchend", function(){ slide = setInterval(slideShow, 2000);});
}
if you add the link in image, image dragger is not working idk how to fix this bcause when you drag to right the image will follow the cursor,so i disable link at image for this feature
By infinite pagination I mean looped slide.
Too bad the link in the image doesn't work :(
I'm trying to make a slide post similar to the one on Netflix. For that I used Swiper JS, but putting the link and image manually takes a lot of work. Is there a way to create a function to "join" this script + Swiper JS?
I've seen a code like this, but it was encoded and I couldn't understand it very well
https://arlethdesign.blogspot.com/2017/09/random-post-slider-with-tooltip-untuk.html?m=1
edit attribute class "itemSlider" to "swiper-slide"
and edit/delete/add attribute id "slides" to class "swiper-wrapper" in selector result ajax and html markup selector
and markup class swiper-wrapper put into markup attribute class "swipe"
like this :
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides result from ajax json -->
...
</div>
</div>
more information :
https://swiperjs.com/get-started
my last question... hahaha
Is there any way to use this same script multiple times just changing /feeds/posts/default/-/Label? directly from the widget editor?
const postLabel={
run:function(label,num){
$.ajax({
url: location.protocol + '//' + location.hostname + '/feeds/posts/default/-/'+label?,
type: 'get',
data:{orderby: "updated", alt:"json","max-results":num},
HTML: postLabel.run('TV', 5);
I created several files with different function names, but it still didn't work.
I'm trying to create category widgets by labels
example :
const postLabel={
run:function(label,num,selector){
$.ajax({
-- time skip --
success : function(e){
---- Time Skip --
$(selector).html(---- Body Result ---)
}
});
and run the script like this :
<div id='demo'>
<script>postLabel.run('TV', 5, '#demo')</script>
</div>
<div id='demo1'>
<script>postLabel.run('ONA', 5, '#demo1')</script>
</div>
<div id='demo2'>
<script>postLabel.run('OVA', 5, '#demo2')</script>
</div>
example code :
<script>
var callback = {
run:function(num,label,selector){
$.ajax({
url: `https://zeistmanga-bt.blogspot.com/feeds/posts/default${label != '' ? '/-/' + label : ''}`,
data:{'max-results':num,alt:'json-in-script',orderby:'published'},
type: 'get',
dataType: 'jsonp',
success: function(json) {
let num = 1;
for(var i = 0;i<json.feed.entry.length;i++){
$(selector).append(`${num++} : ${json.feed.entry[i].title.$t}<br>`);
}},
error: function() {$(selector).html('<strong>Error Getting Data!</strong>');}
});
}}
</script>
<div id='demo1'>
<script>callback.run(5,'Ongoing','#demo1');</script>
</div>
<div id='demo2'>
<script>callback.run(5,'Completed','#demo2');</script>
</div>
<div id='demo3'>
<script>callback.run(5,'Action','#demo3');</script>
</div>
Similar Threads