Blogger Popular Posts With Amp Slide Autoplay On Sidebar

Masih menyambung dari postingan sebelumnya wacana modifikasi widget popular post Blogger dengan amp-carousel, sekarang kita akan memodifikasi widget popular post menjadi slide dengan autoplay.

Mungkin ada yang bertanya, "Apa bedanya carousel dan slide yang sama-sama memakai amp-carousel?"

Pada carousel kita hanya sanggup memakai image tanpa sanggup memakai caption alasannya ialah terdapat kode white-space: nowrap!important; biar item berjejer ke samping sehingga menyebabkan text yang melebihi area tidak sanggup menjadi berbaris alasannya ialah text akan ada dalam satu baris kecuali diakali dengan text-overflow: ellipsis; dan pada carousel tidak sanggup memakai autoplay.

Sementara pada slide kita sanggup memakai autoplay dan caption. Namun item yang tampil tidak berjejer menyerupai carousel, melainkan tampil satu per satu.

Untuk demo popular post dengan slider sanggup dilihat di sidebar.

Dan bagi yang belum tahu, ternyata di Blogger kita sanggup menampilkan lebih dari satu buah widget popular post dengan syarat memakai id widget yang berbeda yang secara default memiliki id="PopularPosts1". Unuk widget kedua dan seterusnya sanggup menggunakan id="PopularPosts2" dan seterusnya. Dan setting-nya pun sanggup berbeda, misal untuk widget pertama menampilkan popular post "All times" sementara widget satunya dengan "Last 7 days". Contohnya di blog ini aku memakai 2 widget popular posts, di sidebar dan di atas footer.

Kembali lagi ke modifikasi popular posts dengan AMP slide dengan autoplay, bagi yang ingin mencobanya silahkan ikuti langkahnya di bawah ini.

Langkah Pertama

Silahkan ganti isyarat HTML widget popular posts dengan isyarat di bawah ini.

           <b:widget id='PopularPosts1' locked='false' title='Hot on this week:' type='PopularPosts' version='1' visible='true'>
             <b:includable id='main'>
                 <b:if cond='data:title != &quot;&quot;'><h2><div><data:title/></div></h2></b:if>
   <div class='widget-content popular-posts'>
 <amp-carousel autoplay='autoplay' delay='2000' height='180' layout='fixed-height' type='slides'>
       <b:loop values='data:posts' var='post'>
         <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><a expr:href='data:post.href'><data:post.title/></a></div>
             <div><data:post.snippet/></div>
           </b:if>
         <b:else/>
           <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
             <div class='slide'>
             <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
                 <a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
                   <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 300)                                  : data:post.thumbnail' var='image'>
                     <amp-img expr:alt='data:post.title' expr:src='data:image' height='180' width='300'/>
                   </b:with>
                 </a>
             </b:if>
                   <div class='caption'><data:post.title/></div>
             </div>
         </b:if>
       </b:loop>
 </amp-carousel>
   </div>
 </b:includable>
           </b:widget>

Langkah Kedua

Gunakan CSS style di bawah ini untuk memodifikasi tampilannya.

 #PopularPosts1.PopularPosts{background:#fff;padding:0}
 #PopularPosts1.PopularPosts amp-img{width:300px;height:180px;}
 #PopularPosts1.PopularPosts h2{position:relative;overflow:hidden;margin:0 10px 10px 0;padding:10px 0 0}
 #PopularPosts1.PopularPosts h2 div{padding:0 10px;display:inline;float:left;}
 #PopularPosts1.PopularPosts h2:after{content:'';float:left;position:absolute;top:12px;height:15px;margin:0;width:100%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis2e_yRG-HGn9a8RQrPfDnaYRcWmciwA8pEDyTHlZP4HTWKUdfcrbAIgb-OFZAERoBuA4mSTNrQ3It-xw22apLTokQbCl1RnCFw-hUGkZXRdbyIFrjvC3BQpmcwetxblaKfn5lAEwI-UUU/s1600/repeat-bg.png);opacity:.9;}
 #PopularPosts1.PopularPosts .slide .caption{position:absolute;bottom:-19px;left:0;right:0;padding:6px 8px 10px;background:rgba(0,0,0,.6);color:#ddd;font-size:smaller;max-height:30%;line-height:1.1em}

Dan pastikan Anda sudah menyimpan isyarat js amp-carousel menyerupai di bawah ini di atas </head>

 <script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/>

Sumber https://www.kompiajaib.com/

Share this post