Jan 23, 2017

Cara Membuat Widget Popular Post Di Blog AMP

Widget PopularPost

Seperti yang sudah saya jelaskan sebelumnya mengenai Valid AMP pada ablog, kali ini saya akan membahas mengenai Widget Popular Post untuk Blog AMP. Sebenarnya ini adalah 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 adalah postingan lanjutannya namun lebih ditekankan Widget Popular post agar Valid AMP HTML.

Pemasangan Widget Popular post di Blog AMP 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 agar 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 berbagi Cara Membuat Widget Popular Post Di Blog AMP, seperti yang sudah saya jelaskan diatas pemasangan Widget Popular Post pada blog sangat di sarankan dan memang sepertinya Wajib, yang saya bagikan ini adalah Widget Popular Post yang akan kita edit karena 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 sobat buka Dasbor Blogger pilih Layout kemudian pada bagian sidebar pilih Add New Gadget untuk ditambahkan Widget Popular Post pilih Entri Popular.

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

Langkah ke tiga
Setelah masuk ke kode Popular post yang dimaksud silahkan Sobat ganti semuanya dengan kode 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='//2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/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 berubah menjadi amp-img, kemudian kita lanjut ke langkah berikutnya.

Langkah ke Empat
Silahkan tambahkan kode 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 kode yang disisipkan agar tidak terjadi error, biasakan terlebih dahulu di Pratinjau atau preview sebelum postingan di Publikasikan. Baiklah sobat ini saja yang bisa saya bagikan semoga bermanfaat jika ada yang ingin menambahkan atau berbagi pengalaman silahkan di kolom komentar terima kasih sudah berkunjung.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.