Top 10 series liked
code to display the series with the most likes generated by the like button code version 1.0/1.2.
For now, it's just to beautify the website.
Recreate it from scratch again, because the previous code was on the old broken phone
Top 10 Series Likes Features
The Top 10 Series Likes feature creates a list of the ten most popular series based on the number of likes received. Each list is dynamically sorted, ensuring it is always up-to-date with the series that have the most likes.
Here are the available features of Top 10 Series Likes:
- Period-Based Listing
Displays the Top 10 series that are most liked, with filters for daily, weekly, and monthly periods. - Sorting by Number of Likes
The list is automatically sorted by the most liked series, allowing users to receive recommendations for popular series in real-time. - Easy Tab Navigation
Users can switch between periods (daily, weekly, monthly) with a single click to view the trending series according to their needs. - Automatic Cover Image Display
Each series is equipped with a cover image. If a cover image is not available, a default image will be displayed. - Direct Links to Series
Each item on the Top 10 list can be clicked to navigate directly to the series' page, making content access easier. - Manual Data Reset Feature
Includes a reset feature for periods (daily, weekly, monthly), ensuring that the data is always up-to-date. - Neatly Formatted Like Counts
The like count display format is automatically converted (e.g., K, M, B) for easier reading.
The Top 10 Series Likes feature ensures users are always updated with the most popular and trending series.
check Demo:DEMO CODERule Firebase
Realtime database
{
"rules": {
".read": true,
".write": true,
"toplikes_byhirutshuji": {
"TopLikes": {
"$post_id": {
".read": true,
".write": true
}
}
}
}
}
Libary
put it below <head>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
html button reset likes
put on the page
<!-- button reset -->
<button id="reset_perhari_btn">Reset Perhari</button>
<!-- Tombol reset perminhgu -->
<button id="reset_perminggu_btn">Reset Perminggu</button>
<!-- Tombol reset perbulan -->
<button id="reset_perbulan_btn">Reset Perbulan</button>
html button likes
<button class='button_likes_hiru' expr:data-id='data:post.id' expr:data-image='data:post.featuredImage' expr:data-title='data:post.title' expr:data-url='data:post.url' type='button'><span class='leftcc'>
<svg fill='white' height='1em' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z'/></svg>
<span class='like'>Like</span>
</span><span class='likes_ditampilkan_hiru likeCount'>
</span></button>
html topLikes
html for Widget
<h1>Top Likes Terbanyak</h1>
<div id="tabs">
<button class="tablink perhari" onclick="openTab('hari')">Hari</button>
<button class="tablink perminggu" onclick="openTab('minggu')">Minggu</button>
<button class="tablink perbulan" onclick="openTab('bulan')">Bulan</button>
</div>
<div id="hari" class="tabcontent">No data available.</div>
<div id="minggu" class="tabcontent">No data available.</div>
<div id="bulan" class="tabcontent">No data available.</div>
Css Likes
for <b:skin> / <style>
/*Button Likes*/
.button_likes_hiru {
width: 140px;
height: 35px;
display: flex;
align-items: center;
justify-content: flex-start;
border: none;
border-radius: 5px;
overflow: hidden;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.089);
cursor: pointer;
background-color: transparent;
}
.leftcc {
width: 60%;
height: 100%;
background-color: rgb(238, 0, 0);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.leftcc .like {
color: white;
font-weight: 600;
}
.likeCount {
width: 40%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: rgb(238, 0, 0);
font-weight: 600;
position: relative;
background-color: white;
}
.likeCount::before {
height: 8px;
width: 8px;
position: absolute;
content: "";
background-color: rgb(255, 255, 255);
transform: rotate(45deg);
left: -4px;
}
.button_likes_hiru:hover .leftcc {
background-color: rgb(219, 0, 0);
}
.button_likes_hiru:active .leftcc {
background-color: rgb(201, 0, 0);
}
.button_likes_hiru:active .leftcc svg {
transform: scale(1.15);
transform-origin: top;
}
.button_likes_hiru svg {
display: inline;
width: 1.3rem;
height: 1.3rem;
margin-right: 0.05rem;
color: white;
animation: zoom_in_out 1s linear infinite;
}
@keyframes zoom_in_out {
0% {
transform: scale(1);
}
50% {
transform: scale(0.8);
}
100% {
transform: scale(1.1);
}
}
/* Widget show TopLikes*/
.divcc {
overflow: hidden;
--tw-bg-opacity: 1;
background-color: rgb(38 38 38/var(--tw-bg-opacity));
--tw-shadow: 0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);
--tw-ring-shadow: 0 0 #0000;
--tw-ring-offset-shadow: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;
margin-bottom: 1.25rem;
}
.boxpost {
display: grid;
grid-auto-rows: auto;
scroll-snap-align: center;
width: 20rem;
padding: .625rem;
}
.gridx {
display: grid;
grid-template-columns: 40px 77px 1fr;
padding-top: .5rem;
padding-bottom: .5rem;
}
.nomorindex {
font-size: 1.55rem;
line-height: 1.75rem;
text-align: center;
border-bottom-width: 4px;
align-self: center;
margin-inline-end: .5rem;
font-weight: 700;
border-bottom: 3px solid #dd95ff;
}
.gridx[data-idpopular="undefined"] {
display: none;
}
.rlv {
position: relative;
}
.abs {
position: absolute;
}
.imgcover {
border-radius: .25rem;
max-width: 100%;
width: 100%;
height: auto;
object-fit: cover;
display: block;
vertical-align: middle;
margin-inline-start: .55rem;
}
.divjudul {
padding-inline-start: 1rem;
align-self: center;
}
.h3like {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 1.5rem;
margin-bottom: .25rem;
}
.title_postlike{
color: inherit;
text-decoration: inherit;
}
.info_like {
display: inline-flex;
--tw-text-opacity: 1;
color: rgb(23 23 23/var(--tw-text-opacity));
font-weight: 500;
--tw-bg-opacity: 1;
background-color: rgb(115 115 115/var(--tw-bg-opacity));
border-radius: .25rem;
overflow: hidden;
align-items: center;}
.eps {
display: flex;
background: #b0e3af;
color: #4a5464;
line-height: 1.25rem;
font-size: .75rem;
padding-left: .25rem;
padding-right: .25rem;
align-items: center;
gap: 0 5px;
}
.eps svg, .status_lb svg {
width: 14px;
height: 14px;
}
.me-1 {
margin-inline-end: .25rem;}
.status_lb{
color: #4a5464;
display: flex;
line-height: 1.25rem;
font-size: .75rem;
background-color: gold;
padding-left: .25rem;
padding-right: .25rem;
align-items: center;
gap: 0 5px;
}
/*multitab*/
#tabs {
display: flex;
justify-content: space-between;
margin: 5px;
}
.tablink {
padding: 5px 7px;
border: none;
border-radius: 5px;
width: 100%;
margin: 5px;
color: #fff;
box-shadow: 1px 1px 2px 1px #1f1f1f;
}
.tablink.active,
.tablink:hover {
background: #fff;
color: #222;}
.perhari {
background: #0e71ba;
}
.perminggu {
background: #ba0e51;
}
.perbulan {
background: #ba7a0e;
}
Javascript button Likes and TopLikes
place above </body>
<script>/*<![CDATA[*/
const config = {
dbURL: "https://xxx-xxx-default-rtdb.firebaseio.com", // change this
nilaiLike: 1,
judulWeb: "TopLikes",
path: "toplikes_byhirutshuji",
gakada_cover: "'https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/No-Image-Placeholder.svg/832px-No-Image-Placeholder.svg.png'",
likes: { perHari: 1, perMinggu: 1, perBulan: 1 },
};
function resetLikesDatabase(e){let t=`${config.dbURL}/${config.path}/${config.judulWeb}.json`;fetch(t).then(e=>{if(!e.ok)throw Error("Gagal mengambil data dari database");return e.json()}).then(t=>{let a=Object.keys(t).map(a=>{let r={...t[a],[`per${e}`]:0};return updateLikesData(a,r)});return Promise.all(a)}).then(()=>{showAlert("success","Reset Berhasil",`Nilai field per${e} berhasil direset di setiap entri data`)}).catch(e=>{console.error("Error:",e),showAlert("error","Oops...","Terjadi kesalahan saat mereset nilai field di setiap entri data")})}function updateLikesData(e,t){let a=`${config.dbURL}/${config.path}/${config.judulWeb}/${e}.json`;return fetch(a,{method:"PATCH",body:JSON.stringify(t),headers:{"Content-Type":"application/json"}}).then(t=>{if(!t.ok)throw Error("Gagal mengupdate data di entri data");console.log(`Data dengan kunci ${e} berhasil direset`)})}function showAlert(e,t,a){Swal.fire({icon:e,title:t,text:a,confirmButtonColor:"#3085d6",confirmButtonText:"OK"})}const resetButtons={perHari:document.getElementById("reset_perhari_btn"),perMinggu:document.getElementById("reset_perminggu_btn"),perBulan:document.getElementById("reset_perbulan_btn")};resetButtons.perHari.addEventListener("click",()=>resetLikesDatabase("hari")),resetButtons.perMinggu.addEventListener("click",()=>resetLikesDatabase("minggu")),resetButtons.perBulan.addEventListener("click",()=>resetLikesDatabase("bulan")); const likesBtnClassHiru=document.querySelectorAll(".button_likes_hiru"),lokasiLikesDitampilkanHiru=document.querySelectorAll(".likes_ditampilkan_hiru"),formatLikes=e=>0===e?0:e>=1e9?(e/1e9).toFixed(1).replace(/\.0$/,"")+"M":e>=1e6?(e/1e6).toFixed(1).replace(/\.0$/,"")+"JT":e>=1e3?(e/1e3).toFixed(1).replace(/\.0$/,"")+"K":e;likesBtnClassHiru.forEach((e,t)=>{let a=config.judulWeb,i=e.getAttribute("data-id"),r=e.getAttribute("data-url"),l=e.getAttribute("data-title"),s=e.getAttribute("data-image"),_=lokasiLikesDitampilkanHiru[t];e.addEventListener("click",()=>{fetch(`${config.dbURL}/${config.path}/${a}/${i}.json`).then(e=>e.json()).then(e=>{let t=e&&e.like||0,$=t+config.nilaiLike;_.textContent=$;let n=(e&&e.perhari||0)+config.nilaiLike,o=(e&&e.perminggu||0)+config.nilaiLike,d=(e&&e.perbulan||0)+config.nilaiLike,c={web:a,idpost:i,cover:s,url:r,title:l,like:$,perhari:n,perminggu:o,perbulan:d};fetch(`${config.dbURL}/${config.path}/${a}/${i}.json`,{method:"PUT",body:JSON.stringify(c),headers:{"Content-Type":"application/json"}})}).catch(e=>console.error("Gagal update data likes:",e))}),fetch(`${config.dbURL}/${config.path}/${a}/${i}.json`).then(e=>e.json()).then(e=>{let t=e&&e.like||0;_.textContent=formatLikes(t)}).catch(e=>console.error("Error Update datanya:",e))});const gkada_cover=config.gkada_cover;function openTab(e){var t,a=document.getElementsByClassName("tabcontent"),i=document.getElementsByClassName("tablink");for(t=0;t<a.length;t++)a[t].style.display="none";for(t=0;t<i.length;t++)i[t].classList.remove("active");document.getElementById(e).style.display="block",document.querySelector(`.tablink.per${e}`).classList.add("active"),req_data(e)}function req_data(e){fetch(`${config.dbURL}/${config.path}.json`).then(e=>e.json()).then(t=>{if(!t){console.error("No data available.");return}var a=Object.values(t).flatMap(e=>Object.values(e)).filter(t=>t&&void 0!==t[`per${e}`]);a.sort((t,a)=>a[`per${e}`]-t[`per${e}`]);var i=a.slice(0,10),r=document.getElementById(e);r.innerHTML="",i.forEach((t,a)=>{var i=(a+1).toString().padStart(2,"0"),l=t[`per${e}`],s=formatLikes(l),_=document.createElement("div");_.className="divList",_.innerHTML=`<article class="boxpost" role="article">
<div class="gridx" data-idpopular="${t.idpost}">
<div class="nomorindex" data-border="${i}">${i}</div>
<a class="rlv" href="${t.url}">
<img alt="${t.title}" class="imgcover" loading="lazy" src="${t.cover||gkada_cover}">
</a>
<div class="divjudul">
<h3 class="h3like">
<a class="title_postlike" href="${t.url}">${t.title}</a>
</h3>
<div class="info_like">
<span class="eps" data-like="${t[`per${e}`]}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17.869 3.889c-2.096 0-3.887 1.494-4.871 2.524c-.984-1.03-2.771-2.524-4.866-2.524C4.521 3.889 2 6.406 2 10.009c0 3.97 3.131 6.536 6.16 9.018c1.43 1.173 2.91 2.385 4.045 3.729c.191.225.471.355.765.355h.058c.295 0 .574-.131.764-.355c1.137-1.344 2.616-2.557 4.047-3.729C20.867 16.546 24 13.98 24 10.009c0-3.603-2.521-6.12-6.131-6.12"></path></svg>${s}
</span>
<span class="status_lb" data-bg=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path fill="currentColor" d="M202.24 74C166.11 56.75 115.61 48.3 48 48a31.36 31.36 0 0 0-17.92 5.33A32 32 0 0 0 16 79.9V366c0 19.34 13.76 33.93 32 33.93c71.07 0 142.36 6.64 185.06 47a4.11 4.11 0 0 0 6.94-3V106.82a15.89 15.89 0 0 0-5.46-12A143 143 0 0 0 202.24 74m279.68-20.7A31.33 31.33 0 0 0 464 48c-67.61.3-118.11 8.71-154.24 26a143.31 143.31 0 0 0-32.31 20.78a15.93 15.93 0 0 0-5.45 12v337.13a3.93 3.93 0 0 0 6.68 2.81c25.67-25.5 70.72-46.82 185.36-46.81a32 32 0 0 0 32-32v-288a32 32 0 0 0-14.12-26.61"></path></svg>LN</span>
</div>
</div>
</div>
</article><hr>`,r.appendChild(_)})}).catch(e=>{console.error("Error:",e)})}openTab("hari");
/*]]>*/</script>
Komentar
Posting Komentar
Yang Sopan komennya.
apapun yang gak aku suka bakal Kuhilangkan.