Kien Templates: Grid Blogger Template

Customize Templates

1. Delete About Author

Code 1

<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. This template is free. No ads, no redirect link. So you can delete everything that you want. Come to my website &quot;kientemplates.com&quot; for more templates. Every templates is free.</p>
                </div>

Code 2

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

.author_info h3{
margin-bottom:10px;
padding-bottom:7px;
border-bottom:1px 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;
}

2. Delete Random Posts

Code

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

                  .label-title .til p {
                    text-align: center;
                    font-weight: 700;
                    position: relative;
                    margin-bottom: 20px;
                    font-size:20px;
                  }
                    
                    .label-title .til p::after{
					  content: &#39;&#39;;
                      width: 100px;
                      height: 2px;
                      background: #ccc;
                      display: flex;
                      justify-content: center;
                      align-items: center;
					  margin:0 auto;
                    }

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

                  .label-posts-container .label-post {
                    background: #fff;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: calc(32.65% - 0px);
                    position: relative;
					height:100%;
                  }

                  .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-title {
                      background: #fff;
                      text-align: center;
                    }

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

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

                  }
  				</style>
               
            <div class='label-title'>
              <div class='til'><p>YOU MAY ALSO LIKE</p></div>
                <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/AVvXsEgq28OUI_N8DBoog34xc8FnidI9qIiWvgo-ZSeH5GgtAji9bQNbSVdpMy8OmA1gCi4wpmYzFEKspfPpTJneyNINIAOPWjirRZss-LyTei0RsY39aKuO4OjObzAeUbUAVrFaPjNGyETsRnO1CoilyXCkV160U2DZiFf3WuXYj5yAhH2XXeiD4qfgvCSlw42P/s200/200.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, 3);

                  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 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 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=100&amp;alt=json-in-script&amp;callback=displayRandomLabelPosts&#39;;
                document.body.appendChild(scriptTag1);
              </script>

3. Delete CSS Follow Us footer

Code

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

4. Change from 12 posts to 18 or any you want

Code

var postperpage=12;     to      var postperpage=18;

5. Delete page count

Code 1

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

Code 2

#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:#fff;
border-radius: 10px;
background: #111;
}

.displaypageNum a:hover,.showpage a:hover, .pagecurrent{
background:#fff;
text-decoration:none;
color: #222;
transition: all 400ms ease;
}

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

.showpageOf{
display:none!important
}

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

6. Change number of labels (12 to 18 or any you want)

Code

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

7. Add more Category Menu

Layout -> Edit menu-area

7.1 Add more Category Menu in PC

Code

<li class="has-submenu">
              <a class="menu-title" href="#">Category</a>
              <div class="submenu-container">
                <div class="submenu grid">
                  <a href="/search/label/Food?&max-results=12">
                    <div class="submenu-column">
                      <div class="icon">
                       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW8otrt4mlihSs6FTVWPnIZKVEIM30EB26wGsvM4bjfm6BaW3PwWlEvsdjaorf2oGbxROy8-xP8ARDEB8ftx5kp_Q60YSFHzab05IORFMndP0vhDrX-gwuctWQWfFKqjztasphRNvJEwaizXmEkbf2SCoB8aEww0xBSt4Br3N_AJnFtJELncFNMA64kx8/s512/food.png"/>
</div>
                      <h3>Food</h3>
                    </div>
                  </a>
                  <a href="/search/label/Youtube?&max-results=12">
                    <div class="submenu-column">
                      <div class="icon">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD_c25g1i6Kb42riIny9iixsaUbnwIlJAnwf0cPvFK5S0kve8gA8jLi3vx2P7kr0hZOcdVRsT1xstdxpBY3CLqnM690qGALoObxDvl1YwQG-rAGcw1Blb4VWgHzzz72fX80FHzcmp0xCA8Z0eeA3x5NHIcEoMhPXEE-juy-TJskxBpKXGmi_LPumMh3qc/s512/Youtube.png"/>
