Cara Pasang Widget Popular Post Keren dan Valid AMP

Cara Pasang Widget Popular Post Keren dan Valid AMP dengan CSS

Widget Popular Post memang penting dipasang di blog, khususnya untuk blogger yang menggunakan cms blogger. Pemasangan widget popular post dan widget lainnya seperti related post  bisa menurunkan bounce rate atau rasio pentalan bagi blog anda.

Namun banyak blogger yang menyayangkan bahwa widget popular posts bawaan blogger terlalu sederhana. Untuk itulah banyak yang ingin mengubah tampilan widget tersebut.

Nah, buat kalian pengguna blogspot dan ingin mengubah tampilan widget popular post, saya akan membagikannya. Lengkap dengan tutorial dan kode CSS nya. Kode ini bisa anda pasang di template blogger AMP anda lho!

1. Yang diperlukan pertama kalinya adalah menambahkan Widget Popular Post di menu Tata Letak atau Layout pada dashboard blogger. Lalu pilih tambahkan widget popular post.

2. Kemudian yang kedua, masuk ke menu Tema dan klik Edit tema.

3. Tambahkan  kode CSS popular post di template AMP anda. Silahkan copy dan paste kode berikut ini di antar akode amp-custom.

 /* CSS Popular Post AMP IDN Blogger - Hafid */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 10px;overflow:hidden;border-radius:0 0 5px 5px;border-top:none;}
.PopularPosts li,.PopularPosts li amp-img,.PopularPosts li a,.PopularPosts li a amp-img {margin:0;padding:0;list-style:none;border:none;background:none;outline:none;}
.PopularPosts ul {margin:0;list-style:none;color:#64707a;}
.PopularPosts ul li amp-img {display: flex;align-items:center;display:block;width:auto;height:100%}
.PopularPosts ul li .item-thumbnail {display:block;margin:0 0 0 10px;width:65px;height:65px;border:1px solid #f5f5f5;overflow:hidden;float:right;border-radius:5px ;background-position:center;transition:all 0.5s ease-out}
.PopularPosts ul li .item-thumbnail:hover{-webkit-filter:brightness(0.4);transition:all 0.5s ease-out}
.PopularPosts ul li {background-color:#fff;margin:0;padding:10px 0;padding-right:5px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;display:block;min-height:67px}
.PopularPosts ul li:first-child {border-top:none;}
.PopularPosts ul li:last-child {border-bottom:none;}
.PopularPosts ul li a:hover {color:#4285f4;}
.PopularPosts ul li .item-title a, .PopularPosts ul li a {color:#000;transition:all .3s;display:block;height:100%;}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#4285f4;}
.PopularPosts .item-snippet{display:none}
.profile-img{display:inline;opacity:1;margin:0 6px 3px 0;}
.PopularPosts .item-title {padding-bottom:.2em;padding:0 5px;}

4. Belum selesai, sekarang anda perlu mengganti semua kode widget popular post yang tadi sudah ditambahkan, dan ganti dengan kode dibawah ini. Caranya lihat gambar di bawah:

<b:widget id="PopularPosts1" locked="false" title="Trending" type="PopularPosts" version="1">

        <b:widget-settings>

          <b:widget-setting name="numItemsToShow">8</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_MONTH</b:widget-setting>

        </b:widget-settings>

        <b:includable id="main">

  <b:if cond="data:title"><h3>

<data:title></data:title></h3>

</b:if>

  <div class="widget-content popular-posts">

<ul>

      <b:loop values="data:posts" var="post">

<li>

        <b:if cond="data:showThumbnails == &quot;false&quot;">

          <b:if cond="data:showSnippets == &quot;false&quot;">

            <!-- (1) No snippet/thumbnail -->

            <a expr:href="data:post.href" href="https://www.blogger.com/null"><data:post .title=""></data:post></a>

          <b:else>

            <!-- (2) Show only snippets -->

            <div class="item-title">

<a expr:href="data:post.href" expr:title="data:post.title" href="https://www.blogger.com/null"><data:post .title=""></data:post></a></div>

<div class="item-snippet">

<data:post .snippet=""></data:post></div>

</b:else></b:if>

        <b:else>

          <b:if cond="data:showSnippets == &quot;false&quot;">

            <!-- (3) Show only thumbnails -->

            <div class="item-thumbnail-only">

<b:if cond="data:post.thumbnail">

                </b:if><br />

<div class="item-thumbnail">

<a expr:href="data:post.href" href="https://www.blogger.com/null" target="_blank">

                    <amp-img expr:alt="data:post.title" expr:height="data:thumbnailSize" expr:src="data:post.thumbnail" expr:title="data:post.title" expr:width="data:thumbnailSize">

                  </amp-img></a>

                </div>

<div class="item-title">

<a expr:href="data:post.href" expr:title="data:post.title" href="https://www.blogger.com/null"><data:post .title=""></data:post></a></div>

</div>

<div class="clear">

<b:else>

            <!-- (4) Show snippets and thumbnails -->

            </b:else><br />

<div class="item-content">

<b:if cond="data:post.thumbnail">

                </b:if><br />

<div class="item-thumbnail">

<a expr:href="data:post.href" href="https://www.blogger.com/null" target="_blank">

                    <amp-img expr:alt="data:post.title" expr:height="data:thumbnailSize" expr:src="data:post.thumbnail" expr:title="data:post.title" expr:width="data:thumbnailSize">

                  </amp-img></a>

                </div>

<div class="item-title">

<a expr:href="data:post.href" expr:title="data:post.title" href="https://www.blogger.com/null"><data:post .title=""></data:post></a></div>

<div class="item-snippet">

<data:post .snippet=""></data:post></div>

</div>

<div class="clear">

</div>

</div>

</b:if>

        </b:else></b:if>

      </li>

</b:loop>

    </ul>

</div>

</b:includable>

      </b:widget>

Silahkan lihat gambar untuk cara mengganti kode widget popular post.

5. Terakhir, silahkan SAVE dan lihat hasilnya.

Jika terjadi error pada halaman HTML anda, harap pastikan code quickedit terhapus pada widget Popular Post.