Noob - Blogger Template

This Templates free. Please keep the credit link in the footer. Thank you for your support!

Note: The date format will change according to the reader’s country

Customize Templates

1. Change number Latest Posts, Labels Posts, Search Posts

Code

const POSTS_PER_PAGE = 10;

-> 12 or many you want

2. HomePage - "5 posts" label (Add more or Delete)

2.1 Add more "5 posts" label

-> Layout -> HTML/JavaScipt -> Copy and change "name label"

Code

<script>
(() => {
if (location.pathname === '/') {
document.write(`
<section class='label-spotlight' data-label='North America' id='label-spotlight-1'>
  <div class='spotlight-header'>
    <h2 class='spotlight-title'>North America
</h2>
    <a class='spotlight-more' href='/search/label/North America'>View More &#187;</a>
  </div>
  <div class='spotlight-grid'>
    <div class='spotlight-loading'>Waiting...</div>
  </div>
</section>
`);
} else {
var w = document.currentScript.closest('.widget');
if (w) w.style.display = 'none';
}
})();
</script>

2.2 Delete "5 posts" label

Code HTML

Watch 2.1

Code CSS

    .label-spotlight { background: #fff; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
    .spotlight-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding: 0px; border-bottom: 2px solid #007bff; }
    .spotlight-title { font-size: 18px; font-weight: 800; color: #111; margin: 0; position: relative; padding-left: 12px; }
    .spotlight-title::before { content: &#39;&#39;; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; background: #0070ff; border-radius: 2px; }
    .spotlight-more { font-size: 13px; font-weight: 600; color: #007bff; white-space: nowrap; margin:5px;}
    .spotlight-more:hover { color: #ff0000; }

    .spotlight-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
    .spotlight-featured { position: relative; display: block; border-radius: 8px; overflow: hidden; min-height: 320px; color: #fff; }
    .spotlight-featured img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform 0.4s ease; }
    .spotlight-featured:hover img { transform: scale(1.06); }
    .spotlight-featured::after { content: &#39;&#39;; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%); }
    .spotlight-featured-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; z-index: 2; }
    .spotlight-featured-label { display: inline-block; background: #0070ff; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 3px; margin-bottom: 8px; }
    .spotlight-featured-title { font-size: 20px; font-weight: 700; line-height: 1.35; margin: 0 0 6px; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
    .spotlight-featured-date { font-size: 12px; opacity: 0.85; }

    .spotlight-list { display: flex; flex-direction: column; gap: 14px; }
    .spotlight-list-item { display: flex; gap: 12px; align-items: center; }
    .spotlight-list-thumb { flex-shrink: 0; width: 90px; height: 70px; border-radius: 6px; overflow: hidden; background: #f2f2f2; }
    .spotlight-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
    .spotlight-list-item:hover .spotlight-list-thumb img { transform: scale(1.08); }
    .spotlight-list-title { font-size: 14.5px; font-weight: 600; line-height: 1.4; color: #222; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .spotlight-list-item:hover .spotlight-list-title { color: #007bff; }
    .spotlight-list-date { font-size: 11.5px; color: #999; margin-top: 4px; }
    .spotlight-loading, .spotlight-empty { grid-column: 1/-1; text-align: center; padding: 30px; color: #888;

Code Javascript

<script type='text/javascript'>
//<![CDATA[
(() => {
const SHOW = 5;
const CACHE_TTL = 10 * 60 * 1000;
const sections = document.querySelectorAll('.label-spotlight[data-label]');
if (!sections.length) return;
function getImage(post, size) {
if (post.media$thumbnail) {
return post.media$thumbnail.url
.replace(/\/s72-c\//, `/${size}/`)
.replace(/=s72-c$/, `=${size}`);
}
return `https://placehold.co/${size.replace('w','').replace('h',' x').replace('-p-k-no-nu','')}?text=No+Image`;
}
function getLink(post) {
const l = post.link.find(x => x.rel === 'alternate');
return l ? l.href : '#';
}
function getDate(post) {
return new Date(post.published.$t).toLocaleDateString(navigator.language,{year: 'numeric',month: 'long',day: 'numeric'});
}
function render(grid, labelName, posts) {
if (!posts.length) {
grid.innerHTML = '<div class="spotlight-empty">There are no posts in this label</div>';
return;
}
const [main, ...rest] = posts;
const featuredHtml = `
<a class="spotlight-featured" href="${getLink(main)}">
<img src="${getImage(main, 'w800-h600-p-k-no-nu')}" alt="${main.title.$t}" loading="lazy"/>
<div class="spotlight-featured-content">
<span class="spotlight-featured-label">${labelName}</span>
<h3 class="spotlight-featured-title">${main.title.$t}</h3>
<span class="spotlight-featured-date">${getDate(main)}</span>
</div>
</a>`;
const listHtml = `
<div class="spotlight-list">
${rest.map(post => `
<a class="spotlight-list-item" href="${getLink(post)}">
<div class="spotlight-list-thumb">
<img src="${getImage(post, 'w200-h150-p-k-no-nu')}" alt="${post.title.$t}" loading="lazy"/>
</div>
<div>
<div class="spotlight-list-title">${post.title.$t}</div>
<div class="spotlight-list-date">${getDate(post)}</div>
</div>
</a>`).join('')}
</div>`;
grid.innerHTML = featuredHtml + listHtml;
}
function loadSpotlight(section) {
const labelName = section.dataset.label;
const grid = section.querySelector('.spotlight-grid');
const cacheKey = 'spotlightCache:' + labelName;
let cached = null;
try { cached = JSON.parse(sessionStorage.getItem(cacheKey)); } catch (e) {}
if (cached && cached.posts && (Date.now() - cached.time < CACHE_TTL)) {
render(grid, labelName, cached.posts);
return;
}
fetch(window.location.origin + '/feeds/posts/default/-/' + encodeURIComponent(labelName) + '?alt=json&max-results=' + SHOW)
.then(r => r.json())
.then(data => {
const posts = data.feed.entry || [];
render(grid, labelName, posts);
try {
sessionStorage.setItem(cacheKey, JSON.stringify({ posts, time: Date.now() }));
} catch (e) {}
})
.catch(() => {
section.style.display = 'none';
});
}
sections.forEach(loadSpotlight);
})();
//]]>
</script>

3. HomePage - "3 posts" label (Add more or Delete)

3.1 Add more "3 posts" label

-> Layout -> HTML/JavaScipt -> Copy and change "name label"

Code

<script>
(() => {
if (location.pathname === '/') {
document.write(`
<section class='label-row' data-label='Asia' id='label-row-1'>
  <div class='label-row-header'>
    <h2 class='label-row-title'>Asia</h2>
    <a class='label-row-more' href='/search/label/Asia'>View More &#187;</a>
  </div>
  <div class='label-row-grid'>
    <div class='label-row-loading'>Waiting...</div>
  </div>
</section>
`);
} else {
var w = document.currentScript.closest('.widget');
if (w) w.style.display = 'none';
}
})();
</script>

3.2 Delete "3 posts" label

Code HTML

Watch 3.1

Code CSS

    .label-row-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; border-bottom: 2px solid #007bff; }
    .label-row-title { font-size: 18px; font-weight: 800; color: #111; margin: 0; position: relative; padding-left: 12px; }
    .label-row-title::before { content: &#39;&#39;; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; background: #0070ff; border-radius: 2px; }
    .label-row-more { font-size: 13px; font-weight: 600; color: #007bff; white-space: nowrap; }
    .label-row-more:hover { color: #ff0000; }

    .label-row-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

    .label-row-card { display: block; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
    .label-row-thumb { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #f2f2f2; }
    .label-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
    .label-row-card:hover .label-row-thumb img { transform: scale(1.06); }
    .label-row-body { padding: 12px; }
    .label-row-card-title { font-size: 14px; font-weight: 600; line-height: 1.4; color: #222; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .label-row-card:hover .label-row-card-title { color: #007bff; }
    .label-row-card-date { font-size: 11.5px; color: #999; }

    .label-row-loading, .label-row-empty { grid-column: 1/-1; text-align: center; padding: 30px; color: #888; }

Code Javascript

<script type='text/javascript'>
//<![CDATA[
(() => {
const SHOW = 3;
const CACHE_TTL = 10 * 60 * 1000;
const sections = document.querySelectorAll('.label-row[data-label]');
if (!sections.length) return;
function getImage(post, size) {
if (post.media$thumbnail) {
return post.media$thumbnail.url
.replace(/\/s72-c\//, `/${size}/`)
.replace(/=s72-c$/, `=${size}`);
}
return `https://placehold.co/${size.replace('w','').replace('h',' x').replace('-p-k-no-nu','')}?text=No+Image`;
}
function getLink(post) {
const l = post.link.find(x => x.rel === 'alternate');
return l ? l.href : '#';
}
function getDate(post) {
return new Date(post.published.$t).toLocaleDateString(navigator.language,{year: 'numeric',month: 'long',day: 'numeric'});
}
function render(grid, posts) {
if (!posts.length) {
grid.innerHTML = '<div class="label-row-empty">There are no posts in this label</div>';
return;
}
grid.innerHTML = posts.map(post => `
<a class="label-row-card" href="${getLink(post)}">
<div class="label-row-thumb">
<img src="${getImage(post, 'w400-h225-p-k-no-nu')}" alt="${post.title.$t}" loading="lazy"/>
</div>
<div class="label-row-body">
<h3 class="label-row-card-title">${post.title.$t}</h3>
<div class="label-row-card-date">${getDate(post)}</div>
</div>
</a>`).join('');
}
function loadRow(section) {
const labelName = section.dataset.label;
const grid = section.querySelector('.label-row-grid');
const cacheKey = 'labelRowCache:' + labelName;
let cached = null;
try { cached = JSON.parse(sessionStorage.getItem(cacheKey)); } catch (e) {}
if (cached && cached.posts && (Date.now() - cached.time < CACHE_TTL)) {
render(grid, cached.posts);
return;
}
fetch(window.location.origin + '/feeds/posts/default/-/' + encodeURIComponent(labelName) + '?alt=json&max-results=' + SHOW)
.then(r => r.json())
.then(data => {
const posts = data.feed.entry || [];
render(grid, posts);
try {
sessionStorage.setItem(cacheKey, JSON.stringify({ posts, time: Date.now() }));
} catch (e) {}
})
.catch(() => {
section.style.display = 'none';
});
}
sections.forEach(loadRow);
})();
//]]>
</script>

4. Detele "Random Posts" (Don't Delete Css if you use "Related Posts by Labels")

Note: "Random Posts" gets the 100 newest posts (If you want take more, change "const LIMIT = 100;" -> number you want

Code HTML

                  <section class='related-posts'>
                      <h2 class='related-title'>Random Posts</h2>

                      <div class='related-grid' id='random-posts'>
                          <div class='random-loading'>
                              Waiting...
                          </div>
                      </div>
                  </section>

Code Css

    .related-posts { margin: 40px 0; }
    .related-title {font-size: 16px;font-weight: 800;text-transform: uppercase;letter-spacing: 1px;color: #111;margin: 0 0 20px;display: flex;align-items: center;gap: 10px;}
    .related-title::before, .related-title::after {content: &#39;&#39;;flex: 1;height: 3px;background: #007bff;}
    .related-grid {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 18px;margin-top:2px;}
    .related-item {display: block;background: #fff;border-radius: 10px;overflow: hidden;box-shadow: 0 2px 5px rgba(0,0,0,0.05);text-decoration: none;color: inherit;transition: transform .25s ease, box-shadow .25s ease;}
    .related-item:hover {transform: translateY(-4px);box-shadow: 0 8px 20px rgba(0,0,0,0.1);}
    .related-thumb {width: 100%;aspect-ratio: 16/9;overflow: hidden;background: #f2f2f2;}
    .related-thumb img {width: 100%;height: 100%;object-fit: cover;display: block;transition: transform .35s ease;}
    .related-item:hover .related-thumb img { transform: scale(1.08); }
    .related-name {padding: 12px;font-size: 14.5px;font-weight: 600;line-height: 1.4;color: #222;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;transition: color .2s ease;}
    .related-item:hover .related-name { color: #007bff; }
    .random-loading {grid-column: 1/-1;text-align: center;padding: 30px;color: #888;}

Code Javascipt

<script>
(() =&gt; {
const LIMIT = 100; const SHOW = 3; const CACHE_KEY = &quot;randomPostsCache&quot;;
const container = document.getElementById(&quot;random-posts&quot;);
if (!container) return;
const currentUrl = location.href.split(&quot;?&quot;)[0];
function getImage(post){
if(post.media$thumbnail){
return post.media$thumbnail.url
.replace(/\/s72-c\//,&quot;/w1200-h675-p-k-no-nu/&quot;)
.replace(/=s72-c$/,&quot;=w1200-h675-p-k-no-nu&quot;);}
return &quot;https://placehold.co/1200x675?text=No+Image&quot;;}
function getLink(post){
const item = post.link.find(l =&gt; l.rel === &quot;alternate&quot;);
return item ? item.href : &quot;#&quot;;}
function shuffle(array){
for(let i=array.length-1;i&gt;0;i--){
const j=Math.floor(Math.random()*(i+1));
[array[i],array[j]]=[array[j],array[i]];}
return array;}
function render(posts){
let html=&quot;&quot;;
posts.forEach(post=&gt;{
html += `
<a class='related-item' href='${getLink(post)}'>
<div class='related-thumb'>
<img alt='${post.title.$t}' loading='lazy' src='${getImage(post)}'/></div>
<div class='related-name'>
${post.title.$t}</div>
</a>`;});container.innerHTML=html;}
function process(posts){
const filtered = posts.filter(p=&gt;{
const link=getLink(p);
return link!==currentUrl;});
shuffle(filtered);
render(filtered.slice(0,SHOW));}
const cache=sessionStorage.getItem(CACHE_KEY);
if(cache){
process(JSON.parse(cache));} else{
fetch(window.location.origin+&quot;/feeds/posts/default?alt=json&amp;max-results=&quot;+LIMIT)
.then(r=&gt;r.json())
.then(data=&gt;{
const posts=data.feed.entry||[];
sessionStorage.setItem(CACHE_KEY,JSON.stringify(posts));
process(posts);})
.catch(()=&gt;{
container.innerHTML=&quot;&quot;;});}})();
</script>

5. Delete "Related Posts by Labels" (Don't Delete Css if you use "Random Posts")

Note: "Related Posts by Labels" gets the 100 newest posts (If you want take more, change "max-results=100"" -> number you want

Code HTML

		<section class='related-posts'>
                    <h2 class='related-title'>Related Posts by Labels</h2>

                    <div class='related-grid' id='label-posts'>
                        <div class='random-loading'>
                            Waiting...
                        </div>
                    </div>
                </section>

Code CSS

Watch CSS 4. Random Posts

Code Javascipt

<script>
(() =&gt; {
const SHOW = 3;
const container = document.getElementById(&quot;label-posts&quot;);
if(!container) return;
const labels = document.querySelectorAll(&quot;.post-label-item&quot;);
if(!labels.length){
container.innerHTML=&quot;&quot;;
return;}
const labelUrl = labels[0].href;
const labelName = decodeURIComponent(
labelUrl.split(&quot;/label/&quot;)[1]);
const currentUrl = location.href.split(&quot;?&quot;)[0];
function getImage(post){
if(post.media$thumbnail){
return post.media$thumbnail.url
.replace(/\/s72-c\//,&quot;/w1200-h675-p-k-no-nu/&quot;)
.replace(/=s72-c$/,&quot;=w1200-h675-p-k-no-nu&quot;);}
return &quot;https://placehold.co/1200x675?text=No+Image&quot;;}
function getLink(post){
const item = post.link.find(
l =&gt; l.rel === &quot;alternate&quot;);
return item ? item.href : &quot;#&quot;;}
function shuffle(array){
for(let i=array.length-1;i&gt;0;i--){
const j=Math.floor(Math.random()*(i+1));
[array[i],array[j]]=[array[j],array[i]];}
return array;}
function render(posts){
let html=&quot;&quot;;
posts.forEach(post=&gt;{
html += `
<a class='related-item' href='${getLink(post)}'>
<div class='related-thumb'>
<img alt='${post.title.$t}' loading='lazy' src='${getImage(post)}'/> </div>
<div class='related-name'>
${post.title.$t} </div> </a>
`;});
container.innerHTML=html;}
fetch(
window.location.origin+
&quot;/feeds/posts/default/-/&quot;
+encodeURIComponent(labelName)
+&quot;?alt=json&amp;max-results=100&quot;)
.then(r=&gt;r.json())
.then(data=&gt;{
let posts=data.feed.entry || [];
posts = posts.filter(post=&gt;{
return getLink(post)!==currentUrl;});
shuffle(posts);
render(posts.slice(0,SHOW));
})
.catch(()=&gt;{
container.innerHTML=&quot;&quot;;});
})();
</script>

6. Delete Top Week, Top Month, Top Year

Code HTML

Delete "sidebar-tabs" and "sidebar-slider"

Code CSS 1

	.sidebar-tabs{position:relative;display:flex;background:#fff;border-bottom:1px solid #ddd;}
	.sidebar-tabs button{flex:1;padding:12px;background:none;border:0;cursor:pointer;font-weight:700;color:#666;transition:.3s;}
	.sidebar-tabs button.active{color:#2196F3;}
	.tab-indicator{position:absolute;bottom:0;left:0;width:33.3333%;height:3px;background:#2196F3;transition:transform .35s ease;}
	.sidebar-slider{overflow:hidden;width:100%;}
	.sidebar-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1);}

	.sidebar-page{flex:0 0 100%;}

Code CSS 2

  body#layout .sidebar-tabs{display:flex;}
  body#layout .sidebar-tabs button{flex:1;}

  body#layout .tab-indicator{display:none;}

  body#layout .sidebar-slider{overflow:visible;}
  body#layout .sidebar-track{display:flex !important;width:100% !important;gap:15px;}
  body#layout .sidebar-page{display: flex;min-width:0;width: 100%;}

Code Javascript

<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded",()=>{
const track=document.querySelector(".sidebar-track");
const indicator=document.querySelector(".tab-indicator");
const buttons=document.querySelectorAll(".sidebar-tabs button");
buttons.forEach(btn=>{
btn.addEventListener("click",function(){
const index=Number(this.dataset.index);
buttons.forEach(b=>b.classList.remove("active"));
this.classList.add("active");
track.style.transform=`translateX(-${index*100}%)`;
indicator.style.transform=`translateX(${index*100}%)`;
});
});
});
//]]>
</script>

Noob - Blogger Template

Note: The date format will change according to the reader’s country

Customize Templates

1. Change number Latest Posts, Labels Posts, Search Posts

2. HomePage - "5 posts" label (Add more or Delete)

2.1 Add more "5 posts" label

-> Layout -> HTML/JavaScipt -> Copy and change "name label"

2.2 Delete "5 posts" label

3. HomePage - "3 posts" label (Add more or Delete)

3.1 Add more "3 posts" label

-> Layout -> HTML/JavaScipt -> Copy and change "name label"

3.2 Delete "3 posts" label

4. Detele "Random Posts" (Don't Delete Css if you use "Related Posts by Labels")

5. Delete "Related Posts by Labels" (Don't Delete Css if you use "Random Posts")

6. Delete Top Week, Top Month, Top Year

Comments

Post a Comment

Bruh - Blogger Templates