Cara Memasang Widget Popular Posts Grid di Halaman Utama

1. Masuk ke Edit HTML > Letakkan kode berikut di bawah kode ]]></b:skin> atau di atas kode </head>

 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
/* Index Dakota in Home Page */
#indexdakota ul li:hover .item-title a{color:#07ACEC!important}
#indexdakota ul{margin:0!important;padding:0!important}
#indexdakota ul li {margin-right: 10px;margin-bottom: 15px;width: 21%;float: left;background: #fff;height: 272px;object-fit: cover;position: relative;display: flex;margin: 2%;padding: 0 !important;flex: 1 0;flex-direction: column;background-color: #fff;border-radius: 6px;-webkit-box-shadow: 0 10px 15px -3px rgba(0,0,0,.05), 0 4px 6px -2px rgba(0,0,0,.05);box-shadow: 0 10px 15px -3px rgba(0,0,0,.05), 0 4px 6px -2px rgba(0,0,0,.05);color: #4c4c51}
#indexdakota .item-thumbnail {display: block;width: 100%;max-width: 100%;height: 200px;border: 0;outline: 0;position: relative;margin: auto;}
#indexdakota .item-thumbnail a {display: block;}
#indexdakota {overflow: hidden;padding-top: 3rem;position: relative;margin: 0 2%}
#indexdakota img{display: block;width: 100%;max-width: 100%;height: 200px;border: 0;outline: 0;position: relative;margin: auto;}
#indexdakota .item-title{display: block;object-fit: cover;color: #212529;font-weight: 500; font-size: 18px;padding-left: 15px;padding-bottom: 13px;padding-top: 10px;padding-right: 10px;text-transform: capitalize;line-height: 1.25rem;outline: 0;overflow: hidden;padding: 5px 6px;text-overflow: ellipsis;vertical-align: middle;}
#indexdakota h2 {text-align: center;margin: 0 auto;padding: 17px;font-size: 2rem;font-weight: 500}
#indexdakota h2:hover{color: #174ea6}
</style>
</b:if>
</b:if> 

2. Letakkan kode widget dibawah ini, di atas kode <footer> atau di atas <div id='main-wrapper'>

Lihat Gambar 2. © Dakota

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:section class='indexdakota' id='indexdakota' maxwidgets='1' showaddelement='yes'>
  <b:widget id='PopularPosts2' locked='false' title='Popular Download' type='PopularPosts' version='1'>
    <b:widget-settings>
      <b:widget-setting name='numItemsToShow'>4</b:widget-setting>
      <b:widget-setting name='showThumbnails'>true</b:widget-setting>
      <b:widget-setting name='showSnippets'>false</b:widget-setting>
      <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 170, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                    <img alt='Popular Posts' border='0' expr:src='data:image'/>
                  </b:with>
                </a>
              </div>
            </b:if>
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'><data:post.snippet/></div>
            </b:if>
          </div>
          <div class='clear'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
</b:includable>
  </b:widget>
</b:section>
<div class='clear'/>
</b:if></b:if>  

3. Preview and save Template

Ganti  Jumlah Item Show = 4, dan Judul title 'Popular Download' sesuai yang diiginkan