Script Demo mini playstore
blog ini menyediakan Kode - kode Script HTML untuk Blog dan website secara gratis bisa langsung copas.
Kode script di ambil dari berbagai sumber, dan ada juga hasil editan sendiri. Semoga Bermanfaat
klik untuk menyalin
👇
<!-- Tempel satu blok ini di Blogspot (Layout > Add a Gadget > HTML/JavaScript) -->
<div id="mini-playstore"></div>
<script>
(() => {
// ========= 1) DATA KATALOG (EDIT DI SINI) =========
const APPS = [
{
id: "drop-coin",
name: "DROP COIN",
dev: "Mang Ayi Studio",
category: "Tools",
rating: 4.7,
installs: 12840,
sizeMB: 8.2,
icon: "https://i.imgur.com/0Z8ZQGJ.png",
screenshots: [
"https://i.imgur.com/6x9q2Vf.jpeg",
"https://i.imgur.com/8h2HgX8.jpeg",
"https://i.imgur.com/3qYyK6V.jpeg"
],
description: "Mini app tap-to-earn ringan untuk harian, dengan bonus login & misi.",
apkUrl: "https://example.com/drop-coin.apk",
website: "https://drop-co.blogspot.com"
},
{
id: "serlok-tukang",
name: "Serlok Tukang",
dev: "Berkah Jaya Abadi Teknik",
category: "Lifestyle",
rating: 4.4,
installs: 5220,
sizeMB: 12.6,
icon: "https://i.imgur.com/7x8v1cS.png",
screenshots: [
"https://i.imgur.com/4n2QnEZ.jpeg",
"https://i.imgur.com/9wL7w5G.jpeg"
],
description: "Cari teknisi rumah tangga cepat—booking via WhatsApp, pelacakan sederhana.",
apkUrl: "https://example.com/serlok-tukang.apk",
website: "https://berkah-jaya-abadi-teknik.blogspot.com"
},
{
id: "spin-n-win",
name: "Spin & Win",
dev: "Mang Ayi Studio",
category: "Games",
rating: 4.2,
installs: 7680,
sizeMB: 5.1,
icon: "https://i.imgur.com/2m1n0nS.png",
screenshots: [
"https://i.imgur.com/1C0b2NA.jpeg"
],
description: "Game putar roda hadiah. Ringan, offline, hadiah harian.",
apkUrl: "https://example.com/spin-win.apk",
website: "https://drop-co.blogspot.com/p/game.html"
}
];
// ========= 2) STYLE (dibuat via JS agar cukup 1 blok) =========
const css = `
.ps-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;max-width:1000px;margin:16px auto;padding:0 12px}
.ps-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
.ps-title{font-size:22px;font-weight:800;letter-spacing:.3px}
.ps-ctrl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ps-input{padding:10px 12px;border:1px solid #e5e7eb;border-radius:12px;min-width:220px;outline:none}
.ps-select{padding:10px 12px;border:1px solid #e5e7eb;border-radius:12px;background:#fff}
.ps-chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.ps-chip{padding:6px 10px;border:1px solid #e5e7eb;border-radius:999px;cursor:pointer;font-size:13px}
.ps-chip.active{background:#111;color:#fff;border-color:#111}
.ps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1024px){.ps-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.ps-grid{grid-template-columns:repeat(2,1fr)}}
.ps-card{border:1px solid #eef0f2;border-radius:16px;padding:12px;background:#fff;display:flex;gap:12px;transition:transform .08s ease;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.ps-card:hover{transform:translateY(-1px)}
.ps-icon{width:56px;height:56px;border-radius:12px;object-fit:cover;border:1px solid #eef0f2;background:#f7f7f7}
.ps-info{flex:1;min-width:0}
.ps-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-dev{font-size:12px;color:#6b7280;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:#374151;margin:6px 0}
.ps-dot::before{content:"•";margin:0 6px;color:#d1d5db}
.ps-actions{display:flex;gap:8px}
.ps-btn{padding:8px 12px;border-radius:12px;border:1px solid #e5e7eb;background:#111;color:#fff;font-weight:600;cursor:pointer}
.ps-btn.outline{background:#fff;color:#111}
.ps-stars{font-size:12px}
.ps-badge{font-size:11px;padding:2px 6px;border-radius:999px;background:#f3f4f6;border:1px solid #e5e7eb}
/* modal */
.ps-modal{position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.4);z-index:9999}
.ps-modal.open{display:flex}
.ps-sheet{background:#fff;width:100%;max-width:820px;border-radius:16px 16px 0 0;padding:16px;border:1px solid #eef0f2;max-height:92vh;overflow:auto}
.ps-sheet-head{display:flex;gap:12px;align-items:center}
.ps-close{margin-left:auto;cursor:pointer;border:1px solid #e5e7eb;padding:6px 10px;border-radius:10px;background:#fff}
.ps-ss{display:flex;gap:8px;margin:12px 0;overflow:auto}
.ps-ss img{height:180px;border-radius:12px;border:1px solid #eef0f2}
.ps-desc{color:#374151;line-height:1.5}
.ps-foot{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ps-empty{padding:16px;border:1px dashed #e5e7eb;border-radius:12px;text-align:center;color:#6b7280}
`;
const style = document.createElement("style");
style.textContent = css;
document.head.appendChild(style);
// ========= 3) STATE =========
const state = {
q: "",
cat: "All",
sort: "trending", // trending | rating | name | newest
favorites: new Set(JSON.parse(localStorage.getItem("ps_fav") || "[]")),
installs: JSON.parse(localStorage.getItem("ps_installs") || "{}") // {id: count}
};
const allCats = ["All", ...Array.from(new Set(APPS.map(a => a.category)))];
// ========= 4) HELPERS =========
const fmtInstalls = n => {
if (n >= 1_000_000) return (n/1_000_000).toFixed(1).replace(/\.0$/,"")+"M+";
if (n >= 1_000) return (n/1_000).toFixed(1).replace(/\.0$/,"")+"K+";
return n.toString();
};
const stars = r => "★".repeat(Math.round(r)) + "☆".repeat(5 - Math.round(r));
const saveFav = () => localStorage.setItem("ps_fav", JSON.stringify([...state.favorites]));
const saveInstalls = () => localStorage.setItem("ps_installs", JSON.stringify(state.installs));
const getComputedInstalls = (app) => (app.installs + (state.installs[app.id] || 0));
const filterSort = () => {
const q = state.q.toLowerCase();
let list = APPS.filter(a =>
(state.cat === "All" || a.category === state.cat) &&
(a.name.toLowerCase().includes(q) || a.dev.toLowerCase().includes(q))
);
if (state.sort === "rating") list.sort((a,b)=>b.rating - a.rating);
else if (state.sort === "name") list.sort((a,b)=>a.name.localeCompare(b.name));
else if (state.sort === "newest") list.sort((a,b)=>b.installs - a.installs); // proxy
else if (state.sort === "trending") list.sort((a,b)=>getComputedInstalls(b) - getComputedInstalls(a));
return list;
};
// ========= 5) RENDER =========
const root = document.getElementById("mini-playstore");
root.innerHTML = `
<div class="ps-wrap">
<div class="ps-head">
<div class="ps-title">Mini Playstore</div>
<div class="ps-ctrl">
<input class="ps-input" id="ps-search" placeholder="Cari aplikasi..." />
<select class="ps-select" id="ps-sort">
<option value="trending">Paling Tren</option>
<option value="rating">Rating Tertinggi</option>
<option value="name">A-Z</option>
<option value="newest">Baru/Populer</option>
</select>
</div>
</div>
<div class="ps-chips" id="ps-cats"></div>
<div class="ps-grid" id="ps-grid"></div>
<div class="ps-empty" id="ps-empty" style="display:none">Tidak ada hasil.</div>
</div>
<div class="ps-modal" id="ps-modal" aria-hidden="true">
<div class="ps-sheet">
<div class="ps-sheet-head">
<img id="md-icon" class="ps-icon" alt="">
<div>
<div id="md-name" class="ps-name"></div>
<div id="md-dev" class="ps-dev"></div>
<div class="ps-meta"><span id="md-stars" class="ps-stars"></span><span class="ps-dot"></span><span id="md-inst"></span><span class="ps-dot"></span><span id="md-size" class="ps-badge"></span><span class="ps-badge" id="md-cat"></span></div>
</div>
<button class="ps-close" id="ps-close">Tutup</button>
</div>
<div class="ps-ss" id="md-ss"></div>
<div class="ps-desc" id="md-desc"></div>
<div class="ps-foot">
<button class="ps-btn" id="md-install">Install</button>
<a class="ps-btn outline" id="md-website" target="_blank" rel="noopener">Website</a>
</div>
</div>
</div>
`;
const el = {
cats: root.querySelector("#ps-cats"),
grid: root.querySelector("#ps-grid"),
empty: root.querySelector("#ps-empty"),
search: root.querySelector("#ps-search"),
sort: root.querySelector("#ps-sort"),
modal: root.querySelector("#ps-modal"),
close: root.querySelector("#ps-close"),
md: {
icon: root.querySelector("#md-icon"),
name: root.querySelector("#md-name"),
dev: root.querySelector("#md-dev"),
stars: root.querySelector("#md-stars"),
inst: root.querySelector("#md-inst"),
size: root.querySelector("#md-size"),
cat: root.querySelector("#md-cat"),
ss: root.querySelector("#md-ss"),
desc: root.querySelector("#md-desc"),
install: root.querySelector("#md-install"),
website: root.querySelector("#md-website"),
}
};
// Render categories
const renderCats = () => {
el.cats.innerHTML = "";
allCats.forEach(c => {
const chip = document.createElement("button");
chip.className = "ps-chip" + (state.cat===c ? " active":"");
chip.textContent = c;
chip.onclick = () => { state.cat = c; renderCats(); renderGrid(); };
el.cats.appendChild(chip);
});
};
// Open modal
let currentApp = null;
const openModal = (app) => {
currentApp = app;
el.md.icon.src = app.icon;
el.md.icon.alt = app.name;
el.md.name.textContent = app.name;
el.md.dev.textContent = app.dev;
el.md.stars.textContent = `${stars(app.rating)} (${app.rating.toFixed(1)})`;
el.md.inst.textContent = `${fmtInstalls(getComputedInstalls(app))} installs`;
el.md.size.textContent = `${app.sizeMB} MB`;
el.md.cat.textContent = app.category;
el.md.desc.textContent = app.description || "";
el.md.ss.innerHTML = "";
(app.screenshots || []).forEach(src => {
const img = document.createElement("img");
img.loading = "lazy";
img.src = src;
el.md.ss.appendChild(img);
});
el.md.install.onclick = () => installApp(app);
el.md.website.href = app.website || "#";
el.modal.classList.add("open");
el.modal.setAttribute("aria-hidden","false");
};
const closeModal = () => {
el.modal.classList.remove("open");
el.modal.setAttribute("aria-hidden","true");
};
el.close.onclick = closeModal;
el.modal.addEventListener("click", (e) => { if (e.target === el.modal) closeModal(); });
const installApp = (app) => {
state.installs[app.id] = (state.installs[app.id] || 0) + 1;
saveInstalls();
renderGrid(); // refresh counts
if (app.apkUrl) window.open(app.apkUrl, "_blank", "noopener");
};
// Render grid
const renderGrid = () => {
const data = filterSort();
el.grid.innerHTML = "";
if (!data.length){ el.empty.style.display="block"; return; }
el.empty.style.display="none";
data.forEach(app => {
const card = document.createElement("div");
card.className = "ps-card";
card.innerHTML = `
<img class="ps-icon" src="${app.icon}" alt="${app.name}"/>
<div class="ps-info">
<div class="ps-name" title="${app.name}">${app.name}</div>
<div class="ps-dev" title="${app.dev}">${app.dev}</div>
<div class="ps-meta">
<span class="ps-stars">${stars(app.rating)} (${app.rating.toFixed(1)})</span>
<span class="ps-dot"></span>
<span>${fmtInstalls(getComputedInstalls(app))} installs</span>
<span class="ps-dot"></span>
<span class="ps-badge">${app.sizeMB} MB</span>
</div>
<div class="ps-actions">
<button class="ps-btn">Install</button>
<button class="ps-btn outline">Detail</button>
</div>
</div>
`;
const [btnInstall, btnDetail] = card.querySelectorAll(".ps-btn");
btnInstall.onclick = () => installApp(app);
btnDetail.onclick = () => openModal(app);
el.grid.appendChild(card);
});
};
// Wire search/sort
el.search.addEventListener("input", (e)=>{ state.q = e.target.value; renderGrid(); });
el.sort.addEventListener("change", (e)=>{ state.sort = e.target.value; renderGrid(); });
// Init
renderCats();
renderGrid();
})();
</script>
Komentar untuk Script Demo mini playstore