Cara Membuat 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 Jadi 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='//2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/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='//2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/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>


Sekian Tutorial Cara Membuat Popular Post Keren Di Template Amp Semoga Bermanfaat
Cara Membuat Popular Post Keren Valid Amp Admin Mafsyah 5 of 5
Membuat Popular Post Keren Template Amp  - Popular Post Yang Kali Ini Kita Akan Pelajari Yaitu Cara Membuat Popular Post Untuk Template A...
Cara Membuat Popular Post Keren Valid Amp
4/ 5 stars - "Cara Membuat 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 A...
Loading

URL POSTINGAN

URL:
HTML link code:
BB (forum) link code:

Silahkan Baca Aturan Komentar Yang Baik
Peraturan:
1. Dilarang "SPAM"Apabila Spam Maka Akan Di Block Supaya Tidak Bisa Komentar Lagi
2. Dilarang "Sebar Link Di Komentar " Apabila Share Link Di Komentar Otomatis Di Hapus
3. Dilarang "Bahasa Kasar"Bahasa Kasar Atau Kotor Akan Di Hapus OLeh Admin
4. Dilarang "Bully" Apabila Ada Komentar Berbau Bully Akan Di Hapus Oleh Admin
5. Silahkan Berkomentar Sesuai Kebutuhan

Komentar Facebook
1 Komentar Blogger

1 Comments:

Rapih keliatnya setelah saya coba pasang di blog hehe,makasih tutornya min