Default Thumbnail Pada Auto Readmore Tanpa Javasript

Gambar yang diberi panah merah di atas adalah default thumbnail (gambar default) artikel atau postingan yang tidak berisi gambar di dalamnya. Bagi yang mempertahankan validasi HTML5 templatenya, harap tetap tenang, karena cara ini tetap valid HTML5. Untuk membuatnya cukup mudah, hal pertama yang anda sediakan adalah secangkir kopi panas yang anda buat sendiri. Hehehehe

Berikut cara membuat Default Thumbnail pada Auto Readmore Tanpa Javascript.
Langkah 1: Simpan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>

 .post-thumbnail{background:#4e4d4d;width:88px;height:88px;text-align:center;float:left;position:relative;margin-right:10px;margin-top:10px;border:1px solid #555;}
.post-thumb {width:72px;height:72px;transition:all .3s ease-in;padding:0;margin-top:5px;margin-left:5px;border:3px solid #5e5e5e;}
.post-thumb:hover{transition:all .3s ease-in;opacity:.7}

Langkah 2: Copy kode di bawah ini dan letakkan di bawah kode <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.url'>
<div class='post-thumbnail'>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumb' expr:alt='data:title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title' height='72' width='72'/>
<b:else/>
<img class='post-thumb' expr:alt='data:title' expr:title='data:post.title' height='72' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3_p-Hey8cLxph2EM9SMQ8zgVNuOkX8wRxH7BucYHDNHqjFiaf65jM2QvtUPU5RNlF3zC3Eoce2odiyWE5-tQJh4Hid3DoE1WZf6E6292UfBCRvRsn7KsD4p0mOZ2KrcbO8SeQaamBnFw/s1600/icon72x72.png' width='72'/>
</b:if>
  </div>
</b:if>

</b:if>
</b:if>

Kode disetiap template berbeda, cara di atas adalah yang saya gunakan di template yang saya gunakan ini. Anda juga bisa menyimpannya di bawah

 <h2 class='post-title'>...</h2>

atau di atas

<h3 class='post-title'>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Intinya, sesuaikan dengan template anda.
Langkah 3: Simpan template.
Demikian artikel ini, selamat mencoba.

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit