Cara Mudah Pasang Widget Popular Post Valid AMP

Cara Mudah Pasang Widget Popular Post Valid AMP. Pada sebuah blog atau website biasanya akan menampilkan artikel-artikel mana saja yang sering dibaca, yang dirangkum dalam sebuah widget. Widget tersebut secara default adalah Widget Popular Post, namun dalam penamaan dapat dirubah sesuai selera pemilik blog atau website.

Artikel populer, artikel teratas, sering dibaca, adalah beberapa contoh saja penamaan atas widget popular post tersebut. Atau mungkin temans mempunyai penamaan unik tersendiri?

Pentingnya Widget Popular Post

Dengan menampilkan widget popular post dapat memudahkan para pengunjung dalam menemukan topik atau artikel yang sedang dicarinya. Pengunjung juga dapat melihat artikel mana saja yang sedang tren di blog tersebut.

Dengan demikian pengunjung tidak perlu bersusah-susah menyelami artikel demi artikel untuk menemukan artikel yang sering dibaca, karena sudah ada navigasi blog yang memudahkannya yaitu widget popular post.

Seperti halnya widget recent post, kehadiran widget popular post ini diharapkan dapat menurunkan tingkat bounce rate karena pengunjung akan terus berada pada blog tersebut.

Oleh karena itu, bagi temans belum pasang widget ini sangat dianjurkan untuk segera memasang pada blog ya. Pada platform Blogger sudah ada widget popular post bawaan, jadi tidak perlu ribet dan repot kan. Oiya, silahkan baca juga cara pasang auto ads pada blog AMP.

Cara Pasang Widget Popular Post Valid AMP

Mungkin diantara temans sekalian ada yang tidak sreg dengan widget popular post bawaan dari Blogger dan ingin membuat tampilan yang berbeda. Kabar baiknya adalah pada artikel kali ini kita akan membuat widget tersebut dengan tampilan yang berbeda, tentunya lebih keren doong ya hehehe.

Bagaimana jika menggunakan template AMP Blogger? Bagi pengguna template valid AMP bisa segera mengadopsi langkah-langkah seperti dibawah ini :

• Jika pada blog kamu belum ada widget popular post, maka kamu dapat mnambahkannya terlebih dahulu. Caranya adalah pada menu Layout -> Add widget -> Popular post

• Kemudian masuk ke menu Theme dan klik Edit
• Tambahkan kode CSS berikut ini pada template Blogger pada bagian amp-custom

/* CSS Popular Post AMP */

.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;}

• Selanjutnya adalah temukan widget popular post tadi pada Theme dan kemudian ganti semua kode widgetnya dengan kode di bawah ini :

<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>

• Kemudian simpan
• Silahkan cek hasilnya.

*) Catatan : Jika terdapat error atau blog menjadi tidak valid AMP, silahkan cek kembali dan temukan kode berikut ini, dan hapus kode tersebut :

<b:include name='quickedit'/>

Dengan demikian kini blog kamu sudah mempunyai Widget Popular Post yang valid AMP. Semoga pengunjung blog kamu akan terus naik dan betah berada di blog kamu ya temans. Semoga bermanfaat.

Berbagi :