Netflix Style Cards for Other Content in Blogger

here bewlo, the JS code and CSS for 10 Styles of Netflix Cards Working on 05-02-2026 The below code old not g sheet is used for attribute i...

here bewlo, the JS code and CSS for 10 Styles of Netflix Cards Working on 05-02-2026

The below code old not g sheet is used for attribute in Col N
[(card, grid, list, highlight, neon, poster, text, simple1, simple2, modern)


<div data-show-icons="true" data-style="grid" id="globalControl">
</div>

<style>
/* ===== GLOBAL SETTINGS ===== */
:root {
--rail-gap: 10px;
--rail-border-radius: 6px;
--rail-card-width: 160px;
--rail-card-height: 200px;
--rail-thumb-height: 120px;
--rail-bg-color: #1f1f1f;
--rail-hover-bg: #333;
--rail-title-color: #ff5500;
--rail-title-hover: #cc4400;
--rail-text-color: #fff;
}

/* ===== Rail Container ===== */
.content-rail { margin: 20px 0; }
.content-rail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.content-rail-title { font-size: 18px; font-weight: bold; }
.content-rail-title a { color: var(--rail-title-color); text-decoration: none; transition: 0.2s; }
.content-rail-title a:hover { color: var(--rail-title-hover); text-decoration: underline; }

.row-arrows button { background: #222; color: #fff; border: none; padding: 6px 10px; margin-left: 5px; cursor: pointer; border-radius: 4px; font-size: 16px; }
.row-arrows button:hover { background: #444; }

.content-rail-body { display: flex; gap: var(--rail-gap); overflow-x: auto; scroll-behavior: smooth; padding-bottom: 10px; flex-wrap: nowrap; }
.content-rail-body::-webkit-scrollbar { height: 6px; }
.content-rail-body::-webkit-scrollbar-thumb { background: #bbb; border-radius: 10px; }

.rail-item { border-radius: var(--rail-border-radius); overflow: hidden; transition: transform 0.2s ease, background 0.2s ease; position: relative; text-align: center; flex-shrink: 0; }

/* ===== 1. Classic Card ===== */
.rail-card { background: var(--rail-bg-color); color: var(--rail-text-color); width: var(--rail-card-width); height: var(--rail-card-height); }
.rail-card:hover { transform: scale(1.07); background: var(--rail-hover-bg); }
.rail-card a { display: block; padding: 8px; font-size: 14px; color: var(--rail-title-color); text-decoration: none; }
.rail-card a:hover { color: var(--rail-title-hover); }

/* ===== 2. Grid Style ===== */
.rail-grid { background: #111; color: #fff; width: var(--rail-card-width); height: var(--rail-card-height); }
.rail-grid .rail-thumb { width: 100%; height: var(--rail-thumb-height); }
.rail-grid a { display: block; padding: 6px; font-size: 13px; color: #00ccff; }
.rail-grid:hover { transform: scale(1.05); background: #222; }

/* ===== 3. List Style ===== */
.rail-list { background: #222; color: #fff; min-width: 300px; display: flex; align-items: center; }
.rail-list .rail-thumb { width: 90px; height: 90px; flex-shrink: 0; }
.rail-list a { flex: 1; padding: 10px; font-size: 16px; color: #ffcc00; text-align: left; }
.rail-list:hover { background: #333; }

/* ===== 4. Highlight Style ===== */
.rail-highlight { background: #330000; color: #fff; width: var(--rail-card-width); height: var(--rail-card-height); }
.rail-highlight .rail-thumb { width: 100%; height: var(--rail-thumb-height); border-bottom: 2px solid #ff3300; }
.rail-highlight a { display: block; padding: 10px; font-weight: bold; color: #ff3300; }
.rail-highlight:hover { transform: scale(1.08); background: #550000; }

/* ===== 5. Neon Style ===== */
.rail-neon { background: #000; color: #0ff; width: var(--rail-card-width); height: var(--rail-card-height); border: 2px solid #0ff; }
.rail-neon .rail-thumb { width: 100%; height: var(--rail-thumb-height); border-bottom: 1px solid #0ff; }
.rail-neon a { display: block; padding: 8px; font-size: 14px; color: #0ff; font-weight: bold; }
.rail-neon:hover { transform: scale(1.07); background: #011; }

/* ===== 6. Poster Style ===== */
.rail-poster { background: #111; color: #fff; width: var(--rail-card-width); height: var(--rail-card-height); }
.rail-poster .rail-thumb { width: 100%; height: 200px; }
.rail-poster a { display: block; padding: 6px; font-size: 12px; color: #ff3300; text-align: center; }
.rail-poster:hover { transform: scale(1.05); background: #222; }

/* ===== 7. Text Only ===== */
.rail-text { background: transparent; color: #fff; min-width: 140px; display: flex; align-items: center; justify-content: center; height: 50px; }
.rail-text a { font-size: 14px; font-weight: bold; color: var(--rail-title-color); text-decoration: none; }
.rail-text a:hover { color: var(--rail-title-hover); }

/* ===== 8. Simple Text Link 1 ===== */
.rail-simple1 { background: #111; color: #ffdd00; min-width: 150px; display: flex; align-items: center; justify-content: center; height: 50px; }
.rail-simple1 a { font-size: 14px; font-weight: bold; color: #ffdd00; text-decoration: underline; }
.rail-simple1 a:hover { color: #ffaa00; }

/* ===== 9. Simple Text Link 2 ===== */
.rail-simple2 { background: #222; color: #00ffcc; min-width: 150px; display: flex; align-items: center; justify-content: center; height: 50px; }
.rail-simple2 a { font-size: 14px; font-weight: bold; color: #00ffcc; text-decoration: underline; }
.rail-simple2 a:hover { color: #00cc99; }

/* ===== 10. Modern Netflix-like Style ===== */
.rail-modern { background: #1a1a1a; color: #fff; width: var(--rail-card-width); height: var(--rail-card-height); border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.rail-modern .rail-thumb { width: 100%; height: var(--rail-thumb-height); border-radius: 10px 10px 0 0; overflow: hidden; }
.rail-modern a { display: block; padding: 8px; font-size: 14px; color: #ff3300; font-weight: bold; text-align: center; }
.rail-modern:hover { transform: scale(1.06); background: #222; }

/* ===== Author Name Styling ===== */
.rail-author {
margin-top: 4px;
font-size: 12px;
color: #aaa;
text-align: center;
}

.rail-author a {
color: #00ccff; /* author link color */
text-decoration: none;
font-weight: 500;
transition: 0.2s;
}

.rail-author a:hover {
color: #ffcc00; /* hover color */
text-decoration: underline;
}

/* ===== Thumb common ===== */
.rail-thumb { width: 100%; height: 90px; overflow: hidden; }
.rail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
</style>]

JS

CSS JS
[<script>
window.addEventListener("DOMContentLoaded", function () {

const sheetURL =
"https://docs.google.com/spreadsheets/d/1tj3xg0toFl8vT_O0SFQY2inq6XZqKRSqPMGlgcbLXMI/gviz/tq?tqx=out:json";

const keyBox = document.getElementById("seriesKey");
const container = document.getElementById("railBody");
const header = document.querySelector(".content-rail-title");
const global = document.getElementById("globalControl");

if (!keyBox || !container) return;

const currentURL = window.location.href
.split("?")[0]
.replace(/\/$/, "")
.toLowerCase();

const validStyles = [
"card","grid","list","highlight","neon",
"poster","text","simple1","simple2"
];

let visibleLimit = 6; // sliding window size
let startIndex = 0;
let allPosts = [];

/* ===== Header ===== */
if (header) {
const key = keyBox.dataset.key;
const name = keyBox.dataset.name || key;
header.innerHTML = `Other Content in:
<a href="/search?q=${encodeURIComponent(key)}">${name}</a>`;
}

/* ===== Fetch Sheet ===== */
fetch(sheetURL)
.then(r => r.text())
.then(t => {
const json = JSON.parse(t.substr(47).slice(0, -2));

const globalStyle =
(global?.getAttribute("data-style") || "card").toLowerCase();

allPosts = json.table.rows
.filter(r =>
r.c[2]?.v?.toLowerCase() ===
keyBox.dataset.key.toLowerCase()
)
.map(r => {
let style = r.c[12]?.v?.toLowerCase().trim();
if (!validStyles.includes(style)) style = globalStyle;

return {
title: r.c[4]?.v || "No title",
url: (r.c[5]?.v || "#")
.split("?")[0]
.replace(/\/$/, "")
.toLowerCase(),
img: r.c[6]?.v || "",
style,
author: r.c[8]?.v || "" // author_year column
};
});

if (allPosts.length === 0) return;

const currentIndex =
allPosts.findIndex(p => p.url === currentURL);

startIndex = currentIndex >= 0 ? currentIndex : 0;

renderWindow();
});

/* ===== Render Window ===== */
function renderWindow() {
container.innerHTML = "";

const total = allPosts.length;
const renderCount = Math.min(visibleLimit, total);

for (let i = 0; i < renderCount; i++) {
const idx = total > visibleLimit
? (startIndex + i) % total
: i;

const post = allPosts[idx];

const item = document.createElement("div");
item.className = "rail-item rail-" + post.style;

if (post.url === currentURL) {
item.classList.add("current");
}

let html = "";
if (post.img && post.style !== "text" &&
post.style !== "simple1" &&
post.style !== "simple2") {
html += `<div class="rail-thumb">
<img data-src="${post.img}" class="lazy">
</div>`;
}

// title
html += `<a href="${post.url}">${post.title}</a>`;

// author clickable
if (post.author) {
const authorQuery = encodeURIComponent(post.author);
html += `<div class="rail-author">
<a href="/search?q=${authorQuery}" target="_blank">By ${post.author}</a>
</div>`;
}

item.innerHTML = html;
container.appendChild(item);
}

lazyLoad();
centerCurrent();
}

/* ===== Lazy Images ===== */
function lazyLoad() {
container.querySelectorAll("img.lazy").forEach(img => {
if (!img.src) img.src = img.dataset.src;
});
}

/* ===== Center Current ===== */
function centerCurrent() {
const cur = container.querySelector(".rail-item.current");
if (cur) {
cur.scrollIntoView({ behavior: "smooth", inline: "center" });
}
}

// ===== Scroll arrows =====
window.scrollRail = function(dir) {
startIndex = (startIndex + dir + allPosts.length) % allPosts.length;
renderWindow();
};

});
</script>]