Default Thumbnail Pada Auto Readmore Tanpa Javasript

Redi

Panduan Blog

Minggu, 02 Februari 2014

Belum ada komentar

Default Thumbnail Pada Auto Readmore Tanpa Javasript - Assalamualaikum wr.wb di malam ini sebelum tidur saya akan berbagi tutorial kepada anda mengenai cara membuat default thumbnail ( gambar ) pada auto read more tanpa java script . ukuran default thumbnail ini adalah 72 px yaitu sama dengan thumbnail popular post , karena kode ii diambilkan dari widget popular post hehehhehe :)

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 != &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/AVvXsEj-xbVhhhD6MEOTpI4yLJCdvnizXQdmlc1oihf6Hcup1ZEg5M5AisyEnfpHZ4cIH2mTaklk1_cO2LHw6nyptieFx5GHo2XJT418nYI5ZOkH1elmvfByIsQcNjrX5M7PYeYsYRePnT30wgk/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 <h2 class='post-title'>...</h2> atau juga <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
Intinya sobat harus bisa menyesuaikannya dengan template anda