Cara Membuat Widget Popular Post Di Blog AMP

Seperti yang sudah saya jelaskan sebelumnya mengenai Valid pada ablog, kali ini saya akan membahas mengenai Widget Popular Post untuk Blog . Sebenarnya ini yaitu Postingan lanjutan dari yang sebelumnya Cara Mudah Buat Popular Post Amp Slide, disitu dijelaskan seputar modifikasi Widget Popular post secara Slide atau Crousel dan untuk postingan kali ini yaitu postingan lanjutannya namun lebih ditekankan Widget Popular post semoga Valid .

Pemasangan Widget Popular post di Blog ini sangat membantu juga bagi pengunjung untuk melihat lebih jauh isi dari perkembangan Artikel yang kita buat, dari sejumlah yang ada di Blog kita pengunjung dapat melihat Populer atau trendnya dari isi blog tersebut, hal ini pun juga berlaku untuk mesin pengindex semoga dapat merayapi dengan mudah konten dari blog tersebut, bahkan beberapa pakar SEO pun menyarankan untuk pemasangan Widget Popular Post itu sangat disarankan sebagai menu Navigasi untuk Blog.

Terkait penjelasan diatas kali ini saya akan mengembangkan Cara Membuat Widget Popular Post Di Blog , menyerupai yang sudah saya jelaskan diatas pemasangan Widget Popular Post pada blog sangat di sarankan dan memang sepertinya Wajib, yang saya bagikan ini yaitu Widget Popular Post yang akan kita edit sebab biasanya Widget Popular post bawaan dari Blogger masih standar dan belum valid amp, untuk itu bagaimana cara penerapannya simak berikut ini.

Langkah Awal

Anggap saja di Blog Sobat belum ada Widget Popular post dan ingin menambahkannya caranya teman buka Dasbor Blogger pilih Layout kemudian pada adegan sidebar pilih Add New Gadget untuk ditambahkan Widget Popular Post pilih Entri Popular.

Langkah ke dua

Masih di Dasbor Blogger teman pilih Template kemudian Pilih Edit HTML kemudian di kafe klik Lompat ke Widget kemudian Pilih Popular Post atau PopularPost1, tiap tampilan pada menu edit berbeda-beda tergantung template yang dipakai.

Langkah ke tiga

Setelah masuk ke isyarat Popular post yang dimaksud silahkan Sobat ganti semuanya dengan isyarat 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCdaLBSpHPFHrufRujGOHXFi2vlf5IbQQ0Ew3AZ94y1ybofhxFQMdlRDVAK4caZrDk7XM-skFuxDtRaU7u3CjEZqGhhqJCwfoAqiVpnpJY0WCV19_Tw_lynPaeT5CiX5P-YGqBWiWimCjU/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> 

Perhatikan ada sedikit perubahan di ukuran gambar dari 1000 jadi 700 dan perubahan tag amp bermetamorfosis amp-img, kemudian kita lanjut ke langkah berikutnya.

Langkah ke Empat
Silahkan tambahkan isyarat CSS berikut ini sisipkan diantara 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} 

Perhatikan betul tiap isyarat yang disisipkan semoga tidak terjadi error, biasakan terlebih dahulu di Pratinjau atau preview sebelum postingan di Publikasikan. Baiklah teman ini saja yang mampu saya bagikan semoga bermanfaat bila ada yang ingin menambahkan atau mengembangkan pengalaman silahkan di kolom komentar terima kasih sudah berkunjung.