</div>
                      <h3>Youtube</h3>
                    </div>
                  </a>

                  <a href="/search/label/Facebook?&max-results=12">
                    <div class="submenu-column">
                      <div class="icon">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqkuGzxGCVMihpjjut9uf4wQyMnk04Q-U7qP-PTRNJUt8POlLjr7l3n7xEJTLa6vRcTKMjDhTDvcaGavJ3HwI1n3WlrKvpY4jyCgz6_dyL6okSvfryksbieGKCIFHITm-yv6AwiYNvQh4e-2aEOMtNjG-7yybDrwxoGMdAOahGZ-sC2ynFCuGLTV2Vv0/s512/Facebook.png"/>
</div>
                      <h3>Facebook</h3>
                    </div>
                  </a>

                  <a href="/search/label/Fun?&max-results=12">
                    <div class="submenu-column">
                      <div class="icon">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNRved7zUDIlkVh8v5rCZonoMehEYaa0pdu5DgFqxmrgjST6KgS1g2DZw56qY3KaPkNNynmda6Kh3lbAW6CMIx1S-gwhS4VX8OrL4go9XsBZy0hvNgA-E3KPUecfyMlyR5LmhsI36fsItNvO0XA4I4eMZKqM4e6VCrrErFLN53ZGBBPgOZBoEulOR6f4o/s1000/Fun.png"/>
</div>
                      <h3>Fun</h3>
                    </div>
                  </a>

                  <a href="/search/label/News?&max-results=12">
                    <div class="submenu-column">
                      <div class="icon">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjsEcCc2-RR2SP31TncRjbqHquY92Ukf53cX6vyEcjxpjt73wWN4xtCG4gcMLBpdNWe1w4t7OjI8BUW-haWs76FqNUddxyvHLcIeyiNpGNN4Km8zGPhSIoKlmZDC5xjUndUJttxBbqNMGlFmqq_yqDDkTse1X7KvZdEdQQQejdLiP6ULYgUUnCIB0Uffc/s512/News.png"/>
</div>
                      <h3>News</h3>
                    </div>
                  </a>

                  <a href="/search/label/Twitter?&max-results=12">
                    <div class="submenu-column">
                      <div class="icon">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKZq9i-lfkKyIRdixxGfcZvpw3cTF9hqCIo687zvrymwy7Q9p09nfF3dXMQaouzk5NsjoAm_iQt2KnBvrHOu8pqJYdtwas5O-UGeiMq6cInWnhaNB5s4hA4EgfE98zkCizt9zjH7MieW-ryK0C9PsIDUvyraicfPRSUzdukUbmOoCKQPsTvQ_FTI94pfU/s360/Twitter.png"/>
</div>
                      <h3>Twitter</h3>
                    </div>
                  </a>
                </div>
              </div>
            </li>

7.2. Add more Category Menu in Mobile

Code

<li class="has-submenu">
              <a class="menu-title" href="#">Category</a>
              <div class="submenu-container">
                <div class="submenu grid">
                  <a href="#">
                    <div class="submenu-column">
                      <div class="icon">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW8otrt4mlihSs6FTVWPnIZKVEIM30EB26wGsvM4bjfm6BaW3PwWlEvsdjaorf2oGbxROy8-xP8ARDEB8ftx5kp_Q60YSFHzab05IORFMndP0vhDrX-gwuctWQWfFKqjztasphRNvJEwaizXmEkbf2SCoB8aEww0xBSt4Br3N_AJnFtJELncFNMA64kx8/s512/food.png"/>
</div>
                      <h3>Food</h3>
                    </div>
                  </a>
                  <a href="#">
                    <div class="submenu-column">
                      <div class="icon">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD_c25g1i6Kb42riIny9iixsaUbnwIlJAnwf0cPvFK5S0kve8gA8jLi3vx2P7kr0hZOcdVRsT1xstdxpBY3CLqnM690qGALoObxDvl1YwQG-rAGcw1Blb4VWgHzzz72fX80FHzcmp0xCA8Z0eeA3x5NHIcEoMhPXEE-juy-TJskxBpKXGmi_LPumMh3qc/s512/Youtube.png"/>
