3

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/AVvXsEjfRZgf5L-yzih9ouuUi7RY8UuHunSbbaOJ3L1Fegu_eI1ZfFWSF6XZAIPYblQnIwBS8MEJ04Ey2rrUdNmEjYfYr1m77eVVUHP9OjY3X_E4_CCs7eYintcg8Ef0IGy197SomEtVEJqhtjU/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/AVvXsEjfRZgf5L-yzih9ouuUi7RY8UuHunSbbaOJ3L1Fegu_eI1ZfFWSF6XZAIPYblQnIwBS8MEJ04Ey2rrUdNmEjYfYr1m77eVVUHP9OjY3X_E4_CCs7eYintcg8Ef0IGy197SomEtVEJqhtjU/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..!!!

Posting Komentar

  1. tengkiu sob,saya tinggal ganti aja tu url gambar.masak dari sononya gambar gunung -_-

    BalasHapus
  2. Wahh... makasih nih code nya, di copas dulu ke Blog ane

    semoga sukses :-D

    BalasHapus

Mohon maaf bila admin tidak bisa langsung membalas atau pun langsung berkunjung kembali ke blog sahabat blogger yang telah berkunjung ke sini. Kalian bisa meninggalkan komentar yang layak dengan menggunakan Nama dan URL blog sobat. Saya mengaktifkan filter dan comment moderator full sehingga setiap komentar pasti saya baca dan jika memang itu saya rasa harus dijawab, pasti saya akan memenuhinya.

Hanya komentar yang memang saya anggap pantas yang akan diterbitkan. Sekalipun itu kritikan atau ejekan, jika memang itu layak untuk di bahas.

 
Top