Membuat Widget Popular Post di Blog AMP

Membuat Widget Popular Post Di Blog AMP - Widget popular post adalah widget yang di buat untuk menampilkan artikel atau postingan yang sering di baca oleh pengunjung blog. dengan adanya widget popular post akan memberitahuan kepada pengunjung blog kita postingan apa saja yang paling banyak dibaca.

Selian itu widget popular post juga bisa membantu menambah pageview blog kita, karena pengunjung blog biasa melihat lihat artikel yang popular di blog kita.

Bagi sobat yang menggunakan tempate AMP dan ingin membuat popular post di blog AMP sobat, silahkan ikuti langkahnya berikut ini. Untuk Demonya seperti Popular Post Di blog Website Mini, jika belum Saya lepas widgetnya. hehe.

Silahkan simpan css dibawah ini pada style amp-custom

.PopularPosts .widget-content ul{width:100%;padding:10px;background:#292929;list-style-type:none}
.PopularPosts .widget-content ul li{border-bottom:1px solid #2e2e2e;box-shadow:inset 0 -1px 0 #222;padding-bottom:10px;margin:0 0 10px;position:relative;overflow:hidden}
.PopularPosts .widget-content ul li:last-child{margin-bottom:-10px;}
.PopularPosts .widget-content ul li .item-title{line-height:1.3em;}
.PopularPosts .widget-content ul li .item-title a{text-decoration:none;font-size:14px;font-weight:700;color:#999}
.PopularPosts .widget-content ul li a{text-decoration:none;font-size:14px;font-weight:700;color:#999}
.PopularPosts .widget-content ul li a:hover,.PopularPosts .widget-content ul li:hover a{color:#bbb}
.PopularPosts .widget-content ul li img{width:100px;height:72px;padding-right:0}
.PopularPosts .item-thumbnail{float:left;margin:0 10px 0 0;width:100px;height:72px;overflow:hidden}
.PopularPosts .item-snippet{display:none}
#PopularPosts2 amp-img{-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;-webkit-filter:brightness(.8);filter:brightness(.8)}
#PopularPosts2 amp-img:hover{-webkit-filter:brightness(1.1);filter:brightness(1.1)}

Kemudian simpan kode dibawah ini tepat dibawah kode <b:section class='sidebar' id='sidebar' preferred='yes'>

          <b:widget id='Label2' locked='false' title='Labels' type='Label' version='1'>
            <b:widget-settings>
              <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
              <b:widget-setting name='display'>LIST</b:widget-setting>
              <b:widget-setting name='selectedLabelsList'/>
              <b:widget-setting name='showType'>ALL</b:widget-setting>
              <b:widget-setting name='showFreqNumbers'>true</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>        
        <b:loop values='data:labels' var='label'>
          <li>
            <b:if cond='data:blog.url == data:label.url'>
              <data:label.name/>
            <b:else/>
              <a expr:href='data:label.url'><data:label.name/></a>
            </b:if>
            <b:if cond='data:showFreqNumbers'>
              <span class='post-count'><data:label.count/></span>
            </b:if>
          </li>
        </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span class='post-count'><data:label.name/></span>
          <b:else/>
            <a class='ajax-try ajax' expr:href='data:label.url' rel='tag'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='post-count'><data:label.count/></span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
  </div>
</b:includable>
          </b:widget>

Kemudian simpan template.

Nah, itulah artikel Membuat Widget Popular Post Di Blog AMP. Semoga bermanfaat.