</div>
                      <h3>Youtube</h3>
                    </div>
                  </a>

                  <a href="#">
                    <div class="submenu-column">
                      <div class="icon">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqkuGzxGCVMihpjjut9uf4wQyMnk04Q-U7qP-PTRNJUt8POlLjr7l3n7xEJTLa6vRcTKMjDhTDvcaGavJ3HwI1n3WlrKvpY4jyCgz6_dyL6okSvfryksbieGKCIFHITm-yv6AwiYNvQh4e-2aEOMtNjG-7yybDrwxoGMdAOahGZ-sC2ynFCuGLTV2Vv0/s512/Facebook.png"/>
</div>
                      <h3>Facebook</h3>
                    </div>
                  </a>

                  <a href="#">
                    <div class="submenu-column">
                      <div class="icon">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNRved7zUDIlkVh8v5rCZonoMehEYaa0pdu5DgFqxmrgjST6KgS1g2DZw56qY3KaPkNNynmda6Kh3lbAW6CMIx1S-gwhS4VX8OrL4go9XsBZy0hvNgA-E3KPUecfyMlyR5LmhsI36fsItNvO0XA4I4eMZKqM4e6VCrrErFLN53ZGBBPgOZBoEulOR6f4o/s1000/Fun.png"/>
</div>
                      <h3>Fun</h3>
                    </div>
                  </a>

                  <a href="#">
                    <div class="submenu-column">
                      <div class="icon">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjsEcCc2-RR2SP31TncRjbqHquY92Ukf53cX6vyEcjxpjt73wWN4xtCG4gcMLBpdNWe1w4t7OjI8BUW-haWs76FqNUddxyvHLcIeyiNpGNN4Km8zGPhSIoKlmZDC5xjUndUJttxBbqNMGlFmqq_yqDDkTse1X7KvZdEdQQQejdLiP6ULYgUUnCIB0Uffc/s512/News.png"/>
</div>
                      <h3>News</h3>
                    </div>
                  </a>

                  <a href="/search/label/Twitter?&max-results=12">
                    <div class="submenu-column">
                      <div class="icon">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKZq9i-lfkKyIRdixxGfcZvpw3cTF9hqCIo687zvrymwy7Q9p09nfF3dXMQaouzk5NsjoAm_iQt2KnBvrHOu8pqJYdtwas5O-UGeiMq6cInWnhaNB5s4hA4EgfE98zkCizt9zjH7MieW-ryK0C9PsIDUvyraicfPRSUzdukUbmOoCKQPsTvQ_FTI94pfU/s360/Twitter.png"/>
</div>
                      <h3>Twitter</h3>
                    </div>
                  </a>
                </div>
              </div>
            </li>

7.3 Add more Icon Category in PC and Mobile

Code

<a class="menu-title" href="#">Category</a>
            <div class="submenu-container">
               <div class="submenu grid">

                  <a href="/search/label/Food?&max-results=12">
                     <div class="submenu-column">
                        <div class="icon">
                           <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW8otrt4mlihSs6FTVWPnIZKVEIM30EB26wGsvM4bjfm6BaW3PwWlEvsdjaorf2oGbxROy8-xP8ARDEB8ftx5kp_Q60YSFHzab05IORFMndP0vhDrX-gwuctWQWfFKqjztasphRNvJEwaizXmEkbf2SCoB8aEww0xBSt4Br3N_AJnFtJELncFNMA64kx8/s512/food.png"/>
                        </div>
                     <h3>Food</h3>
                     </div>
                  </a>

8. Add more Product Menu

Layout -> Edit menu-area

8.1 Add more Product Menu in PC

Code

