Cara Membuat Widget Popular Post Grid Style Keren Responsive di Blog

Santos el Salam

16 Juni 2021

Ingin memasang widget bentuk grid untuk tampilan homepage blog tapi bukan widget featured post?, mungkin anda bisa gunakan widget popular post berikut ini yang sudah dimodifikasi agar tampilannya keren seperti berita-berita headline di situs berita. Atau bagi anda yang menggunakan blognya sebagai toko online, widget popular post keren ini juga cocok untuk anda pakai berjualan di blog anda. 

Ya, memiliki blog yang banyak pengunjungnya memang menjadi motivasi tersendiri agar kita semangat dalam mengelola blog yang kita miliki. Agar pengunjung semakin betah dan kerasan, ada baiknya kita desain tampilan blog kita dengan menambahkan widget atau navigasi-navigasi penting untuk mendukung kebutuhan pembacanya. Salah satu di antaranya yaitu dengan memasang widget popular post. 

Pada umumnya, widget yang berfungsi untuk menampilkan daftar postingan populer di kalangan pembaca ini ditaruh di bagian sidebar dengan bentuk list. Nah, kali ini kita akan membuat sesuatu yang berbeda yakni membuat widget popular post bergambar bentuk grid dan memasangnya di halaman muka (homepage) layaknya widget featured post. Untuk jumlah postingan cukup 4 saja agar menyesuaikan layar PC atau Hp (responsive). Bisa saja diatur lebih namun anda mesti paham kode CSS untuk mengatur tampilannya lagi. 

Kurang lebih seperti gambar di atas tampilan widget popular post style gridnya. Jika anda berminat, silahkan simak langkah-langkah berikut ini untuk cara pemasangannya.

1. Buka akun blogger anda.

2. Pilih menu thema dan klik edit html.

3. Cari kode </head> dan letakkan kode berikut ini di atasnya. 

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<style type='text/css'>

/* Grid Popular Post Keren*/

#popularpostgrid ul li:hover .item-title a{color:#07ACEC!important}

#popularpostgrid ul li .item-title a{font-size:18px;font-family:&#39;Oswald&#39;;line-height:normal;font-weight:bold;margin-top:15px;line-height:normal;letter-spacing:-0.4px;text-transform:none;text-shadow:1px 1px grey;color:#fff!important}

#popularpostgrid ul{margin:0!important;padding:0!important}

#popularpostgrid ul li{width:23%;float:left;height:250px;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 100%);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);border-radius:5px;padding:0px!important;margin-left:15px;margin-right:0px;margin-bottom:10px;list-style-type:none}

#popularpostgrid .item-thumbnail{margin:0}

#popularpostgrid img{width:100%;height:250px;border-radius:5px;display:block;position:relative}

#popularpostgrid .item-title{display:block;position:relative;text-align:left;margin-top:-60px;margin-left:10px;margin-right:10px;height:90px;}

@media screen and (max-width:800px){

#popularpostgrid ul li{width:47%;height:320px;margin-left:15px;}

#popularpostgrid img{height:320px}

#popularpostgrid .item-title{margin-left:15px;margin-right:15px} 

}

@media screen and (max-width:600px){

#popularpostgrid ul li{width:45%;margin-left:17px}}

@media screen and (max-width:400px){

#popularpostgrid ul li{width:45%;height:150px;margin-left:11px;}

#popularpostgrid img{height:150px;}

#popularpostgrid ul li .item-title a{font-size:13px;}

#popularpostgrid .item-title{margin-top:-45px;margin-left:5px;margin-right:5px}}

</style>

</b:if>

</b:if>

4. Selanjutnya cari kode <div id='wrapper'> atau kode <div id='content-wrapper'> lalu letakkan kode berikut ini di bawahnya. 

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:section class='popularpostgrid' id='popularpostgrid' maxwidgets='1' showaddelement='yes'>

  <b:widget id='PopularPosts16' locked='false' title='' type='PopularPosts' version='1'>

    <b:widget-settings>

      <b:widget-setting name='numItemsToShow'>4</b:widget-setting>

      <b:widget-setting name='showThumbnails'>true</b:widget-setting>

      <b:widget-setting name='showSnippets'>false</b:widget-setting>

      <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>

    </b:widget-settings>

    <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, 450, &quot;300:200&quot;)                                  : data:post.thumbnail' var='image'>

                    <img alt='Popular Posts' border='0' expr:src='data:image'/>

                  </b:with>

                </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>

</b:section>

<div class='clear'/>

</b:if></b:if>

5. Simpan template anda kembali. 

Silahkan dilihat hasilnya. Anda juga bisa buka menu layout (tataletak) untuk menghapus judul widget (jika tidak perlu) atau mengubah pengaturan waktunya (most viewed) pada widget popular post yang sudah terpasang di sana. 

Demikianlah cara membuat widget popular post Grid Style Keren Responsive di Blog. Semoga bermanfaat.

 

Labels: Blogging

Thanks for reading Cara Membuat Widget Popular Post Grid Style Keren Responsive di Blog. Please share...!

Facebook

Twitter