Demo Download



Customize Templates

Add More Category

<div class='label-title'>
  <h3>Posts related to Facebook:</h3>
  <div class='label-posts-container facebook-posts'/>
</div>
  
<div class='label-title'>
<h3>Posts related to News:</h3>
  <div class='label-posts-container news-posts'/>
</div>

<div class='label-title'>
<h3>Posts related to Food:</h3>
  <div class='label-posts-container food-posts'/>
</div>

<script>
  const FacebookPosts = document.querySelector(&#39;.facebook-posts&#39;);
  const NewsPosts = document.querySelector(&#39;.news-posts&#39;);
  const FoodPosts = document.querySelector(&#39;.food-posts&#39;);

  const facebookLoadingImage = document.createElement(&#39;img&#39;);
  facebookLoadingImage.src = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-mda1blKQ2CPj4uOfLALZVNtOHohk0c9HAj7e7tc13WG5A5Nmc4pEeYD2NCXNX4gAHjvlJQOuU-Evi8ROb56A0iCb2alK0sXkMwzWhOGEQdr0iGNXp-_x4zb5Jc2_XodnEUeqvJ6QfEeIXU6JRE17YBH7vPGZyIlkBwYWtXseeInHz7yH2avHvosBjFDP/s200/loading-gif.gif&#39;;
  facebookLoadingImage.classList.add(&#39;loading-image&#39;);
  
  const newsLoadingImage = document.createElement(&#39;img&#39;);
    newsLoadingImage.src = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-mda1blKQ2CPj4uOfLALZVNtOHohk0c9HAj7e7tc13WG5A5Nmc4pEeYD2NCXNX4gAHjvlJQOuU-Evi8ROb56A0iCb2alK0sXkMwzWhOGEQdr0iGNXp-_x4zb5Jc2_XodnEUeqvJ6QfEeIXU6JRE17YBH7vPGZyIlkBwYWtXseeInHz7yH2avHvosBjFDP/s200/loading-gif.gif&#39;; 
    newsLoadingImage.classList.add(&#39;loading-image&#39;);

const foodLoadingImage = document.createElement(&#39;img&#39;);
    foodLoadingImage.src = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-mda1blKQ2CPj4uOfLALZVNtOHohk0c9HAj7e7tc13WG5A5Nmc4pEeYD2NCXNX4gAHjvlJQOuU-Evi8ROb56A0iCb2alK0sXkMwzWhOGEQdr0iGNXp-_x4zb5Jc2_XodnEUeqvJ6QfEeIXU6JRE17YBH7vPGZyIlkBwYWtXseeInHz7yH2avHvosBjFDP/s200/loading-gif.gif&#39;; 
    foodLoadingImage.classList.add(&#39;loading-image&#39;);

  FacebookPosts.appendChild(facebookLoadingImage);
  NewsPosts.appendChild(newsLoadingImage);
  FoodPosts.appendChild(foodLoadingImage);
  
  const populateLabelPosts = (data, container) =&gt; {
    data.forEach((post) =&gt; {
      const labelPost = document.createElement(&#39;div&#39;);
      labelPost.classList.add(&#39;label-post&#39;);

      const thumbContainer = document.createElement(&#39;a&#39;);
      thumbContainer.href = post.link[post.link.length - 1].href;
      thumbContainer.classList.add(&#39;thumb-container&#39;);

      const thumbnail = document.createElement(&#39;img&#39;);
      thumbnail.src = post.media$thumbnail.url.replace(&#39;/s72&#39;, &#39;/s300&#39;);

      thumbContainer.appendChild(thumbnail);
      labelPost.appendChild(thumbContainer);

      const textContent = document.createElement(&#39;div&#39;);
      textContent.classList.add(&#39;text-content&#39;);

      const postTitleContainer = document.createElement(&#39;a&#39;);
      postTitleContainer.href = post.link[post.link.length - 1].href;
      postTitleContainer.classList.add(&#39;post-title-container&#39;);

      const title = document.createElement(&#39;h3&#39;);
      title.classList.add(&#39;post-title&#39;);
      title.innerHTML = post.title.$t;

      postTitleContainer.appendChild(title);
      textContent.appendChild(postTitleContainer);

      labelPost.appendChild(textContent);

      container.appendChild(labelPost);
    });
  };

  const displayFacebookLabelPosts = (posts) =&gt; {
    populateLabelPosts(posts.feed.entry, FacebookPosts);
    FacebookPosts.removeChild(facebookLoadingImage);
  };
  
  const displayNewsLabelPosts = (posts) =&gt; {
        populateLabelPosts(posts.feed.entry, NewsPosts);
        NewsPosts.removeChild(newsLoadingImage);
    };

  const displayFoodLabelPosts = (posts) =&gt; {
        populateLabelPosts(posts.feed.entry, FoodPosts);
        FoodPosts.removeChild(foodLoadingImage);
    };
</script>

<script>
    const scriptTag1 = document.createElement(&#39;script&#39;);
    scriptTag1.src = &#39;/feeds/posts/summary/-/Facebook?max-results=3&amp;alt=json-in-script&amp;callback=displayFacebookLabelPosts&#39;;
    document.body.appendChild(scriptTag1);

    const scriptTag2 = document.createElement(&#39;script&#39;);
    scriptTag2.src = &#39;/feeds/posts/summary/-/News?max-results=3&amp;alt=json-in-script&amp;callback=displayNewsLabelPosts&#39;;
    document.body.appendChild(scriptTag2);

   const scriptTag3 = document.createElement(&#39;script&#39;);
    scriptTag3.src = &#39;/feeds/posts/summary/-/Food?max-results=3&amp;alt=json-in-script&amp;callback=displayFoodLabelPosts&#39;;
    document.body.appendChild(scriptTag3);
</script>

Delete About Author

    HTLM:
<div class='author_info'>
                  <h3>About Author</h3>
                  <div class='author_photo'>
                    <img expr:alt='data:post.author' expr:src='data:post.authorPhoto.url'/>
                  </div>
                  <b><data:post.author/></b>
                  <p>Hi, I&#39;m Kienn. Every templates is free. So you can delete everything that you want.</p>
                </div>

    CSS:
.author_info{
padding:5px;
border:1px solid #e0e0e0;
margin-bottom:15px;
margin-top:15px;
border-radius:12px;
}

.author-info h3{
margin-bottom:10px;
padding-bottom:7px;
border-bottom:2px solid #e6e6ef;
color:#203656;
font-weight:400;
font-size:25px;
}

.author_info b{
color:#203656;
}

.author_photo{
min-height:70px;
min-width:70px;
float:left;
margin:0 0 0 10px;
}

.author_photo img{
padding:3px;
border:1px solid #ddd;
margin-right:10px;
height:70px;
width:70px;
border-radius:100px;
}

 

Delete Random Posts


Code: 

<style>
                  .label-title {
                    background: #111;
                    color: #fff;
                    text-align: center;
                  }

                  .label-title h3 {
                    color: #fff;
                  }

                  .label-posts-container {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 19.5px;
                    background: #fff;
                    padding: 0px;
                    margin: 0 auto;
                    margin-bottom: 20px;
                    align-items: flex-start;
                    width: 100%;
                  }

                  .label-posts-container .label-post {
                    background: #fff;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    box-shadow: 0 4px 40px -8px rgba(0, 0, 0, 0.3);
                    width: calc(50% - 10px);
                    position: relative;
                  }

                  .label-posts-container .thumb-container {
                    width: 100%;
                    position: relative;
                    overflow: hidden;
                  }

                  .label-posts-container .label-post img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                    filter: brightness(100%);
                  }

                  .label-posts-container .post-title-container {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    background-color: rgba(0, 0, 0, 0.7);
                    padding: 8px;
                    text-align: center;
                  }

                  .label-posts-container .post-title {
                    margin: 0;
                    font-size: 14px;
                    color: #fff;
                  display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                  }

                  .loading-image {
                    width: 50px;
                    height: 50px;
                    animation: spin 1s linear infinite;
                  }

                  @keyframes spin {
                    0% {
                      transform: rotate(0deg);
                    }

                    100% {
                      transform: rotate(360deg);
                    }
                  }
    
                  @media (max-width: 640px) {

                  .label-posts-container .label-post {
                    width: 100%;
                  }

                  .label-posts-container .post-title {
                    font-size: 16px;
                  }
                }

                </style>

                <div class='label-title'>
                  <h3>Random Posts</h3>
                  <div class='label-posts-container random-posts'/>
                </div>

                <script>
                  const RandomPosts = document.querySelector(&#39;.random-posts&#39;);

                  const randomLoadingImage = document.createElement(&#39;img&#39;);
                  randomLoadingImage.src = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-mda1blKQ2CPj4uOfLALZVNtOHohk0c9HAj7e7tc13WG5A5Nmc4pEeYD2NCXNX4gAHjvlJQOuU-Evi8ROb56A0iCb2alK0sXkMwzWhOGEQdr0iGNXp-_x4zb5Jc2_XodnEUeqvJ6QfEeIXU6JRE17YBH7vPGZyIlkBwYWtXseeInHz7yH2avHvosBjFDP/s200/loading-gif.gif&#39;;
                  randomLoadingImage.classList.add(&#39;loading-image&#39;);

                  RandomPosts.appendChild(randomLoadingImage);

                  const populateLabelPosts = (data, container) =&gt; {
                    const shuffledPosts = shuffleArray(data);
                    const postsToDisplay = shuffledPosts.slice(0, 4);

                    postsToDisplay.forEach((post) =&gt; {
                      const labelPost = document.createElement(&#39;div&#39;);
                      labelPost.classList.add(&#39;label-post&#39;);

                      const thumbContainer = document.createElement(&#39;a&#39;);
                      thumbContainer.href = post.link[post.link.length - 1].href;
                      thumbContainer.classList.add(&#39;thumb-container&#39;);

                      const thumbnail = document.createElement(&#39;img&#39;);
                      thumbnail.src = post.media$thumbnail.url.replace(&#39;/s72&#39;, &#39;/s300&#39;);

                      thumbContainer.appendChild(thumbnail);
                      labelPost.appendChild(thumbContainer);

                      const postTitleContainer = document.createElement(&#39;div&#39;);
                      postTitleContainer.classList.add(&#39;post-title-container&#39;);

                      const title = document.createElement(&#39;h3&#39;);
                      title.classList.add(&#39;post-title&#39;);
                      title.innerHTML = post.title.$t;

                      postTitleContainer.appendChild(title);
                      labelPost.appendChild(postTitleContainer);

                      container.appendChild(labelPost);
                    });
                  };

                  const displayRandomLabelPosts = (posts) =&gt; {
                    populateLabelPosts(posts.feed.entry, RandomPosts);
                    RandomPosts.removeChild(randomLoadingImage);
                  };

                  const shuffleArray = (array) =&gt; {
                    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;
                  };
                </script>

                <script>
                  const scriptTag1 = document.createElement(&#39;script&#39;);
                  scriptTag1.src = &#39;/feeds/posts/default?max-results=100000&amp;alt=json-in-script&amp;callback=displayRandomLabelPosts&#39;;
                  document.body.appendChild(scriptTag1);
                </script>

Delete CSS Contact


.footer-content .form input[type="text"], .footer-content .form textarea{
background: rgba(255,255,255,0.075);
padding:10px 15px;
color: #aaa;
border: 3px solid rgba(0,0,0,0.1);
font-size: 14px;
margin-bottom: 16px;
border-radius: 5px;
transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
transition-delay: 0.2s;
width: 100%;
outline:none;
}

 

.footer-content .contact-form-button{
background-color:#4d90fe;
color:#fff;
border:none;
width:100%;
}

 

Delete CSS Follow Us footer

.footer-content .fa{
float:left;
margin-left:7px;
font: normal normal normal 14px/1 FontAwesome;
background-color:#3e3e3e;
color:#fff;
padding:9px;
border-radius:5px;
}

 

Delete CSS Follow Us sidebar


.sidebar-wrapper .fa{
padding:10px;
}

.sidebar-wrapper .fa-facebook{
background-color:#264c9d;
}

.sidebar-wrapper .fa-youtube{
background-color:#FF0000;
}

.sidebar-wrapper .fa-twitter{
background-color:#1DA1F2;
}

.sidebar-wrapper .fa-instagram{
background-color:#E4405F;
}.sidebar-wrapper .fa{
padding:10px;
}

.sidebar-wrapper .fa-facebook{
background-color:#264c9d;
}

.sidebar-wrapper .fa-youtube{
background-color:#FF0000;
}

.sidebar-wrapper .fa-twitter{
background-color:#1DA1F2;
}

.sidebar-wrapper .fa-instagram{
background-color:#E4405F;
}

 

Change from 12 posts to 18 or any you want

var postperpage=12;     to      var postperpage=18;

Delelte page count

    HTML:
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <script type='text/javascript'>
      /*<![CDATA[*/
        var perPage=12;
        var numPages=3;
        var firstText ='First';
        var lastText ='Last';
var prevText ='« Previous';
        var nextText ='Next »';
        var urlactivepage=location.href;
        var home_page="/";

    if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages / 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}
    pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo / perPage)+1;if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}
    if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}
    if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}
    if(pageStart>2){html+=' ... '}
    for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}
    if(pageEnd<lastPageNo-1){html+='...'}
    if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}
    var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}
    if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}
    var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}
    if(pageArea&&pageArea.length>0){html=''}
    if(blogPager){blogPager.innerHTML=html}}
    function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}
    function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}
    if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
    document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}
    if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
    document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}
    function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}
    function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}
    function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}
    location.href=pAddress}

      /*]]>*/
    </script>
    </b:if>
    </b:if>

    CSS:
#blog-pager{
clear:both;
margin:30px auto;
text-align:center;
padding: 7px;
}

.blog-pager {
background: none;
}

.displaypageNum a,.showpage a,.pagecurrent{
display:inline-block;
float:center;
margin-right:6px;
padding:0 12px;
border:1px solid #010101;
text-transform:uppercase;
line-height:32px;
font-weight:700;
color:#010101;
border-radius: 100px;
}

.displaypageNum a:hover,.showpage a:hover, .pagecurrent{
background:#E5E5E5;
text-decoration:none;
color: #222;
}

#blog-pager .pagecurrent{
font-weight:bold;
color: #fff;
background:#111;
}

.showpageOf{
display:none!important
}

#blog-pager .pages{
border:none;
}

 

Change number of labels (12 to 18 or any you want)
    <a expr:href='data:label.url + &quot;?&amp;max-results=12&quot;' rel='tag'>

    <a expr:href='data:label.url + &quot;?&amp;max-results=18&quot;' rel='tag'>