<li class="has-submenu">
              <a class="menu-title" href="#">Products</a>
              <div class="submenu-container">
                <div class="submenu">
                  <div class="col-3">
                    <div class="submenu-column">
                      <h4>Laptop</h4>
                      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2pL0GGoln-MOglvyCDYlX0rtDurUEVgweJYNHndYtJhyuHxlugmlGE_lAv2AjXvwUNsINtKl8nny2dMZBojc6K3RIiRVM5IWoJjb2Pt8CxM2kU6m0ShxV1V54xswKeWJPH8iHY2BSqR7cHtYvTeFXXXQt0NZtNFVYLDMucNU3iVFmvXt_PlochTl4rQw/s640/laptop.jpg" alt="" />
                      <ul>
                        <li>
                          <a href="#">Dell XPS 13</a>
                        </li>
                        <li>
                          <a href="#">Apple MacBook Air</a>
                        </li>
                        <li>
                          <a href="#">ASUS ZenBook UX425</a>
                        </li>
                      </ul>
                    </div>

                    <div class="submenu-column">
                      <h4>Camera</h4>
                      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH7WrqdMEvNoCq9Gbkx7fzyJTz6wAImf0uklIf4YiE_Eb1XH-I6ewVEpa9USPETcEQBEZfg5UCxfFCXMjzumR0_OIl_AH9hoEzaPILGajVb495IWOmxQ-klvsBVQvYoxaaOrpPGE_lgwfdiWKyZMWXd7suAq_BtVsUzut5LVJtvo7153-Dw1zzFIA7iqs/s640/camera.jpg" alt="" />
                      <ul>
                        <li><a href="#">Sony Alpha a7 III</a></li>
                        <li><a href="#">Canon EOS R6</a></li>
                        <li><a href="#">Nikon Z6 II</a></li>
                      </ul>
                    </div>

                    <div class="submenu-column">
                      <h4>Audio Equipments</h4>
                      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5rR0pCRWJ-jAfK1qB4lPw1fkO9PWWvv17BDwLcblJc7mn8sXgXecI5MeK32fcvkbe29J3d4W0ryyVR2KK1Z9IAxFj2pkfEDQJ4aLMH7Wf0WqTH-0v59XOeP8zMNlyf0UoBS8ph37PcsNuZBLKrogJl2u4zybEsKi-Cs5IDoH1zmTXtXZHhPAejwRVmJM/s640/audio.jpg" alt="" />
                      <ul>
                        <li>
                          <a href="#"
                            >Bose QuietComfort 35 II Wireless Headphones
                        </a></li>
                        <li>
                          <a href="#">Audio-Technica ATH-M50x</a>
                        </li>
                        <li>
                          <a href="#">Rode VideoMic Pro+</a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </li>

8.2 Add more Product Menu in Mobile

Code

<li class="has-submenu">
              <a class="menu-title" href="#">Products</a>
              <div class="submenu-container">
                <div class="submenu">
                  <div class="col-3">
                    <div class="submenu-column">
                      <h4>Laptop</h4>
                      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2pL0GGoln-MOglvyCDYlX0rtDurUEVgweJYNHndYtJhyuHxlugmlGE_lAv2AjXvwUNsINtKl8nny2dMZBojc6K3RIiRVM5IWoJjb2Pt8CxM2kU6m0ShxV1V54xswKeWJPH8iHY2BSqR7cHtYvTeFXXXQt0NZtNFVYLDMucNU3iVFmvXt_PlochTl4rQw/s640/laptop.jpg" alt="" />
                      <ul>
                        <li>
                          <a href="#">Dell XPS 13</a>
                        </li>
                        <li>
                          <a href="#">Apple MacBook Air</a>
                        </li>
                        <li>
                          <a href="#">ASUS ZenBook UX425</a>
                        </li>
                      </ul>
                    </div>

                    <div class="submenu-column">
                      <h4>Camera</h4>
                      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH7WrqdMEvNoCq9Gbkx7fzyJTz6wAImf0uklIf4YiE_Eb1XH-I6ewVEpa9USPETcEQBEZfg5UCxfFCXMjzumR0_OIl_AH9hoEzaPILGajVb495IWOmxQ-klvsBVQvYoxaaOrpPGE_lgwfdiWKyZMWXd7suAq_BtVsUzut5LVJtvo7153-Dw1zzFIA7iqs/s640/camera.jpg" alt="" />
                      <ul>
                        <li><a href="#">Sony Alpha a7 III</a></li>
                        <li><a href="#">Canon EOS R6</a></li>
                        <li><a href="#">Nikon Z6 II</a></li>
                      </ul>
                    </div>

                    <div class="submenu-column">
                      <h4>Audio Equipments</h4>
                      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5rR0pCRWJ-jAfK1qB4lPw1fkO9PWWvv17BDwLcblJc7mn8sXgXecI5MeK32fcvkbe29J3d4W0ryyVR2KK1Z9IAxFj2pkfEDQJ4aLMH7Wf0WqTH-0v59XOeP8zMNlyf0UoBS8ph37PcsNuZBLKrogJl2u4zybEsKi-Cs5IDoH1zmTXtXZHhPAejwRVmJM/s640/audio.jpg" alt="" />
                      <ul>
                        <li>
                          <a href="#"
                            >Bose QuietComfort 35 II Wireless Headphones
                        </a></li>
                        <li>
                          <a href="#">Audio-Technica ATH-M50x</a>
                        </li>
                        <li>
                          <a href="#">Rode VideoMic Pro+</a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </li>

