#log-update{background:black;color:white;padding:12px; font-family:fira sans,sans-serif;-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important;}
#activity h2{font-size:16px;font-weight:800;padding:2px 0;border-bottom:1px solid white;display:table-cell;}
#bodyItem img{width:65px;height:65px;border-radius:50%;object-fit:cover;}
#bodyItem{display:flex;align-items:center;gap:8px;}
li.itemActivity{display:flex;align-items:center;gap:6px;position:relative;padding:2px 0;}
li.itemActivity a:hover{color:#f93c3c;}
li.itemActivity #items{background:#222;width:100%;height:100%;padding:6px 8px;border-radius:8px;z-index:1;}
li.itemActivity:before{content:'';position: absolute;height: 98%;border: 1px solid;border-style: dashed;top:50%;left:10px;transform:translate(-50%,-10px);}
li.itemActivity:nth-last-child(1):before{height: 0 !important;}
li.itemActivity:after {content: '';position: absolute;left: 0;right: 0;border: 1px solid;width: 25px;border-style: double;}
li.itemActivity svg.components{width:16px;height:16px;display:inline-block;background:red;border-radius:50%;padding:2px 3px 2px 2px;z-index:1;}
li.itemActivity svg.clock{width:12px;height:12px;display:inline-block;background:red;border-radius:50%;padding:2px;z-index:1;fill:white;}
li.itemActivity svg.user{width:12px;height:12px;display:inline-block;background:red;border-radius:50%;padding:2px;z-index:1;}
li.itemActivity .upActivity{font-size:16px;font-weight:600;margin-bottom:8px;}
li.itemActivity .upActivity span.title{overflow:hidden;text-overflow:ellipsis;display:-webkit-inline-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
li.itemActivity .bottomActivity{display:flex;align-items:center;gap:8px;}
li.itemActivity .bottomActivity div{display:flex;align-items:center;gap:4px;}
li.itemActivity .bottomActivity div{font-size:14px;}
.activityNew{color: #f33;font-size: 12px;font-weight: 800;position: relative;bottom: 1.5px;-webkit-animation-name:blinker;-webkit-animation-duration:1s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:infinite;-moz-animation-name:blinker;-moz-animation-duration:1s;-moz-animation-timing-function:linear;-moz-animation-iteration-count:infinite;animation-name:blinker;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite}
.activityHot{font-size: 10px;background: red;padding: 2px 4px;border-radius: 4px;position: relative;bottom: 2.5px;text-transform: uppercase;color:white;}
.activityHot,.activityNew{overflow:hidden;text-overflow:ellipsis;display:-webkit-inline-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;}
.activtyGroup{margin:12px 0 6px;}
@-moz-keyframes blinker {0% {opacity:1}50% {opacity:0}100% {opacity:1}}
@-webkit-keyframes blinker {0% {opacity:1}50% {opacity:0}100% {opacity:1}}
@keyframes blinker {0% {opacity:1}50% {opacity:0}100% {opacity:1}}
@media screen and (max-width:475px){
li.itemActivity:after,li.itemActivity:before,li.itemActivity svg.components{display:none;}
}
@media screen and (max-width:412px){
#bodyItem{display:block;}
#bodyItem img{width:100%;height:125px;border-radius:4px;object-fit:cover;}
}

<ul id='log-update' class='log'/>

const resultUL = document.getElementById('log-update');
$.ajax({
url: 'https://vardallion.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=150',
type: 'get',
dataType: 'jsonp',
success: function(json) {
var arr=[];
	for(var i=0;i<json.feed.entry.length;i++){
    var obj={},
    feed = json.feed.entry[i],
    content = feed.content != null ? feed.content.$t : feed.summary.$t,
	ix = content.indexOf("data-updated='") > -1 ? content.indexOf("data-updated='") : content.indexOf('data-updated="') > -1 && content.indexOf('data-updated="'),
	ux = content.indexOf("'",ix+14) > -1 ? content.indexOf("'",ix+14) : content.indexOf('"',ix+14);
        obj['title'] = feed.title.$t.replace(/Manhua /,'').replace(/Manga /,'').replace(/Indonesia/,'').replace(/Bahasa/,'').replace(/PDF/,'').replace(/[–]/,'').replace(/[-]/,'').replace(/[[]]/,'') + ' ' + content.substr(ix+14,ux-35),
        obj['author'] = feed.author[0].name.$t;
        obj['date'] = feed.updated.$t;
        for(var o=0;o<feed.link.length;o++){
        obj['href'] = feed.link[o].href;
        }
        var imgs,
		d=content.indexOf("<img"),
		e=content.indexOf('src="',d) > -1 ? content.indexOf('src="',d) : content.indexOf("src='",d),
		f=content.indexOf('"',e+5) > -1 ? content.indexOf('"',e+5) : content.indexOf("'",e+5),
		g=content.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";
  
obj['img'] = feed.media$thumbnail != null ? feed.media$thumbnail.url.replace(/s72-c/,'s500') : imgs;
        obj['num'] = feed.thr$total != null ? feed.thr$total.$t : 0;
        arr.push(obj);
	}
   
   // Grouping
const output = [...new Set(arr.map(t => parseInt(t.date.split('-')[0])))].map(yr => [yr, [...new Set(arr.filter(t => parseInt(t.date.split('-')[0]) === yr).map(t => parseInt(t.date.split('-')[1])))].map(mo => [mo, [...new Set(arr.filter(t => parseInt(t.date.split('-')[0]) === yr && parseInt(t.date.split('-')[1]) === mo).map(t => parseInt(t.date.split('-')[2].replace(/T[0-9].+/,''))))].map(da => [da, arr.filter(t => parseInt(t.date.split('-')[2].replace(/T[0-9].+/,'')) === da && parseInt(t.date.split('-')[0]) === yr && parseInt(t.date.split('-')[1]) === mo)]).sort((a,b) => b[0] - a[0])]).sort((a,b) => b[0] - a[0])]).sort((a,b) => b[0] - a[0]);

const matchMonth = number => ('0'+number).slice(-2);

for (const [year, months] of output) {
const formatMonth = new Intl.DateTimeFormat('id', {month: "short"});
for (const [month, input] of months) {
const months = month;
for (const [day, log] of input) {
const match = `${input[0]}`;
    resultUL.insertAdjacentHTML('beforeend', `<div id="activity" class="activity"><h2>${day} ${formatMonth.format(new Date(log[0].date))} ${year}</h2><ul class="activtyGroup" id="activty${matchMonth(months)}-${day}-${year}"></div>`);
    const monthDiv = resultUL.querySelector(`#activty${matchMonth(month)}-${day}-${year}`);
    for (logs of log) {
      const date = new Date(logs.date),
      hour = date.getHours() < 10 ? '0'+date.getHours():date.getHours(),
      minute = date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes();
      monthDiv.insertAdjacentHTML('beforeend', `<li class='itemActivity'><svg xmlns='http://www.w3.org/2000/svg' class='components' viewBox='0 0 24 24' stroke-width='2.5' stroke='white' fill='none' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M3 12l3 3l3 -3l-3 -3z' /><path d='M15 12l3 3l3 -3l-3 -3z' /><path d='M9 6l3 3l3 -3l-3 -3z' /><path d='M9 18l3 3l3 -3l-3 -3z' /></svg><div id='items'><div id='bodyItem'><a href='${logs.href}'><img src='${logs.img}' loading='lazy' alt='${logs.title}' title='${logs.title}'/></a><div><div class="upActivity"><a href='${logs.href}'><span class='title'>${logs.title}</span> ${logs.num > 0 ? '<span class="activityHot">Hot</span>' : ''} ${match.split(',')[0] == date.getDate() - 1 ? '<span class="activityNew">New!!</span>' : ''}</a></div><div class="bottomActivity"><div><svg xmlns="http://www.w3.org/2000/svg" class="user" viewBox="0 0 24 24" stroke-width="2.5" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="9" /><circle cx="12" cy="10" r="3" /><path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855" /></svg> : ${logs.author}</div><div><svg class="clock" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg> : ${hour+':'+minute}</div></div></div></div></div></li>`);
      }
    }
  }
}
},
error: function() {resultUL.innerHTML = 'Error Getting Data!';}
});

<div class='updated' data-updated='Vol 14 dan 15'/>
<img src='https://cdn.anime-planet.com/manga/primary/a-record-of-a-mortals-journey-to-immortality-novel-1.jpg'/>
<!-- -->

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

https://vardallion.blogspot.com

https://images.bizlaw.id/gbr_artikel/images-2_294.webp