Cara Menampilkan Thumbnail di Homepage Blogspot

Cara Menampilkan Thumbnail di Homepage Blogspot

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!

Related Posts