✔ 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 memakai cms blogger. Pemasangan widget popular post dan widget lainnya menyerupai 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 arahan CSS nya. Kode ini dapat anda pasang di template blogger AMP anda lho!
1. Yang diharapkan pertama kalinya ialah menambahkan Widget Popular Post di sajian Tata Letak atau Layout pada dashboard blogger. Lalu pilih tambahkan widget popular post.
2. Kemudian yang kedua, masuk ke sajian Tema dan klik Edit tema.
3. Tambahkan kode CSS popular post di template AMP anda. Silahkan copy dan paste arahan berikut ini di antar akode amp-custom.
4. Belum selesai, kini anda perlu mengganti semua arahan widget popular post yang tadi sudah ditambahkan, dan ganti dengan arahan 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, aku akan membagikannya. Lengkap dengan tutorial dan arahan CSS nya. Kode ini dapat anda pasang di template blogger AMP anda lho!1. Yang diharapkan pertama kalinya ialah menambahkan Widget Popular Post di sajian Tata Letak atau Layout pada dashboard blogger. Lalu pilih tambahkan widget popular post.
2. Kemudian yang kedua, masuk ke sajian Tema dan klik Edit tema.
3. Tambahkan kode CSS popular post di template AMP anda. Silahkan copy dan paste arahan 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 arahan widget popular post yang tadi sudah ditambahkan, dan ganti dengan arahan 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. Sumber http://ampidn.blogspot.com
0 Response to "✔ Cara Pasang Widget Popular Post Keren Dan Valid Amp"
Posting Komentar