Membuat Popular Post With AMP Slide Auto Play Seperti Kompi Ajaib di Sidebar

Description: Cara Membuat Popular Post With AMP Slider Auto Play Seperti Kompi Ajaib di Sidebar Blogger ~ Siapa yang tidak tahu blog Kompi Ajaib, yaps blog tersebut merupakan blog sharing tutorial blogger maupun disain blogger. Cara ini sudah saya testing terlebih dahulu sebelum membuat postingan ini, dan hasilnya tidak ada error sama sekali. Pada Carousel kita hanya bisa menggunakan image tanpa bisa menggunakan caption karena terdapat kode white-space: nowrap!important; agar item berjajar kesamping sehingga menyebabkan text yang melebihi area tidak bisa menjadi berbasis karena text akan ada dalam satu baris kecuali di akali dengan text-overflow: ellipsis; dan pada carousel tidak bisa menggunakan autoplay.

Sementara pada slide kita bisa menggunakan autoplay dan caption. Namun item yang ditampilkan tidak sejajar seperti carousel, melainkan satu-persatu. Berikut tutorial yang bisa Anda terapkan di blog Anda.

Membuat Popular Post With AMP Slide Autoplay di Sidebar

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda cari kode HTML Popular Post dan ganti kode HTML Popular Post tersebut dengan kode dibawah 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 :

Selanjutnya Copy kode dibawah ini diatas kode ]]></b:skin> atau </style>

#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/AVvXsEgNIu8wn9z9XEQ-VtiwcK3otFrLLK9q_6mm0lescf_8dqWMQkSWXPv9Gsx6Z4wYJJx7xql-iT-tsm6qM3yrv2NKy2y5G1Zd5EHal3b3lZfQSQ1oH_mBPNV-IoM5KO6g27hUdbKVmqcEH-PY/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}

Langkah ketiga :

Terapkan kode dibawah ini diatas Tag </head>

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

Jika diblog Anda sudah terpasang kode tersebut, Anda tidak perlu mengikuti Langkah ketiga tersebut Perlu Anda ketahui, ternyata di Blogger kita bisa menampilkan lebih dari satu buah widget Popular Post, dengan syarat menggunakan id widget yang berbeda yang secara default memiliki id="Popular Post1". Untuk widget kedua dan seterusnya bisa menggunakan id="Popular Post2" dan seterusnya. Dan setting-nya pun bisa berbeda, misalnya untuk widget pertama menampilkan popular post "All Times" sementara widget satunya dengan "Last 7 days".

Terimakasih telah berkunjung, semoga Anda betah diblog ini. Jangan lupa untuk Like dan Share postingan ini untuk berkembangnya blog ini.

Source : http://www.kompiajaib.com/2016/12/blogger-popular-posts-with-amp-slide.html