9. Add more Post home

Code

<div class='label-title'>
  <div class='label-titlein'>
  <h3>Facebook</h3>
  <a href='/search/label/Facebook?&amp;max-results=12'>View All</a>
  </div>
  <div class='label-posts-container first-posts'/>
</div>
      
      <div class='home-page'>
      <b:section id='home-page'/>
      </div>
  
<div class='label-title'>
  <div class='label-titlein'>
  <h3>News</h3>
  <a href='/search/label/News?&amp;max-results=12'>View All</a>
  </div>
  <div class='label-posts-container second-posts'/>
</div>
      
      <div class='home-page'>
      <b:section id='home-page2'/>
      </div>
      
<div class='label-title'>
  <div class='label-titlein'>
  <h3>Youtube</h3>
  <a href='/search/label/Youtube?&amp;max-results=12'>View All</a>
  </div>
  <div class='label-posts-container third-posts'/>
</div>
      
      <div class='home-page'>
      <b:section id='home-page3'/>
      </div>

<div class='label-title'>
  <div class='label-titlein'>
  <h3>Twitter</h3>
  <a href='/search/label/Twitter?&amp;max-results=12'>View All</a>
  </div>
  <div class='label-posts-container fourth-posts'/>
</div>
      
      <div class='home-page'>
      <b:section id='home-page4'/>
      </div>
      
