Bruh - Blogger Templates

const POSTS_PER_PAGE = 12;

-> 12 (Change this number)

<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>
    <span class='label-row-line'></span>
    <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>

Watch 2.1

    .label-row-header {position: relative;display: flex;align-items: center;min-height: 54px;margin-bottom: 18px;padding-right: 8px;background: linear-gradient(90deg,#f2f5f9,#f8fafc);border-radius: 0 13px 13px 0;overflow: hidden;}

    .label-row-line {flex: 1;align-self: flex-end;height: 2px;margin-bottom: 0;background: linear-gradient(90deg,#1677ff,rgba(22,119,255,.03));}

    .label-row-title {position: relative;z-index: 2;display: flex;align-items: center;height: 40px;margin: 0;padding: 0 35px 0 25px;background: linear-gradient(135deg,#075ed7 0%,#318fff 100%);color: #fff;font-size: 15px;font-weight: 800;clip-path: polygon(0 0,88% 0,100% 50%,88% 100%,0 100%);}
    .label-row-header .label-row-title h2 {margin: 0;}

    .label-row-title::before {content: '';width: 6px;height: 19px;margin-right: 10px;border-radius: 5px;background: rgba(255,255,255,.95);}

    .label-row-more {position: relative;z-index: 3;display: flex;align-items: center;height: 32px;margin-right: 5px;padding: 0 13px;color: #627084;font-size: 11.5px;font-weight: 700;text-decoration: none;border-radius: 8px;transition: color .2s ease,background .2s ease,transform .2s ease;}

    .label-row-more:hover {color: #1677ff;background: rgba(255,255,255,.8);transform: translateX(2px);}

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

    .label-row-card { position:relative; display:block; border-radius:14px; overflow:hidden; aspect-ratio:16/10; background:#e9edf3; box-shadow:0 4px 14px rgba(20,30,50,.08); transition:transform .3s ease, box-shadow .3s ease; }
    .label-row-card:hover { transform:translateY(-5px); box-shadow:0 14px 30px rgba(20,30,50,.16); }
    .label-row-thumb { position:absolute; inset:0; }
    .label-row-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
    .label-row-card:hover .label-row-thumb img { transform:scale(1.08); }
    .label-row-body { position:absolute; left:0; right:0; bottom:0; padding:30px 14px 12px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); }
    .label-row-card-title { font-size: 13.5px; font-weight: 700; line-height: 1.4; color: #fff; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .label-row-card-date { font-size: 11px; color: rgba(255,255,255,.75); }

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


-------------------------------------------------------------------------
    
    .label-row-grid {gap: 8px;}
    .label-row-body {padding: 22px 8px 8px;}
    .label-row-card-title {font-size: 12px;}
    .label-row-card-date {font-size: 10px;}
    .label-row-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .label-row-card {aspect-ratio:16/11;}

<script type='text/javascript'>
//<![CDATA[
(() => {
const SHOW = 6;
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>

                  <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>

    .related-posts { margin: 40px 0; }
    .related-title {font-size: 19px;font-weight: 800;color: #111;margin: 0 0 20px;display: flex;align-items: center;gap: 5px;}
    .related-title::before {content: '';flex: 1;height: 2px;background: linear-gradient(90deg, #d9e6f5 0%, #007bff 100%);}
    .related-title::after {content: '';flex: 1;height: 2px;background: linear-gradient(90deg, #007bff 0%, #d9e6f5 100%);}
    .related-grid {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 10px;margin-top:2px;}
    .related-item {position: relative;display: block;border-radius: 10px;overflow: hidden;aspect-ratio: 16/9;background: #f2f2f2;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 {position: absolute;inset: 0;}
    .related-thumb img {width: 100%;height: 100%;object-fit: cover;display: block;transition: transform .35s ease, filter .3s ease;}
    .related-item:hover .related-thumb img {transform: scale(1.08);filter: brightness(0.75);}
    .related-name {position: absolute;left: 0;right: 0;bottom: 0;padding: 10px 8px 5px;background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.9) 100%);font-size: 13.5px;font-weight: 700;line-height: 1.4;color: #fff;text-shadow: 0 1px 3px rgba(0,0,0,.8);display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;transition: background .3s ease;}
    .related-item:hover .related-name {background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 35%, rgba(0,0,0,.95) 100%);}
    .related-item:hover .related-name { color: #007bff; }
    .random-loading {grid-column: 1/-1;text-align: center;padding: 30px;color: #888;}

<script>
(() =&gt; {
const LIMIT = 100; const SHOW = 4; 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>

		<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>

Watch CSS - 3. Detele "Random Posts"

<script>
(() =&gt; {
const SHOW = 4;
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>

    .sidebar-tabs{position:relative;display:flex;background:#f3f5f9;border-radius:12px;border:1px solid #e8edf3;overflow:hidden;}
    .sidebar-tabs button{flex:1;position:relative;z-index:1;padding:12px 8px;background:none;border:0;cursor:pointer;font-size:13px;font-weight:700;color:#8a93a3;transition:color .3s ease;}
    .sidebar-tabs button.active{color:#fff;}
    .tab-indicator{position:absolute;top:0;left:0;width:33.3333%;height:100%;background:linear-gradient(135deg,#007bff,#3b9dff);box-shadow:0 4px 10px rgba(0,123,255,.25);transition:transform .35s cubic-bezier(.4,0,.2,1);z-index:0;}
    .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%;}

  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%;}

<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>

    .label-row-card:hover .label-row-thumb img { transform:scale(1.08); }
--> This code Zoom Image

    .label-row-card:hover { transform:translateY(-5px); box-shadow:0 14px 30px rgba(20,30,50,.16); }
--> This code Lift Effect

    .post-card:hover .post-thumbnail img{transform:scale(1.05);}
--> This code Zoom Image

    .post-card:hover{transform:translateY(-5px);box-shadow:0 12px 26px rgba(0,0,0,.09);}
--> This code Lift Effect