Widget Popular Post bawaan Blogger saat ini belum valid AMP. Dibutuhkan beberapa trik agar widget popular post pada template blogger valid AMP.
Adapun caranya adalah sebagai berikut:
Buka Dashboard Blogger >> Klik Layout >> Pada bagian sidebar klik Add New Gadget untuk menambahkan widget Popular Post yang baru >> Kemudian pilih Widget Popular Post.
Ganti dengan kode berikut:
Selesai. Simpan Template Anda.
Catatan:
Untuk membuat widget popular post valid AMP di blogger, Anda harus memasang template yang valid AMP juga. Jika belum punya dapat di download pada link berikut ini. Siniladom Free AMP Blogger Template
Adapun caranya adalah sebagai berikut:
Langkah 1
Jika template bawaan belum memiliki widget popular post tambahkan dengan cara berikut:Buka Dashboard Blogger >> Klik Layout >> Pada bagian sidebar klik Add New Gadget untuk menambahkan widget Popular Post yang baru >> Kemudian pilih Widget Popular Post.
Langkah 2
Klik Template >> klik Edit HTML >> Kemudian Klik Lompat ke Widget >> pilih Popular Post. Lihat gambar berikutCara mencari Widget Popular Post dalam Editor Template Blogger |
Langkah 3
Selanjutnya hapus seluruh kode widget popular post bawaan blogger seperti terlihat dalam gambar berikut:Hapus Widget Popular Post Bawaan Blogger |
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1' visible='true'>Jika diperhatikan pada kode yang berwarna, ada sedikit perubahan yaitu pada ukuran gambar dari 100 menjadi 700, dan tag
<b:includable id='main'>
<b:if cond='data:title != ""'><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 ? "item-content" : "item-thumbnail-only"'>
<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC-AYKv4coVyAtbuLBnluVMk-ubuYXQ7__x9NcqVzdtCVL8fG95qW7nw6dWZWjjR0rWFmVgyhyphenhyphen8TrR7VhXfhvGUwLxNUYiSuajU8j91nX1pNHEyOIW2YfyPd_xRXQ1P1BC6wZQzxtHx91H/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>
img
menjadi amp-img
Langkah 4
Tambahkan kode CSS berikut di antara tag<style amp-custom='amp-custom'>
dan </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}
Selesai. Simpan Template Anda.
Catatan:
Untuk membuat widget popular post valid AMP di blogger, Anda harus memasang template yang valid AMP juga. Jika belum punya dapat di download pada link berikut ini. Siniladom Free AMP Blogger Template
0 comments:
Post a Comment