Thursday, August 17, 2017

Cara menampilkan thumbnail di homepage blogspot

Sobat blogger..
Pada kesempatan ini kita akan mencoba menampilkan thumbnail post atau biasa kita menyebutnya dengan gambar posting agar tampil di halaman home atau halaman depan.

Mari memulai,
Cari kode seperti ini:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>

Lakukan pada hasil pencarian yang pertama.
Hasil pencarian tadi adalah muncul kode seperti ini:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad' style='text-align:center;'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
</b:if>
       <!-- clear for photos floats -->
      </div>

Dan letakkan kode berikut ini tepat diatas <data:post.snippet/>

<b:if cond='data:post.thumbnailUrl'> 
<a expr:href='data:post.url' expr:title='data:post.title'><img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='150px' width='100px'/>
</a> 
</b:if>

Sehingga menjadi seperti ini:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'> 
<a expr:href='data:post.url' expr:title='data:post.title'><img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='150px' width='100px'/>
</a> 
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad' style='text-align:center;'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
</b:if>
       <!-- clear for photos floats -->
      </div>

Langkah selanjutnya, tambahkan kode CSS diatas </head>

.post-thumbnail{float:left;margin-right:10px}

Lalu klik simpan..
Dan lihat hasilnya!

Semoga bermanfaat..

IBX59E89E6F98B8E