<script>
  const FirstPosts = document.querySelector(&#39;.first-posts&#39;);
  const SecondPosts = document.querySelector(&#39;.second-posts&#39;);
  const ThirdPosts = document.querySelector(&#39;.third-posts&#39;);
  const FourthPosts = document.querySelector(&#39;.fourth-posts&#39;);

  const firstLoadingImage = document.createElement(&#39;img&#39;);
  firstLoadingImage.src = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-mda1blKQ2CPj4uOfLALZVNtOHohk0c9HAj7e7tc13WG5A5Nmc4pEeYD2NCXNX4gAHjvlJQOuU-Evi8ROb56A0iCb2alK0sXkMwzWhOGEQdr0iGNXp-_x4zb5Jc2_XodnEUeqvJ6QfEeIXU6JRE17YBH7vPGZyIlkBwYWtXseeInHz7yH2avHvosBjFDP/s200/loading-gif.gif&#39;;
  firstLoadingImage.classList.add(&#39;loading-image&#39;); 
  
  const secondLoadingImage = document.createElement(&#39;img&#39;);
  secondLoadingImage.src = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-mda1blKQ2CPj4uOfLALZVNtOHohk0c9HAj7e7tc13WG5A5Nmc4pEeYD2NCXNX4gAHjvlJQOuU-Evi8ROb56A0iCb2alK0sXkMwzWhOGEQdr0iGNXp-_x4zb5Jc2_XodnEUeqvJ6QfEeIXU6JRE17YBH7vPGZyIlkBwYWtXseeInHz7yH2avHvosBjFDP/s200/loading-gif.gif&#39;;
    secondLoadingImage.classList.add(&#39;loading-image&#39;);
  
  const thirdLoadingImage = document.createElement(&#39;img&#39;);
  thirdLoadingImage.src = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-mda1blKQ2CPj4uOfLALZVNtOHohk0c9HAj7e7tc13WG5A5Nmc4pEeYD2NCXNX4gAHjvlJQOuU-Evi8ROb56A0iCb2alK0sXkMwzWhOGEQdr0iGNXp-_x4zb5Jc2_XodnEUeqvJ6QfEeIXU6JRE17YBH7vPGZyIlkBwYWtXseeInHz7yH2avHvosBjFDP/s200/loading-gif.gif&#39;;
    thirdLoadingImage.classList.add(&#39;loading-image&#39;);
  
  const fourthLoadingImage = document.createElement(&#39;img&#39;);
  fourthLoadingImage.src = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-mda1blKQ2CPj4uOfLALZVNtOHohk0c9HAj7e7tc13WG5A5Nmc4pEeYD2NCXNX4gAHjvlJQOuU-Evi8ROb56A0iCb2alK0sXkMwzWhOGEQdr0iGNXp-_x4zb5Jc2_XodnEUeqvJ6QfEeIXU6JRE17YBH7vPGZyIlkBwYWtXseeInHz7yH2avHvosBjFDP/s200/loading-gif.gif&#39;;
  fourthLoadingImage.classList.add(&#39;loading-image&#39;); 
  
  FirstPosts.appendChild(firstLoadingImage);
  SecondPosts.appendChild(secondLoadingImage);
  ThirdPosts.appendChild(thirdLoadingImage);
  FourthPosts.appendChild(fourthLoadingImage);

  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 displayFirstLabelPosts = (posts) =&gt; {
    populateLabelPosts(posts.feed.entry, FirstPosts);
    FirstPosts.removeChild(firstLoadingImage);
  };
  
  const displaySecondLabelPosts = (posts) =&gt; {
        populateLabelPosts(posts.feed.entry, SecondPosts);
        SecondPosts.removeChild(secondLoadingImage);
  };
  
  const displayThirdLabelPosts = (posts) =&gt; {
        populateLabelPosts(posts.feed.entry, ThirdPosts);
        ThirdPosts.removeChild(thirdLoadingImage);
  };
  
  const displayFourthLabelPosts = (posts) =&gt; {
    populateLabelPosts(posts.feed.entry, FourthPosts);
    FourthPosts.removeChild(fourthLoadingImage);
  };
  
  const scriptTag1 = document.createElement(&#39;script&#39;);
    scriptTag1.src = &#39;/feeds/posts/summary/-/Facebook?max-results=4&amp;alt=json-in-script&amp;callback=displayFirstLabelPosts&#39;;
    document.body.appendChild(scriptTag1);
  
  const scriptTag2 = document.createElement(&#39;script&#39;);
    scriptTag2.src = &#39;/feeds/posts/summary/-/News?max-results=4&amp;alt=json-in-script&amp;callback=displaySecondLabelPosts&#39;;
    document.body.appendChild(scriptTag2);
  
  const scriptTag3 = document.createElement(&#39;script&#39;);
    scriptTag3.src = &#39;/feeds/posts/summary/-/Youtube?max-results=4&amp;alt=json-in-script&amp;callback=displayThirdLabelPosts&#39;;
    document.body.appendChild(scriptTag3);
  
  const scriptTag4 = document.createElement(&#39;script&#39;);
    scriptTag4.src = &#39;/feeds/posts/summary/-/Twitter?max-results=4&amp;alt=json-in-script&amp;callback=displayFourthLabelPosts&#39;;
    document.body.appendChild(scriptTag4);
  
</script>

News

Blog

News

Blog

Grid Blogger Template

Customize Templates

1. Delete About Author

2. Delete Random Posts

3. Delete CSS Follow Us footer

4. Change from 12 posts to 18 or any you want

5. Delete page count

6. Change number of labels (12 to 18 or any you want)

7. Add more Category Menu

7.1 Add more Category Menu in PC

7.2. Add more Category Menu in Mobile

7.3 Add more Icon Category in PC and Mobile

8. Add more Product Menu

8.1 Add more Product Menu in PC

8.2 Add more Product Menu in Mobile

9. Add more Post home

asdasdasdasd

About Author

No comments:

Post a Comment

View