Fixed Slide Blogger Popular Posts Amp Html

Masih ingat dengan postingan aku perihal carousel popular posts AMP HTML dengan auto slider? Nah kali ini aku punya inspirasi untuk menciptakan widget tersebut menjadi fixed slide blogger popular posts, sehingga widget akan melayang di pojok bawah blog.

Namun tentu saja untuk widget melayang harus mempunyai tombol close biar widget dapat dihilangkan dikala pembaca tidak menghendakinya atau dianggap mengganggu.

Untuk menciptakan tombol close di AMP HTML menjadi sedikit ribet (jika belum mengetahuinya) alasannya tidak dapat pakai javascript. Bisa saja memakai amp-accordion, tapi tidak mengecewakan ribet juga ngaturnya.

Kemudian aku mencari cara biar dapat dengan hanya css tanpa javascript namun tanpa memakai hash, jadinya aku menemukan di sini dengan label checked.

Untuk penampakannya dapat lihat di pojok kiri bawah blog ini (kalau belum dirubah lagi hehehe.... )

Untuk menciptakan menyerupai itu silahkan ikuti langkahnya di bawah ini.

Silahkan copy arahan CSS di bawah ini, simpan di style amp-custom.

 #PopularPosts2.PopularPosts{background:#fff;padding:0;width:300px;border:1px solid #dedede;border-bottom:none;border-left:none}
 #PopularPosts2.PopularPosts amp-img{width:300px;height:180px;}
 #PopularPosts2.PopularPosts h2{position:relative;overflow:hidden;margin:0 10px 10px 0;padding:10px 0 0;font-size:22px;font-weight:900;text-transform:uppercase;color:#141924;line-height:1}
 #PopularPosts2.PopularPosts h2 div{padding:0 10px;display:inline;float:left;}
 #PopularPosts2.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;}
 #PopularPosts2.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}
 
 .slider1{position:fixed;bottom:0;left:0;z-index:9999}
 .slider1 label{display:block;position:absolute;top:0;right:0;font-size:18px;font-weight:bold;width:20px;height:20px;line-height:20px;text-align:center;background:#fff;border:1px solid #dedede;cursor:pointer;z-index:9999}
 .slider1 input{position:absolute;right:-999em;opacity:0}
 .slider1 input[type=checkbox]:checked+div{display:none}

Kalau ingin widget berada di sebelah kanan, maka ganti arahan left menjadi right.

Kemudian copy arahan HTML di bawah ini dan simpan di atas footer blog di edit HTML menyerupai gambar di bawah ini (ini hanya contoh, tentunya akan berbeda dengan blog Anda).

Kode HTML:

 <div class='slider1'>
 <label for='item-1'>&amp;times;</label>
 <input id='item-1' name='one' type='checkbox'/>
 <b:section class='slide' id='slide' preferred='yes'>
   <b:widget id='PopularPosts2' 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>
 </b:section>
   </div>

Dan pastikan sudah memasang js amp-carousel menyerupai di bawah ini.

 <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