Cara Pasang Widget Popular Post Valid AMP - Tidak jarang pada saat kita melakukan blog walking atau mengunjungi blog dari teman-teman sekalian, kita akan menemukan sebuah widget yang menampilkan artikel-artikel mana saja yang sering di baca atau mendapatkan kunjungan terbanyak. Pada umumnya widget ini ditampilkan di bilah sisi samping kanan ataupun kiri.
Untuk penamaan widget tersebut secara pengaturan dasar platform blogger adalah popular post, namun ini bisa saja di ganti-ganti sesuai dengan selera pemilik blog masing-masing. Diantara penamaan yang secara umum digunakan adalah artikel teratas, artikel populer, banyak di baca, dan lainnya. Atau mungkin kamu memiliki penamaan yang unik tersendiri bro?
Manfaat memasang widget popular post
Sebenarnya penting banget nggak sih memasang widget popular post ini? Kembali lagi ke selera masing-masing secara personal ya. Namun dengan adanya widget ini di blog maka akan dapat memudahkan visitor atau pengunjung menemukan artikel mana saja yang mendapatkan kunjungan terbanyak dalam suatu periode. Dengan kata lain, widget ini akan memunculkan artikel-artikel yang sedang trending dalam sebuah blog.
Artikel popular ini bisa diatur periode waktunya semisal dalam tujuh hari, tiga puluh hari, setahun dan lainnya. Widget popular post ini juga dapat menekan angka bounce rate atau pantulan pengunjung karena dapat "menahan" pengunjung untuk lebih lama tinggal di blog tersebut. Silahkan baca juga cara pasang auto ads Google Adsense di blog AMP.
Widget ini layaknya sebuah navigasi yang sederhana dalam menampilkan artikel yang sedang trending saja, untuk menampilkan daftar artikel secara lengkap, kamu bisa membuat daftar isi blog atau sitemap pada salah satu halaman statis.
Meskipun widget popular post ini pada platform blogspot sudah disediakan secara default, namun jika kamu menggunakan template valid AMP harus menggunakan cara tersendiri agar nantinya halaman tetap tercatat valid AMP. Bagaimana caranya?
Cara Pasang Widget Popular Post Valid AMP
Nah bro jika kamu tertarik untuk menampilkan artikel-artikel yang popular di blog kamu, kamu bisa segera memasang widget ini tanpa harus mengganggu tampilan blog dan bahkan dapat membuat blog tampil lebih menarik dan keren. Selain itu kamu juga bisa menambahkan gambar di postingan pada blog valid AMP tanpa terjadi error.
Bagi pengguna template valid AMP tidak perlu bingung jika setelah memasang widget ini terdapat error AMP, karena di sini akan kita temukan solusi bagaimana cara pasang widget popular post namun blog tetap valid AMP.
Tidak perlu berlama-lama agar tidak semakin penasaran yang dapat menimbulkan jerawat, maka langkah yang bisa dilakukan untuk memasang widget popular post "secara aman" di blog valid AMP adalah sebagai berikut :
- Jika pada blog kamu belum ada widget popular post, maka kamu dapat mnambahkannya terlebih dahulu. Caranya adalah pada menu Layout -> Add widget -> Popular post
Oke bro tarik nafas dulu supaya dapat kembali rileks, bisa juga sambil di minum kopinya serta makan camilan yang sudah disediakan ya. Kalau sudah skuy kita lanjut ke tahap selanjutnya... :
- 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;}
- Kemudian langkah 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 == "false"">
<b:if cond="data:showSnippets == "false"">
<!-- (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 == "false"">
<!-- (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'/>Bisa jadi setelah memasang widget ini pengunjung akan dapat menemukan artikel-artikel yang trending di blog kamu, dan menjadikan inspirasi bagi orang lain untuk membuat artikel dengan tema yang serupa. Namun menurut Kangagos hal ini sepertinya tidak jadi masalah ya.
Oke bro sampai di sini kita sudah bisa menampilkan Widget Popular Post yang valid AMP. Semoga trafik pengunjung blog kamu akan terus meningkat dan betah berlama-lama berada di blog kamu ya bro. Semoga bermanfaat.