![]() |
Default Thumbnail Pada Auto Readmore Tanpa Javasript |
Berikut Cara Mudah membuat Default Thumbnail pada Auto Readmore Tanpa Javascript :
1. Pertama sobat Simpan kode CSS 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}
2 Langkah Kedua sobat 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 != "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/AVvXsEiDyR1Dexk1zBsOZxeggwUijlXSVWY_8mkPr0Q2eJLgj9ymsf7BClzoeP3GSlblubjAQFn87h_o5AY27akqtCiJFlt5ZL0C3qWdpXZwqjim3xIayHYoQLRlQOd8JnhYgqPXj-lBov4ZL4g/s1600/icon72x72.png' width='72'/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
Note :
Yang Perlu anda ingat Brow bahwa kode disetiap template berbeda, cara di atas merupakan cara yang saya gunakan di template yang saya pakai ini. Anda juga bisa menyimpannya di bawah
Intinya sobat harus bisa menyesuaikannya dengan template anda
Yang Perlu anda ingat Brow bahwa kode disetiap template berbeda, cara di atas merupakan cara yang saya gunakan di template yang saya pakai ini. Anda juga bisa menyimpannya di bawah
<h2 class='post-title'>...</h2>
atau juga <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Intinya sobat harus bisa menyesuaikannya dengan template anda
Selamat malam Mas Ahmad. asyik artikelnya sangat aku banget nih :)
ReplyDeleteIni yang saya mau Mas. simak dan langsung coba. terima kasih Mas :-bd
Asyik dapat pertamx rupanya dari Mas Ahmad ini makasih lagiMas :-d
Deleteperlu dipraktekin nih :) makasih sharenya
ReplyDeleteapakah ukuran thumbnail akan resize atau cropoed ya? soalnya suka terganggu kalau gambar pada postingan di resize otomatis pada tampilan readmore
ReplyDeletesave dulu sob, buat dipelajari ...
ReplyDeletenice share
ReplyDeleteSaya coba praktekkan juga diblog saya, siapa tau cocok juga untuk template yang saya gunakan.
ReplyDeletesilahkan mas felix
Delete