Default Thumbnail Pada Auto Readmore Tanpa Javasript

Default Thumbnail Pada Auto Readmore Tanpa Javasript – Postingan kali ini memang membahas tentang cara membuat auto readmore tanpa javascript. Tetapi arahnya lebih mengarah ke default thumbnail pada halaman utama auto readmore untuk postingan yang tidak memiliki gambar di dalamnya. Contohnya dapat dilihat pada gambar di bawah ini:

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/AVvXsEitmyAFj1JqFGc08rBJ_yxSCrBeg_fPsPKU05vbD69iaLMZ7Zl0Ku1ycQ-lhBMFmJepqYNOebeaeGn2eA4opdlF9Q5tL7zYw0oYx4RoQSkj5qpbh7OBdBnJG5q-Dmb8H-YiUfHHpBQw2X8/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.

Baca Juga: