Mamank Dzgn : Cara Menciptakan Popular Post Keren Valid Amp

Membuat Popular Post Keren Template Amp - Popular Post Yang Kali Ini Kita Akan Pelajari Yaitu Cara Membuat Popular Post Untuk Template Amp .. Karna Popular Post Template Non Amp Sudah Biasa Makara Saya Disini Akan Membahas Tentang Bagaimana Caranya Kita Membuat Popular Post Keren Untuk Template Amp Atau Valid Amp .. Sebelum Kita Membahas Ke Tutorial Nya Kita Harus Memahami Terlebih Dahulu Template AMP .. Dan Tentu Saja Kita Sebelum Membuat Popular Post Valid Amp Template Yang Kita Gunakan Harus Support Amp .. Karna Apabila Template Kita Tidak Valid Amp Maka Tutorial Yang Kita Bahas Ini Hanya Untuk Template Amp Saja .. Langsung Saja Ke Tutorial Nyaa

Langkah - Langkah Cara Membuat Popular Post Valid Amp

Masuk Ke Template > Edit Html > Cari Kode </style> > Dan Simpan Kode Di Bawah Ini Tepat Di Atas Kode </style>

 PopularPosts .widget-content{padding:0;box-sizing:border-box}
  .PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none;background:rgb(0, 159, 255)}
  .PopularPosts .widget-content ul li {
      margin: 0;
      padding: 10px 0 10px 60px;
      position: relative;
      overflow: hidden;
      border-top: 1px solid #2b2b2b;
      border-bottom: 1px solid #111;
  }
  .PopularPosts .widget-content ul li:last-child{border-bottom:none}
  .PopularPosts .widget-content ul li .item-title{color:#fff;line-height:1.1em;padding:0 10px 0 0}
  .PopularPosts .widget-content ul li .item-title a{text-decoration:none;font-size:13px;font-weight:400}
  .PopularPosts .widget-content ul li .item-title a:hover{color:#fff}
  .PopularPosts .item-snippet{font-size:14px;font-weight:400;margin-top:10px;line-height:1.1em}
  .PopularPosts .widget-content ul li amp-img{width:300px;height:180px;padding-right:0;transition:all .5s ease-out}
  .PopularPosts .widget-content ul li:first-child{border-bottom:none;padding:0}
  .PopularPosts .widget-content ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}
  .PopularPosts .widget-content ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;text-align:left;padding:15px 20px 15px 60px;background:rgba(0, 159, 255, 0.68);z-index:1}
  .PopularPosts .widget-content ul li:first-child .item-title a{color:#fff}
  .PopularPosts .item-snippet,.PopularPosts .widget-content ul li .item-thumbnail{display:none}
  .PopularPosts .widget-content ul{padding-left:0;counter-reset:popcount}
  .PopularPosts .widget-content ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:10px;top:50%;margin-top:-19px;color:#fff;font-size:38px;line-height:1;z-index:2}
  
  .sidebar .PopularPosts .item-title a{color:#ffffff;text-decoration:none}
  .PopularPosts .widget-content ul li:first-child .item-title:before{color:#fff}
  .PopularPosts .widget-content{padding:0;box-sizing:border-box}
  .PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none;background:rgb(0, 159, 255)}
  .PopularPosts .widget-content ul li {
      margin: 0;
      padding: 10px 0 10px 60px;
      position: relative;
      overflow: hidden;
      border-top: 1px solid #2b2b2b;
      border-bottom: 1px solid #111;
  }
  .PopularPosts .widget-content ul li:last-child{border-bottom:none}
  .PopularPosts .widget-content ul li .item-title{color:#fff;line-height:1.1em;padding:0 10px 0 0}
  .PopularPosts .widget-content ul li .item-title a{text-decoration:none;font-size:13px;font-weight:400}
  .PopularPosts .widget-content ul li .item-title a:hover{color:#fff}
  .PopularPosts .item-snippet{font-size:14px;font-weight:400;margin-top:10px;line-height:1.1em}
  .PopularPosts .widget-content ul li amp-img{width:300px;height:180px;padding-right:0;transition:all .5s ease-out}
  .PopularPosts .widget-content ul li:first-child{border-bottom:none;padding:0}
  .PopularPosts .widget-content ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}
  .PopularPosts .widget-content ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;text-align:left;padding:15px 20px 15px 60px;background:rgba(0, 159, 255, 0.68);z-index:1}
  .PopularPosts .widget-content ul li:first-child .item-title a{color:#fff}
  #blog-pager,.PopularPosts .item-snippet,.PopularPosts .widget-content ul li .item-thumbnail,.blog-pager{display:none}
  .PopularPosts .widget-content ul{padding-left:0;counter-reset:popcount}
  .PopularPosts .widget-content ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:10px;top:50%;margin-top:-19px;color:#fFF;font-size:38px;line-height:1;z-index:2}
  .Label li,.Label li a,.label-size a{position:relative;transition:all .3s ease-out}
  .sidebar .PopularPosts .item-title a{color:#FFF;text-decoration:none}
  .PopularPosts .widget-content ul li:first-child .item-title:before{color:#fff}

Selanjutnya cari kode 'sidebar-wrapper' > Letakan Kode Di Bawah Ini Tepat Di Bawah Kode <b:section class='sidebar' id='sidebar' showaddelement='yes'>

 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
       <b:widget-settings>
         <b:widget-setting name='numItemsToShow'>10</b:widget-setting>
         <b:widget-setting name='showThumbnails'>true</b:widget-setting>
         <b:widget-setting name='showSnippets'>true</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' expr:title='data:post.title'><data:post.title/></a>
            <b:else/>
              <!-- (2) Show only snippets -->
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><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'>
                    <b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 300) : data:post.thumbnail' var='image'>
                      <amp-img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='180' width='300'/>
                    </b:with>
                  </a>
                </div>
                <b:else/>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' expr:title='data:post.title'>
                <amp-img expr:alt='data:post.title' expr:title='data:post.title' height='180' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEXtjj1nxl5zvV9mgAD10Q7SIyh-ZbaBSqIu7YHIDzZAijjsffTcmyomkAKJg2u4c0KaMwfDDRqozjsPbFRFSln5gVFv66-_70jSKwY8Y-W3F6BSgU0MS94AfH_9xovvFGU2yW1NSGGbZ1/s100/no-thumbnail.png' width='300'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><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>

Langkah Terakhir Cari Kode <b:includable id='main'> Letakan Kode Di Bawah Ini Tepat Di Bawahnya

 <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' expr:title='data:post.title'><data:post.title/></a>
            <b:else/>
              <!-- (2) Show only snippets -->
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><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'>
                    <b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 300) : data:post.thumbnail' var='image'>
                      <amp-img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='180' width='300'/>
                    </b:with>
                  </a>
                </div>
                <b:else/>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' expr:title='data:post.title'>
                <amp-img expr:alt='data:post.title' expr:title='data:post.title' height='180' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEXtjj1nxl5zvV9mgAD10Q7SIyh-ZbaBSqIu7YHIDzZAijjsffTcmyomkAKJg2u4c0KaMwfDDRqozjsPbFRFSln5gVFv66-_70jSKwY8Y-W3F6BSgU0MS94AfH_9xovvFGU2yW1NSGGbZ1/s100/no-thumbnail.png' width='300'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><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>