Kien Templates: Nes 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. Delete CSS Follow Us sidebar

Code

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

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

Code

var postperpage=12;     to      var postperpage=18;

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

7. Change colors hover posts

Code

.home-posts:hover{
box-shadow: 0 7px 8px 0 rgba(117, 149, 246, 0.8), 0 9px 25px 0 rgba(117, 149, 246, 0.8);
}

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

9 Add more Category Menu

Layout -> Edit menu-area

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

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

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

10. Add more Product Menu

Layout -> Edit menu-area

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

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

11. Add more Post home

11.1 Add more Post home 1

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

<div class='label-title2'>
  <div class='label-titlein'>
  <h3>News</h3>
  <a href='/search/label/News?&amp;max-results=12'>View All</a>
  </div>
  <div class='label-posts-container2 second-posts'/>
</div>

<div class='label-title3'>
  <div class='label-titlein'>
  <h3>Youtube</h3>
  <a href='/search/label/Youtube?&amp;max-results=12'>View All</a>
  </div>
  <div class='label-posts-container2 third-posts'/>
</div> 

</div>
      
<div class='clear'/>
      
      <div class='home-page2'>
      <b:section id='home-page2'/>
      </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-page3'/>
      </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=2&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=2&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>

11.2 Add more Post home 2

html

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

<div class='label-title2'>
  <div class='label-titlein'>
  <h3>News</h3>
  <a href='/search/label/News?&amp;max-results=12'>View All</a>
  </div>
  <div class='label-posts-container2 second-posts'/>
</div>

<div class='label-title3'>
  <div class='label-titlein'>
  <h3>Youtube</h3>
  <a href='/search/label/Youtube?&amp;max-results=12'>View All</a>
  </div>
  <div class='label-posts-container2 third-posts'/>
</div> 

</div>
      
<div class='clear'/>
      
      <div class='home-page'>
      <b:section id='home-page2'/>
      </div>
      
<div class='label-title2a'>

<div class='label-title2'>
  <div class='label-titlein'>
  <h3>Video</h3>
  <a href='/search/label/Video?&amp;max-results=12'>View All</a>
  </div>
  <div class='label-posts-container2 fifth-posts'/>
</div>

<div class='label-title3'>
  <div class='label-titlein'>
  <h3>Food</h3>
  <a href='/search/label/Food?&amp;max-results=12'>View All</a>
  </div>
  <div class='label-posts-container2 sixth-posts'/>
</div> 

</div>
      
