Fixed Slide Blogger Popular Posts AMP HTML

Ditulis oleh: Adhy Suryadi

Ditulis pada: 1/18/2017

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

Namun tentu saja untuk widget melayang harus memiliki tombol close agar widget bisa dihilangkan ketika pembaca tidak menghendakinya atau dianggap mengganggu.

Untuk membuat tombol close di AMP HTML menjadi sedikit ribet (jika belum mengetahuinya) karena tidak bisa pakai javascript. Bisa saja menggunakan amp-accordion, tapi lumayan ribet juga ngaturnya.

Kemudian saya mencari cara agar bisa dengan hanya css tanpa javascript namun tanpa menggunakan hash, akhirnya saya menemukan di sini dengan label checked.

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

Untuk membuat seperti itu silahkan ikuti langkahnya di bawah ini.

Silahkan copy kode 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/AVvXsEh8_yt8b7Cno5ZYMDmGsep9_F23qEfWf5Fomo4cJwZupp9GtK1ovuZsc7Y-RMnLL74CwXNErwOlPmDNoMSYmuvuQMKKPtzdPf8pX70t0cBD65__qcYep4nJhcFdtdupAFx1z96yWJdbSo7v/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 kode left menjadi right.

Kemudian copy kode HTML di bawah ini dan simpan di atas footer blog di edit HTML seperti 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 seperti di bawah ini.

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