Pasang Widget Popular Post Keren Valid Amp

Widget Popular Post Keren For Amp-vaild Dan Non-AMP

-Widget Popular Post memang penting dipasang di blog, khususnya untuk blogger yang memakai cms blogger. Pemasangan widget popular post dan widget lainnya ibarat related post  dapat 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, aku akan membagikannya. Lengkap dengan tutorial dan aba-aba CSS nya. Kode ini dapat anda pasang di template blogger AMP anda lho!

1. Yang diharapkan pertama kalinya yakni menambahkan Widget Popular Post di hidangan Tata Letak atau Layout pada dashboard blogger. Lalu pilih tambahkan widget popular post.

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

3. Tambahkan  kode CSS popular post di template AMP anda. Silahkan copy dan paste aba-aba 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, kini anda perlu mengganti semua aba-aba widget popular post yang tadi sudah ditambahkan, dan ganti dengan aba-aba dibawah ini. Caranya lihat gambar di bawah:

 <b:widget id="PopularPosts1" locked="false" title="Pasang Widget Popular Post Keren 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 == &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="Pasang Widget Popular Post Keren Valid AMP"></data:post></a>           <b:else>             <!-- (2) Show only snippets -->             <div class="item-title"> <a expr:href="data:post.href" expr:title="Pasang Widget Popular Post Keren Valid AMP" href="https://www.blogger.com/null"><data:post .title="Pasang Widget Popular Post Keren 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 == &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=" khususnya untuk blogger yang memakai cms blogger Pasang Widget Popular Post Keren Valid AMP" expr:height="data:thumbnailSize" expr:src="data:post.thumbnail" expr:title="Pasang Widget Popular Post Keren Valid AMP" expr:width="data:thumbnailSize">                   </amp-img></a>                 </div> <div class="item-title"> <a expr:href="data:post.href" expr:title="Pasang Widget Popular Post Keren Valid AMP" href="https://www.blogger.com/null"><data:post .title="Pasang Widget Popular Post Keren 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=" khususnya untuk blogger yang memakai cms blogger Pasang Widget Popular Post Keren Valid AMP" expr:height="data:thumbnailSize" expr:src="data:post.thumbnail" expr:title="Pasang Widget Popular Post Keren Valid AMP" expr:width="data:thumbnailSize">                   </amp-img></a>                 </div> <div class="item-title"> <a expr:href="data:post.href" expr:title="Pasang Widget Popular Post Keren Valid AMP" href="https://www.blogger.com/null"><data:post .title="Pasang Widget Popular Post Keren 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.

Semoga bermanfaat..
Sumber https://www.merpatih.com/

Share this post