Tutorial Memasang Widget Popular Post Valid AMP untuk Pemula

Widget Popular Post Valid AMP - Widget Popular Post pada sebuah blog merupakan element yang cukup penting, karena salah satu fungsinya yaitu untuk menunjukan kepada visitor artikel mana saja yang paling sering di baca di blog kita.

Selain fungsi tersebut, fungsi lain dari widget popular post sama halnya seperti fungsi dari related post atau artikel terkait, yaitu berfungsi menurunkan bounce rate bagi blog kita yang artinya blog kita akan dinilai baik oleh mbah google.

Baca juga : Cara Setting Gambar Postingan Blog Agar Valid AMP

Pada umumnya pada template blog non AMP widget popular post bisa kita pasang atau terapkan pada blog kita kapan saja kita mau, namun beda halnya dengan template blogger yang AMP, kita harus repot-repot edit sana dan edit sini agar blog kita tetap valid AMP.

Bagi yang sudah pro dalam hal otak-atik template AMP mungkin tutorial ini dirasa tidak ada apa-apanya, karena admin masagung.id hanya memberikan tutorial dasar memasang widget popular post yang valid AMP.

Berikut ini admin sampaikan bagaimana cara memasang

Widget popular post yang valid AMP


1. Buat Widget Popular Post Baru

Buatlah widget baru popular post pada menu tata letak yang tersedia di dashboard blogger, untuk lebih jelasnya silahkan lihat contoh gambar dibawah.





2. Edit Tema

Langkah selanjutnya masuk pada menu tema lalu kalian pilih opsi edit HTML, biar lebih jelas lihat gambar di bawah aja ya.



3. Edit Widget Popular Post

Cari element widget popular post di html tema dengan cara CTRL+F atau Lompat ke Menu PopularPost1 pada opsi Lompat, untuk lebih jelasnya lihat gambar dibawah.


Setelah ketemu, langkah selanjutnya replace atau ganti element widget tersebut dengan element dibawah ini,

<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'>false</b:widget-setting>
              <b:widget-setting name='timeRange'>LAST_WEEK</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'><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.thumbnail'>
              <div class='item-thumbnail'>
                <amp-img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnail,300)' expr:title='data:post.title' height='80' layout='responsive' noloading='' width='100'/>
              </div>
                <b:else/>
              <div class='item-thumbnail'>
                <amp-img expr:alt='data:post.title' expr:title='data:post.title' height='170' layout='responsive' noloading='' src='https://3.bp.blogspot.com/-x_mMtgFf6XE/VlhLxwdLekI/AAAAAAAAj3c/N7fRz1lbMSg/s300/no-thumbnail.jpg' width='300'/>
              </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>

Ganti dari <b:widget sampai </b:widget> element popular post.

4. Ganti CSS Popular Post

Langkah selanjutnya cari CSS untuk Popular Post yang ada di template/tema kalian lalu ganti CSS Popular Post tersebut dengan CSS Popular Post di bawah ini.


/* Populer Posts */
.PopularPosts .widget-content{padding:10px 10px 0 10px;background:#fff;border:1px solid #ddd;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none}
.PopularPosts .widget-content ul li{margin:0 0 10px;padding:0;position:relative;}
.PopularPosts .widget-content ul li .item-title{line-height:1.1em;padding:0}
.PopularPosts .widget-content ul li .item-title a{text-decoration:none;font-size:12px;color:#505050;font-weight:400}
.PopularPosts .widget-content ul li a:hover,.PopularPosts .widget-content ul li:hover a{color:#d90000}
.PopularPosts .item-snippet{font-size:14px;font-weight:400;margin-top:10px;line-height:1.1em;}
.PopularPosts .widget-content ul li img{width:100px;height:70px;padding-right:0;transition:all .5s ease-out}
.PopularPosts .item-thumbnail{float:left;margin:0 10px 0 0;width:100px;height:70px;overflow:hidden}
.PopularPosts .item-thumbnail:hover img{-webkit-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);transform:scale(1.3)}

Contoh CSS nya kurang lebih seperti gambar dibawah ini.


5. Save Template

Langkah selanjutnya cek validasi AMP di AMP Validator, jika widget popular post berantakan tinggal kalian edit CSS nya.

Itulah cara memasang widget popular post valid amp untuk pemula dari masagung.id, semoga bermanfaat dan menambah wawasan untuk blogger pemula.

0 Response to "Tutorial Memasang Widget Popular Post Valid AMP untuk Pemula"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel