

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>
Langkah 3: Simpan template.
Demikian artikel ini, selamat mencoba.

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;}Langkah 2: Copy kode di bawah ini dan letakkan di bawah kode <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
.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}
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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
Intinya, sesuaikan dengan template anda.<h2 class='post-title'>...</h2>atau di atas
<h3 class='post-title'>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Langkah 3: Simpan template.
Demikian artikel ini, selamat mencoba.
Share this
10 komentar
https://www.blogger.com/profile/12655321145201165620
2013-12-26T08:30:00+07:00https://www.blogger.com/profile/12655321145201165620
salam kenal
thanxs
https://www.blogger.com/profile/13162875744493565460
2013-12-26T08:30:00+07:00https://www.blogger.com/profile/13162875744493565460
jadi postingan yang tampil dihalaman depan, gak tetap eksis dengan gambar. :D
salam kenal kembali.
https://www.blogger.com/profile/03415932086796785956
2013-12-26T08:30:00+07:00https://www.blogger.com/profile/03415932086796785956
https://www.blogger.com/profile/13162875744493565460
2013-12-26T08:30:00+07:00https://www.blogger.com/profile/13162875744493565460
https://www.blogger.com/profile/13162875744493565460
2013-12-26T08:30:00+07:00https://www.blogger.com/profile/13162875744493565460
sukses juga buat anda, :D
https://www.blogger.com/profile/13162875744493565460
2013-12-26T08:30:00+07:00https://www.blogger.com/profile/13162875744493565460
https://www.blogger.com/profile/18210583725956103957
2013-12-26T08:30:00+07:00https://www.blogger.com/profile/18210583725956103957
Image
.pre
,code
, atauquote
.Salin Kode!
lalu paste ke kolom komentar.image quote pre code