Here in this Post i Want to tell you how to display post from a specific label on the Blogger homepage only. This is the best Blogger grid post design. You can show this design under the menu on your Blogger. This is the best alternate post for Slider.
An attractive and unique website is an essential attraction to endear visitors to your site and make them permanent users. One of the ways to make your site unique and exciting is to install distinctive topics in an attractive grid format with large images so our website is diverse and aesthetic.
How to Add Post From a Specific Label in Blogger
Agar Ap Blogger Ke Home Page Py specific Lable se Post Show Karna Chahty Hy, To Yeh Script Ap Keliy Best Hy. Yeh ak Bhut He Beautiful Post Design hy. Ap Recent ya Lable Post Home Page py Show Kar Sakty Hy.
How to Apply This CSS Code on Blogger
Goto Blogger Theme Edit Html> Press CTR+F and Search </b:skin> See the picture for more information.
Now Add This CSS Code Above ]]</b:skin>
@font-face{font-family:'slidefont';src:url("https://cdn.jsdelivr.net/gh/hamianemohssine/7amian@master/font-icons/Five-News-Ticker.woff2")}
.hm-container,.hm-slide,.hm-slide-item{height:auto;width:100%}
.hm-container{display:flex;flex-direction:row;justify-content:center;margin:0 auto;padding:15px 10px;box-sizing:border-box}
.hm-container *{box-sizing:border-box;transition:1s}
.hm-slide-info,.hm-slide-photo{transition:.5s;display:flex;height:100%}
.hm-slide{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;text-align:right;direction:rtl;max-width:1100px}
.hm-slide-item{position:relative;padding-bottom:68%;background-color:#f9f9f9;overflow:hidden}
.hm-slide-item:first-child{grid-column:2/4;grid-row:1/3}
.hm-slide-item>a{position:absolute;top:0;right:0;width:100%;height:100%}
.hm-slide-photo{width:100%;background-size:cover;background-repeat:round;opacity:0}
.hm-slide-photo.hm-op{opacity:1}
.hm-slide-label{position:absolute;top:10px;right:10px;background-color:#00c;color:#fff;padding:3px 10px;border-radius:5px;font-size:12px;box-shadow:0 1px 2px #000}
.hm-slide-info{position:absolute;top:0;right:0;width:100%;background:linear-gradient(0deg,#000,transparent,transparent);flex-direction:column;justify-content:flex-end;padding:5px 10px;gap:5px}
.hm-slide-item:hover .hm-slide-info{padding-bottom:15px}
.hm-slide-date{color:#f7f7f7;text-shadow:1px 1px 3px #000;font-size:12px;display:flex}
.hm-slide-date:before{content:"\f017";margin-left:4px;font-family:"slidefont"}
.hm-slide-title{display:-webkit-box;color:#fff;text-shadow:1px 1px 5px #000;margin:0 0 5px;padding:0;font-size:1rem;line-height:1.5rem;white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:3rem;text-overflow:ellipsis}
.hm-slide-item:first-child .hm-slide-title{font-size:1.3rem;line-height:2rem;max-height:4rem}
.hm-loadingPost:after{content:"";position:absolute;top:calc(50% - 20px);right:calc(50% - 20px);width:40px;height:40px;border:4px solid #aaa;border-bottom-color:transparent;border-right-color:transparent;animation:.5s linear infinite hmslideloader;border-radius:100%}
@keyframes hmslideloader{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (max-width:900px){.hm-slide{grid-template-columns:repeat(3,1fr)}.hm-slide-item:first-child{grid-column:1/3;grid-row:1/3}}
@media (max-width:600px){.hm-slide{grid-template-columns:repeat(2,1fr)}.hm-slide-item:first-child{grid-column:1/3;grid-row:1/3}.hm-slide-date,.hm-slide-label{font-size:12px}.hm-slide-title{font-size:.8rem;line-height:1.3rem;max-height:2.6rem}}
@media (max-width:350px){.hm-slide{grid-template-columns:repeat(1,1fr)}.hm-slide-item:first-child{grid-column:unset;grid-row:unset}.hm-slide-item:first-child .hm-slide-title{font-size:.8rem;line-height:1.3rem;max-height:2.6rem}}
How to Apply JavaScript For Displaying Post From a Specific Label On Blogger
Now search </body> by pressing CTR+F. See the picture for more details.
Add This JavaScript Above </body>
<script type='text/javascript'>
//<![CDATA[
document.querySelectorAll(".hm-slide").forEach(e => {
var a = e.dataset.label,
s = e.dataset.results,
t = "<div class='hm-slide-item hm-loadingPost'></div>";
e.innerHTML = t.repeat(s);
var l = ["يناير", "فبراير", "مارس", "أبريل", "ماي", "يونيو", "يوليوز", "غشت", "شتنبر", "أكتوبر", "نونبر", "دجنبر"],
r = "/feeds/posts/summary?alt=json&start-index=1&max-results=" + s;
function i(e) {e.querySelectorAll(".hm-slide-photo").forEach(e => {var a = e.dataset.image,s = Math.round(e.getBoundingClientRect().width) + 50,t = a.replace(/...(?<=\/[swh]72).*(?=\/)|...(?<=\=[swh]72).*$/g, "s" + s + "-rw"),l = new Image;l.onload = () => {e.style.backgroundImage = "url('" + l.src + "')", e.classList.add("hm-op")}, l.src = t})}
function n() {let e = "#";for (let a = 0; a < 3; a++) e += ("0" + Math.floor(400 * Math.random() / 2).toString(16)).slice(-2);return e}
"recent" !== a && (r = r.replace("summary?", "summary/-/" + a + "?")), fetch(r).then(e => e.json()).then(a => {
var s = a.feed.entry,
t = s.length,
r = "";
for (let o = 0; o < t; o++) {var d, h, m, A = "موضوع",c = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",u = s[o].link;for (let p = 0; p < u.length; p++)if ("alternate" === u[p].rel) {d = u[p].title, h = u[p].href;break} s[o].hasOwnProperty("category") && (A = s[o].category[0].term), s[o].hasOwnProperty("media$thumbnail") && (c = s[o].media$thumbnail.url);var g = s[o].published.$t.substring(0, 10).split("-");m = g[2] + " " + l[parseInt(g[1]) - 1] + " " + g[0], r += "<div class='hm-slide-item'><a href='" + h + "' title='" + d + "'><span class='hm-slide-photo' data-image='" + c + "'></span><span class='hm-slide-label' style='background-color:" + n() + "'>" + A + "</span><div class='hm-slide-info'><span class='hm-slide-date'>" + m + "</span><h3 class='hm-slide-title'>" + d + "</h3></div></a></div>"}
e.innerHTML = r, i(e)
})
});
//]]>
</script>How to Implement HTML Code to Show Post Slider On Home Page
You can add this code under the menu and Where You Want to Show Post. You can also add this Code in Layout Section to. Just go to Layout and Add New HTML Widget, Past Code and Save The Setting.
<b:if cond="data:view.isHomepage">
<div class='hm-container'>
<div class="hm-slide" style="max-width: 1100px;" data-label="recent" data-results="9">
</div>
</div>
</b:if>You can change Recent with your specific Label or Post No. 9 or 5.