Menambahkan Default Image Thumbnail di Popular Posts Blog

Baca Juga

Cara Menambahkan Gambar Thumbnail Default di Popular Posts Blog.

YANG dimaksud Gambar Thumbnail Default Popular Post  adalah gambar pengganti otomatis yang akan tampil, jika posting yang ada widget popular post tidak ada gambarnya. Tentu, ini jika Anda memilih tampilan popular post dengan gambar.

Gambaran, contoh, atau penampakannya seperti dalam gambar ilustrasi posting ini.

Tentu, yang terbaik adalah segera mengedit posting tersebut dengan menambahkan gambar. Namun, jika Anda "malas" menambahkan gambar, maka gunakan saja kode berikut ini untuk mengisi kekosongan image thumbnail itu.

Cara Menambahkan Gambar Thumbnail Default di Popular Posts Blog

1. Template > Edit HTML
2. Temukan kode berikut ini:

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

3. Di bawah kode tersebut, ada kode di bawah ini. Scroll dikit untuk menemukannya:

<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
  <b:if cond='data:post.thumbnail'>
 <div class='item-thumbnail'>
   <a expr:href='data:post.href' target='_blank'>
  <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
   </a>
 </div>

4. Tambahkan kode berikut ini tepat di bawah kode no.3 tadi!

 <b:else/>
     <div class='item-thumbnail'>
      <a expr:href='data:post.href' target='_blank'>
       <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvskdWfmv10A7tqPNTdskXf33qIYUB_gtoWRW7vElrsyCrQaEoeARBqQ9M_inhrqYd1JrbXNBU6mlfQXkEzX_Zef_8Ga1G_WvJDWATshsON-jlcuZAb_jwIO3vlUaeun2TD2B-xvQ74vqP/s72-Ic42/no-image-available-default-72.png' width='72'/>
      </a>
     </div>

5. Save Template!

Lihat hasilnya. Jika gagal, maka kode no. 4 tersebut tambahkan lagi di bawah kode berikut ini:

<!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>

Cari saja kode yang mirip karena kode widget popular post itu bawaan blogger, jadi gak akan jauh banget bedanya --kalaupun beda.

KODE LENGKAP
Jika bingung dengan tips di atas, gunakan saja kode lengkap berikut ini. Sebelumnya, hapus dulu widget popular post yang sudah dipasang.

   <b:widget id='PopularPosts1' locked='true' 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 == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (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 == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
<b:else/>
     <div class='item-thumbnail'>
      <a expr:href='data:post.href' target='_blank'>
       <img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvskdWfmv10A7tqPNTdskXf33qIYUB_gtoWRW7vElrsyCrQaEoeARBqQ9M_inhrqYd1JrbXNBU6mlfQXkEzX_Zef_8Ga1G_WvJDWATshsON-jlcuZAb_jwIO3vlUaeun2TD2B-xvQ74vqP/s72-Ic42/no-image-available-default-72.png' width='72'/>
      </a>
     </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
    <b:else/>
     <div class='item-thumbnail'>
      <a expr:href='data:post.href' target='_blank'>
       <img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvskdWfmv10A7tqPNTdskXf33qIYUB_gtoWRW7vElrsyCrQaEoeARBqQ9M_inhrqYd1JrbXNBU6mlfQXkEzX_Zef_8Ga1G_WvJDWATshsON-jlcuZAb_jwIO3vlUaeun2TD2B-xvQ74vqP/s72-Ic42/no-image-available-default-72.png' width='72'/>
      </a>
     </div>
              </b:if>
              <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>
  </div>
</b:includable>
   </b:widget>

Good Luck & Happy Blogging! (http://www.contohblog.com).*

Sumber