Cara Pasang Popular Posts Valid AMP - informasiajib

Cara Pasang Popular Posts Valid AMP

Membuat serta memasang popular posts pada sebuah blog merupakan sebuah keharusan mengingat popular posts akan manampilkan postingan-postingan yang paling banyak di kunjungi dengan harapan para pembaca akan tertarik membacanya juga. Akan tetapi yang jadi permasalahaanya sekarang yaitu popular post pada blog AMP dan yang bukan AMP memiliki kode serta cara pemasangan yang sedikit berbeda.

Cara Pasang Popular Posts Valid AMP

Jangan heran jika blog kalian terdeteksi tidak valid AMP karena masih menggunakan popular posts versi blog non AMP atau yang bukan AMP. Oleh sebab itu saya akan memberikan tips bagaimana sih cara memasang dan membuat widget Popular posts agar Valid AMP dan tidak error di mesin Validator. Caranya cukuplah mudah, kalian hanya perlu mengikuti tutorial singkat dibawah ini dengan benar.

Cara Memasang dan Membuat Popular Posts versi  AMP

  • Login ke Blogger.com > Tema > Edit Tema
  • Cari kode <b:widget id='PopularPosts1
  • Kemudian hapus semua kode widget PopularPosts1

  • Ganti Kode yang dihapus tersebut dengan kode script dibawah ini
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1' visible='true'> <b:includable id='main'> <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='!data:showThumbnails'> <b:if cond='!data:showSnippets'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. --> <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 700) : data:post.thumbnail' var='image'> <amp-img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='170' layout='responsive' width='280'/> </b:with> </a> </div> <b:else/> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <amp-img expr:alt='data:post.title' expr:title='data:post.title' height='70' src='//2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s100/no-thumbnail.png' width='100'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <b:if cond='data:showSnippets'> <div class='item-snippet'><data:post.snippet/></div> </b:if> </div> <div class='clear'/> </b:if> </li> </b:loop> </ul> </div> </b:includable> </b:widget>
  • Pastekan kode CSS dibawah ini tepat di atas </style> 
* popular post */ #PopularPosts1 ul{padding:10px 0;margin-top:-15px}.PopularPosts .item-thumbnail{margin:0}.PopularPosts .widget-content ul{padding:0;margin-top:-7px}.PopularPosts .item-title a{text-decoration:none;font-weight:700;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s}.PopularPosts .item-title{padding-bottom:.4em}.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#e8554e}.PopularPosts img{width:100%;height:100%}.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0;padding:0 0 10px;line-height:1.3em;position:relative;border-bottom:1px solid #f1f1f1}.PopularPosts li .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}.PopularPosts li:hover .item-snippet{top:20%;opacity:1;visibility:visible}.PopularPosts li .item-thumbnail{margin:10px 0;overflow:hidden;float:left}.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}.PopularPosts li:first-child .item-content{position:relative}.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
  • Simpan Tema dan lihat hasilnya.
Show Comments

0 Response to "Cara Pasang Popular Posts Valid AMP"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel