Cara Pasang Read More With Thumbnail di Blog

Hallo-hallo kembali dengan saya yang akan menemani anda pada postingan di weekend saat ini. Kali ini kembali buat yang suka design dan otak-atik templatenya dan khususnya buat yang masih memakai template default dari blogger. Karena apa? Saya ingin memberikan tutorial cara pasang read more with thumbnail (gambar). Karena kita tahu sendiri template default dari blogger belum terpasang read morenya, atau juga atau ada juga yang template kebetulan belum ada read morenya kalian juga bisa pake cara ini.

Yah sedikit penjelasan manfaat pasang read more pada blog agar terlihat profesional saja agar para pengunjung juga betah dan coba nanti anda bandingkan saat sudah memasang dan pada saat anda belum memasangnya. Pasti lebih baik pada saat anda memasangnya, di jamin!
Oke langsung saja lah yang ingin memasangnya ikuti langkah-langkah berikut ini dan lihat screenshot contoh read more nya di bawah ini kalau sudah tertarik langsung aja mari kita buat.

1. Masuk dulu lah ke blogger setelah itu langsung saja anda menuju ke bagian EDIT Html template anda.
2. Kemudian anda cari kode </head> kalau sudah ketemu letakan kode script di bawah ini tepat di atasnya.

<script type='text/javascript'>
var thumbnail_mode = &quot;item&quot; ;
summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>
<script src='http://otowebsite.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

3. Selanjutnya kembali lagi cari kode <data:post.body/> kalau sudah ketemu hapus kode tersebut dan ganti dengan kode di bawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); </script>
<span style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src="http://goo.gl/UYbJm"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Perhatikan saat menganti dan menghapus kode <data:post.body/> dengan kode tersebut silahkan anda coba satu per satu kode <data:post.body/>. Karena kode <data:post.body/> ada banyak di dalam template kita paling tidak coba dulu <data:post.body/> nya yang anda temukan pertama kali dan kalo gk bisa coba di yang kedua.

4. Next, klik pratinjau dulu kalau sudah mantep tampilanya baru klik "SAVE TEMPLATE".

Mudahkan? Kalau masih ada yang kebingungan silahkan saja bertanya pada kolom komentar. Oke mudah-mudahan bermanfaat lah apa yang saya bagikan kali ini sekian, terima kasih dan semoga weekend kalian dengan nongkrongin blog ini 'berkah' amin.