Home » » Membuat Thumbnail Tidak Bergambar Popular Post Jadi Bergambar

Membuat Thumbnail Tidak Bergambar Popular Post Jadi Bergambar

Popular post bawaan blogger memang keren, tapi ketika anda membuat postingan tanpa gambar maka popular post terkesan kurang enak untuk dilihat, maka dari itu untuk menampilkanya lebih menarik maka anda harus menyertakan snippet atau sebagian uraian kata, isi dalam konten, ukuran dapat anda tentukan, jika kalian menonaktifkan snippet dan hanya mengaktifkan thumbnail, apalagi terkesan kurang baik, karena hanya judul yang tampil.

thumbnail popular post


Untuk mempercantik blog salah satunya memang mengubah popular post.
Kenapa ? karena biasanya blogger professionalpun sering menerapkan popular post, bahkan ada yang mengasumsikan, popular post adalah bagian penting bagi blog.
Langsung saja ketopik utama, caranya seperti biasa.
Log in blogger
Template
Edit HTML
Cari popular post, jika sudah didapat berikut kode bawaan blogger :
 <b:widget id='PopularPosts1' locked='false' title='Artikel Populer Minggu ini :' 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 alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </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 alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </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>
    <b:include name='quickedit'/>
  </div>
</b:includable>
   </b:widget>
Bagian Teks yang saya beri warna merah adalah bagian penting untuk diubah maka ubah semua teks berwarna merah diatas dengan kode berikut :
  <!-- (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='http://2.bp.blogspot.com/-TMpb495qsCE/VNXw8qsri8I/AAAAAAAAA3U/3y74vxr77A4/s1600/img20141231_193039_1421304919940_1421305034380.jpg' expr:width='data:thumbnailSize'/>
</b:if>
</a>
</div>
              <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'>
<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='http://2.bp.blogspot.com/-TMpb495qsCE/VNXw8qsri8I/AAAAAAAAA3U/3y74vxr77A4/s1600/img20141231_193039_1421304919940_1421305034380.jpg' 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>
Teks berwarna biru adalah url link gambar, ganti dengan yang anda miliki. Simpan template, ingat kode html diatas akan muncul pada edit html (template) ketika anda sudah menambahkan sebelumnya jika belum, masuk layout atau tata letak, tambah gadgets, pilih entri populer atau popular post, lalu edit sesuai cara diatas, akan tampil thumbnail bergambar, walaupun postingan anda sebelumnya tidak menerapkan gambar, tampilan menjadi dimunculkanya gambar yang sudah kita tentukan dengan url img src teks berwarna biru pada koding diatas.

© If you want to copy Article, please provide the source

0 comments:

Post a comment

Silahkan berkomentar jika sempat, klik notify me/beritahu saya, agar ketika saya balas, ada pemberitahuan.
• Baru Mei 2015.
- No URL Promosi (except Open ID)
- No Live Link
- No Sara
- No Spamming

Posting Terbaru