
Get Started > Details
- Details
- Install
Deskripsi.
Kode ini membuat jadwal rilis dari hari Senin sampai Minggu yang dibuat dengan style Tabs.
-
Pasang RasganeJS atau BloggerScript v1.2.0 di atas tag
</head>
. -
Pasang kode css di dalam tag
<b:skin><![CDATA[...]]></b:skin>
atau<style>...</style>
..box_schedule:root { --w-1: 100%; --w-2: 50%; --w-3: 33.3333333%; --w-4: 25%; --w-5: 20%; --w-6: 16.66666%; } .no_data{display:block;text-align:center;font-size:1.5em;font-weight:600;opacity:.5} .tab-content .tab-pane{display:none} .tab-content .tab-pane.active{display:block} .box_schedule{overflow:hidden} .box_schedule>ul{list-style:none;display:flex;flex-wrap:nowrap!important;overflow-y:hidden;overflow-x:auto;margin-bottom:.5rem;border-bottom:1px solid #484f56} .box_schedule>ul li{display:block;padding:.5em 1em;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;opacity:.75;cursor:pointer;white-space:nowrap} .box_schedule>ul li.active{color:#0c70de;opacity:1;font-weight:600;border-bottom:2px solid #0c70de} .tab-content .tab-pane>a{float:left;width:var(--w-6)} .box_schedule .tab-content .tab-pane > a .box_artikel{margin:5px} .box_schedule .tab-content .tab-pane > a .box_artikel .thumb{padding:142% 0 0;position:relative;overflow:hidden;background:#333} .box_schedule .tab-content .tab-pane > a .box_artikel .thumb img{width:100%;height:100%;object-fit:cover;min-height:120px;top:0;position:absolute;transition:all .15s ease-out} .box_schedule .tab-content .tab-pane > a .box_artikel .thumb .eps{background-color:#ffc107;position:absolute;z-index:1;bottom:0;left:0;width:100%;padding:.25rem;color:#000;text-transform:uppercase;font-weight:700;text-align:center} .box_schedule .tab-content .tab-pane > a .box_artikel h3{font-size:15px;margin:.5rem 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2} @media only screen and (max-width: 900px) { .tab-content .tab-pane>a{float:left;width:var(--w-4)} } @media only screen and (max-width: 768px) { .tab-content .tab-pane>a{float:left;width:var(--w-3)} } @media only screen and (max-width: 540px) { .tab-content .tab-pane>a{float:left;width:var(--w-2)} }
-
Pasang kode javascript di bawah
</body>
<script>//<![CDATA[ let days = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu']; let cp_schedule = new BloggerScript({ noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsQvVf8DMHVWLyZDGuzWdc4_X6qYRsMxEhzLMWdZY9ZEWN6A2SSGVUXYjMnKnPqxzfz0xHZfoJM4JO2G8w-UNb6njrTpb5SosjvSjGWoL8UVL0-cXEwVOCte-AiQ2Ac2RjoJUgBzuYkLQb/s2048/No+Image+Berkas+Kita.jpg", sizeImage: 's320' }); const get_cp_schedule = (e) => { let get_location = document.querySelector('.box_schedule'); let entry = cp_schedule.getFeed(e); let groupedEntries = {}; days.forEach(day => { groupedEntries[day] = entry.filter(entry => entry.label.includes(day)); }); console.log(groupedEntries); let ulContent = ''; let tabContent = ''; days.forEach((day, index) => { ulContent += `<li class="nav-item" data-post="${index + 1}">${day}</li>`; let entriesHtml = ''; groupedEntries[day].forEach(item => { let eps = item.label.find(i => ["Episode","Eps.","Ep"].some(s => i.includes(s))); entriesHtml += ` <a href="${item.link}"> <div class="box_artikel"> <div class="thumb"> <img src="${item.image}" alt="${item.title}"> ${eps?`<div class="eps"><span>${eps}</span></div>`:''} </div> <h3>${item.title}</h3> </div> </a>`; }); if (entriesHtml === '') { entriesHtml = `<span class="no_data">No Post...</span>`; } tabContent += `<div class="tab-pane" data-post="${index + 1}">${entriesHtml}</div>`; }); if (get_location) { get_location.innerHTML = `<ul>${ulContent}</ul><div class="tab-content">${tabContent}</div>`; // Add event listener for tab switching document.querySelectorAll('.nav-item').forEach(item => { item.addEventListener('click', function() { document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active')); document.querySelector('.tab-pane[data-post="' + this.getAttribute('data-post') + '"]').classList.add('active'); document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active')); this.classList.add('active'); }); }); // Set the active tab based on the current day let today = new Date().getDay(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday let dayIndex = today === 0 ? 6 : today - 1; // Adjust the index to match the days array (0 = Senin, ..., 6 = Minggu) console.log(today); document.querySelectorAll('.nav-item')[dayIndex].classList.add('active'); document.querySelectorAll('.tab-pane')[dayIndex].classList.add('active'); } }; const run_cp_schedule = () => { let get_location = document.querySelector('.box_schedule'); if (get_location) { let label_name = get_location.dataset.label || false; cp_schedule.xhr(`/feeds/posts/default${label_name == false ? '' : `/-/${label_name}`}?alt=json-in-script&max-results=150`, get_cp_schedule); } }; document.addEventListener('DOMContentLoaded', () => { run_cp_schedule(); }); //]]></script>
-
Dan Terakhir tambahkan tag html ini untuk menampilkan kodenya.
<div class="box_schedule">Loading...</div>
Code ===> https://github.com/anixrealm/-Widgets/blob/main/Comments%20Widget%20(%20In%20Progress%20)
<style>
:root {
--bg-color: #333;
--text-color: #fff;
--secondary-text-color: #bbb;
--footer-text-color: #888;
--gap-size: 15px;
}
#comments-container {
display: flex;
flex-direction: column;
gap: var(--gap-size);
}
.comment-card {
display: flex;
flex-direction: column;
padding: var(--gap-size);
background-color: var(--bg-color);
color: var(--text-color);
border-radius: 8px;
font-family: Arial, sans-serif;
position: relative;
transition: background-color 0.3s ease;
}
.comment-header {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.comment-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
object-fit: cover;
}
.comment-header h4 {
margin: 0;
font-size: 1em;
}
.comment-header p {
margin: 0;
font-size: 0.9em;
color: var(--secondary-text-color);
}
.comment-text {
font-size: 1em;
margin: 10px 0;
font-style: italic;
}
.comment-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.comment-footer span {
font-size: 0.8em;
color: var(--footer-text-color);
}
.post-thumbnail {
width: 50px;
height: 50px;
border-radius: 8px;
object-fit: cover;
position: absolute;
right: 15px;
bottom: 15px;
}
@media (max-width: 600px) {
.post-thumbnail {
width: 40px;
height: 40px;
}
.comment-header h4,
.comment-header p,
.comment-text,
.comment-footer span {
font-size: 0.9em;
}
}
</style>
<script>
const fetchComments = () => {
const blogUrl = 'https://www.rasgane.com/'; // Replace with your blog URL
const commentsFeedUrl = `${blogUrl}/feeds/comments/default?alt=json&max-results=5`;
fetch(commentsFeedUrl)
.then(response => response.json())
.then(data => {
const comments = data.feed.entry || [];
displayComments(comments);
})
.catch(error => console.error('Error fetching comments:', error));
};
// const fetchPostThumbnail = (postUrl, callback) => {
// fetch(`${postUrl}/feeds/posts/default?alt=json`)
// .then(response => response.json())
// .then(data => {
// const post = data.entry;
// const thumbnailUrl = post.media$thumbnail ? post.media$thumbnail.url.replace('s72-c', 's160-c') : '';
// callback(thumbnailUrl);
// })
// .catch(error => {
// console.error('Error fetching post thumbnail:', error);
// callback('');
// });
// };
const displayComments = (comments) => {
const commentsContainer = document.getElementById('comments-container');
let comment_html = '';
console.log(comments);
comments.forEach(item => {
let authorImage = item.author[0].gd$image.src;
let authorName = item.author[0].name.$t;
let publishedDate = item.published.$t;
let content = item.content.$t;
comment_html += `<div class="comment-card">
<div class="comment-header">
<img src="${authorImage.replace('/s32-c/', '/s64-c/')}" alt="author avatar" class="comment-avatar">
<div>
<h4>${authorName}</h4>
<p>Judul</p>
</div>
</div>
<p class="comment-text">"${content}"</p>
<div class="comment-footer">
<span>${new Date(publishedDate).toLocaleString()}</span>
${authorImage ? `<img src="${authorImage}" alt="post thumbnail" class="post-thumbnail">` : ''}
</div>
</div>`;
});
commentsContainer.innerHTML = comment_html;
};
window.onload = fetchComments;
</script>
thanking you ,
Anix