<div class='clear'/>
      
      <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 FifthPosts = document.querySelector(&#39;.fifth-posts&#39;);
  const SixthPosts = document.querySelector(&#39;.sixth-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 fifthLoadingImage = document.createElement(&#39;img&#39;);
  fifthLoadingImage.src = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-mda1blKQ2CPj4uOfLALZVNtOHohk0c9HAj7e7tc13WG5A5Nmc4pEeYD2NCXNX4gAHjvlJQOuU-Evi8ROb56A0iCb2alK0sXkMwzWhOGEQdr0iGNXp-_x4zb5Jc2_XodnEUeqvJ6QfEeIXU6JRE17YBH7vPGZyIlkBwYWtXseeInHz7yH2avHvosBjFDP/s200/loading-gif.gif&#39;;
  fifthLoadingImage.classList.add(&#39;loading-image&#39;); 
  
  const sixthLoadingImage = document.createElement(&#39;img&#39;);
  sixthLoadingImage.src = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-mda1blKQ2CPj4uOfLALZVNtOHohk0c9HAj7e7tc13WG5A5Nmc4pEeYD2NCXNX4gAHjvlJQOuU-Evi8ROb56A0iCb2alK0sXkMwzWhOGEQdr0iGNXp-_x4zb5Jc2_XodnEUeqvJ6QfEeIXU6JRE17YBH7vPGZyIlkBwYWtXseeInHz7yH2avHvosBjFDP/s200/loading-gif.gif&#39;;
  sixthLoadingImage.classList.add(&#39;loading-image&#39;); 
  

  FirstPosts.appendChild(firstLoadingImage);
  SecondPosts.appendChild(secondLoadingImage);
  ThirdPosts.appendChild(thirdLoadingImage);

  FifthPosts.appendChild(fifthLoadingImage);
  SixthPosts.appendChild(sixthLoadingImage);

  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 displayFifthLabelPosts = (posts) =&gt; {
        populateLabelPosts(posts.feed.entry, FifthPosts);
        FifthPosts.removeChild(fifthLoadingImage);
  };
  
  const displaySixthLabelPosts = (posts) =&gt; {
        populateLabelPosts(posts.feed.entry, SixthPosts);
        SixthPosts.removeChild(sixthLoadingImage);
  };
  

  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=2&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=2&amp;alt=json-in-script&amp;callback=displayThirdLabelPosts&#39;;
    document.body.appendChild(scriptTag3);
  
  const scriptTag5 = document.createElement(&#39;script&#39;);
    scriptTag5.src = &#39;/feeds/posts/summary/-/Video?max-results=2&amp;alt=json-in-script&amp;callback=displayFifthLabelPosts&#39;;
    document.body.appendChild(scriptTag5);
  
  const scriptTag6 = document.createElement(&#39;script&#39;);
    scriptTag6.src = &#39;/feeds/posts/summary/-/Food?max-results=2&amp;alt=json-in-script&amp;callback=displaySixthLabelPosts&#39;;
    document.body.appendChild(scriptTag6);
  

</script>

11.3 Add more Post home 1 +2

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

<div class='label-title2'>
  <div class='label-titlein'>
  <h3>News</h3>
  <a href='/search/label/News?&amp;max-results=12'>View All</a>
  </div>
  <div class='label-posts-container2 second-posts'/>
</div>

<div class='label-title3'>
  <div class='label-titlein'>
  <h3>Youtube</h3>
  <a href='/search/label/Youtube?&amp;max-results=12'>View All</a>
  </div>
  <div class='label-posts-container2 third-posts'/>
</div> 

</div>
      
<div class='clear'/>
      
      <div class='home-page'>
      <b:section id='home-page2'/>
      </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-page3'/>
      </div>
      
<div class='label-title2a'>

<div class='label-title2'>
  <div class='label-titlein'>
  <h3>Video</h3>
  <a href='/search/label/Video?&amp;max-results=12'>View All</a>
  </div>
  <div class='label-posts-container2 fifth-posts'/>
</div>

<div class='label-title3'>
  <div class='label-titlein'>
  <h3>Food</h3>
  <a href='/search/label/Food?&amp;max-results=12'>View All</a>
  </div>
  <div class='label-posts-container2 sixth-posts'/>
</div> 

</div>
      
<div class='clear'/>
      
      <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 FifthPosts = document.querySelector(&#39;.fifth-posts&#39;);
  const SixthPosts = document.querySelector(&#39;.sixth-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;); 
  
  const fifthLoadingImage = document.createElement(&#39;img&#39;);
  fifthLoadingImage.src = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-mda1blKQ2CPj4uOfLALZVNtOHohk0c9HAj7e7tc13WG5A5Nmc4pEeYD2NCXNX4gAHjvlJQOuU-Evi8ROb56A0iCb2alK0sXkMwzWhOGEQdr0iGNXp-_x4zb5Jc2_XodnEUeqvJ6QfEeIXU6JRE17YBH7vPGZyIlkBwYWtXseeInHz7yH2avHvosBjFDP/s200/loading-gif.gif&#39;;
  fifthLoadingImage.classList.add(&#39;loading-image&#39;); 
  
  const sixthLoadingImage = document.createElement(&#39;img&#39;);
  sixthLoadingImage.src = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-mda1blKQ2CPj4uOfLALZVNtOHohk0c9HAj7e7tc13WG5A5Nmc4pEeYD2NCXNX4gAHjvlJQOuU-Evi8ROb56A0iCb2alK0sXkMwzWhOGEQdr0iGNXp-_x4zb5Jc2_XodnEUeqvJ6QfEeIXU6JRE17YBH7vPGZyIlkBwYWtXseeInHz7yH2avHvosBjFDP/s200/loading-gif.gif&#39;;
  sixthLoadingImage.classList.add(&#39;loading-image&#39;); 
  

  FirstPosts.appendChild(firstLoadingImage);
  SecondPosts.appendChild(secondLoadingImage);
  ThirdPosts.appendChild(thirdLoadingImage);
  FourthPosts.appendChild(fourthLoadingImage);
  FifthPosts.appendChild(fifthLoadingImage);
  SixthPosts.appendChild(sixthLoadingImage);

  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 displayFifthLabelPosts = (posts) =&gt; {
        populateLabelPosts(posts.feed.entry, FifthPosts);
        FifthPosts.removeChild(fifthLoadingImage);
  };
  
  const displaySixthLabelPosts = (posts) =&gt; {
        populateLabelPosts(posts.feed.entry, SixthPosts);
        SixthPosts.removeChild(sixthLoadingImage);
  };
  

  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=2&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=2&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);
  
  const scriptTag5 = document.createElement(&#39;script&#39;);
    scriptTag5.src = &#39;/feeds/posts/summary/-/Video?max-results=2&amp;alt=json-in-script&amp;callback=displayFifthLabelPosts&#39;;
    document.body.appendChild(scriptTag5);
  
  const scriptTag6 = document.createElement(&#39;script&#39;);
    scriptTag6.src = &#39;/feeds/posts/summary/-/Food?max-results=2&amp;alt=json-in-script&amp;callback=displaySixthLabelPosts&#39;;
    document.body.appendChild(scriptTag6);
  

</script>

News

Blog

News

Blog

Nes Blogger Template

Customize Templates

1. Delete About Author

2. Delete Random Posts

3. Delete CSS Follow Us footer

4. Delete CSS Follow Us sidebar

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

6. Delete page count

7. Change colors hover posts

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

9 Add more Category Menu

9.1 Add more Category Menu in PC

9.2. Add more Category Menu in Mobile

9.3 Add more Icon Category in PC and Mobile

10. Add more Product Menu

10.1 Add more Product Menu in PC

10.2 Add more Product Menu in Mobile

11. Add more Post home

11.1 Add more Post home 1

11.2 Add more Post home 2

11.3 Add more Post home 1 +2

About Author

No comments:

Post a Comment

View