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.
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:
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="Cara Pasang Widget Popular Post Keren dan Valid AMP" 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="Cara Pasang Widget Popular Post Keren dan Valid AMP"></data:post></a> <b:else> <!-- (2) Show only snippets --> <div class="item-title"> <a expr:href="data:post.href" expr:title="Cara Pasang Widget Popular Post Keren dan Valid AMP" href="https://www.blogger.com/null"><data:post .title="Cara Pasang Widget Popular Post Keren dan Valid AMP"></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=" Cara Pasang Widget Popular Post Keren dan Valid AMP dengan CSS Cara Pasang Widget Popular Post Keren dan Valid AMP" expr:height="data:thumbnailSize" expr:src="data:post.thumbnail" expr:title="Cara Pasang Widget Popular Post Keren dan Valid AMP" expr:width="data:thumbnailSize"> </amp-img></a> </div> <div class="item-title"> <a expr:href="data:post.href" expr:title="Cara Pasang Widget Popular Post Keren dan Valid AMP" href="https://www.blogger.com/null"><data:post .title="Cara Pasang Widget Popular Post Keren dan Valid AMP"></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=" Cara Pasang Widget Popular Post Keren dan Valid AMP dengan CSS Cara Pasang Widget Popular Post Keren dan Valid AMP" expr:height="data:thumbnailSize" expr:src="data:post.thumbnail" expr:title="Cara Pasang Widget Popular Post Keren dan Valid AMP" expr:width="data:thumbnailSize"> </amp-img></a> </div> <div class="item-title"> <a expr:href="data:post.href" expr:title="Cara Pasang Widget Popular Post Keren dan Valid AMP" href="https://www.blogger.com/null"><data:post .title="Cara Pasang Widget Popular Post Keren dan Valid AMP"></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.