Cara Menambahkan gambar Default pada Popular Post

Dalam postingan terdahulu, yaitu Cara membuat Popular Post dengan Thumbnail Horizontal, Admin ngalor ngidul pernah membahas tentang thumbnail default popular post ini. Dimana setiap postingan yang tidak memiliki gambar akan terlihat kosong. Dan tentu saja itu sangat tidak nyaman dilihat. Apalagi jika kita menerapkan fitur popular post ini tanpa deskripsi.

Oleh sebab itu ada baiknya jika kita sedikit memodifikasi kode widget bawaan dari blogger tersebut

agar ketika suatu postingan yang tidak memiliki gambar menjadi postingan populer, maka secara otomatis akan terlihat tetap memilik gambar.

Ok..
Langsung saja ke Cara Menambahkan gambar Default pada Popular Post.
1. Seperti biasa, login ke dashboard blogger kemudian pilih design => Edit HTML.
2. Centang Expand Widget Template.
3. Cari kode:

<b:widget id='PopularPosts1' locked='false' Posts' title='Popular type='PopularPosts'/>

4. Ganti semua kode kebawahnya sampai kode </b:widget> pertama yang anda temukan dengan kode dibawah ini:

 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

<b:includable id='main'>

  <b:if cond='data:title'><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 == "false"'>

          <b:if cond='data:showSnippets == "false"'>

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

          <b:if cond='data:showSnippets == "false"'>

            <!-- (3) Show only thumbnails -->

            <div class='item-thumbnail-only'>

              

                <div class='item-thumbnail'>

   <a expr:href='data:post.href' expr:title='data:post.title'>

    <b:if cond='data:post.thumbnail'>

                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

       <b:else/>

        <img alt='' border='0' expr:height='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheq6WwGk9LWwF-odUuvkC94LpSSBc5gD82XRX8mpFvLnOiMPbirBVPD3qQxbR_woq6YNTUlqD-cfrrrWmGZ6KhI1ruabLrM9tJ5mTbrcEHauBo35khQcuoOEkCUB6i9Ef2mefTTNVVCJE/s72-c/default.png' expr:width='data:thumbnailSize'/>

       </b:if>

                  </a>

                </div>         

             </div>

            <b:else/>

            <!-- (4) Show snippets and thumbnails -->

            <div class='item-content'>

                <div class='item-thumbnail'>

   <a expr:href='data:post.href' expr:title='data:post.title'>

    <b:if cond='data:post.thumbnail'>

                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

       <b:else/>

        <img alt='' border='0' expr:height='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheq6WwGk9LWwF-odUuvkC94LpSSBc5gD82XRX8mpFvLnOiMPbirBVPD3qQxbR_woq6YNTUlqD-cfrrrWmGZ6KhI1ruabLrM9tJ5mTbrcEHauBo35khQcuoOEkCUB6i9Ef2mefTTNVVCJE/s72-c/default.png' expr:width='data:thumbnailSize'/>

       </b:if>

                  </a>

                </div>       

              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

              <div class='item-snippet'><data:post.snippet/></div>

            </div>

            <div style='clear: both;'/>

          </b:if>

        </b:if>

      </li>

      </b:loop>

    </ul>

    <b:include name='quickedit'/>

  </div>

</b:includable>

</b:widget>

*** Ganti kode warna merah tersebut dengan url gambar anda sendiri.
5. Save Template.

Untuk menemukan kode tersebut, pastikan widget popular post telah dipasang diblog anda.
Semoga berhasil..!!!

Share this post