Anda tentu saja sudah mengetahui dan mengenal dengan baik tehnik menggunakan auto read more bukan? Namun teknik read more otomatis yang kita kenal selama ini, masih memerlukan script pendukung, yang tentu saja sedikit mempengaruhi kecepatan loading blog Anda. Nah sekarang, ada trik dan teknik baru untuk memasang auto read more di blog Anda. Bahkan teknik ini dilengkapi dengan fasilitas thumbnail. Trik ini saya dapat dan pelajari dari hasil berselancar di dunia blogging dan internet. Menarik, karena trik ini murni seratus persen hanya menggunakan tambahan hmtl code dengan sedikit sentuhan css code. Saya akan memberitahu Anda bagaimana cara untuk menggunakan trik tersebut di bawah ini. Langkah pertama, silahkan masuk ke halaman edit hmtl di blog Anda. Ingat, jangan lupa untuk mencentang widget (expand widget). Setelah itu, cari kode:

</data:post.body>

dan ganti dengan kode dibawah ini : 

<b:if cond="data:blog.pageType != &quot;item&quot;">
<b:if cond="data:post.snippet">
<b:if cond="data:post.thumbnailUrl">
</b:if></b:if></b:if></data:post.body><br />
<div class="Image thumb">
<img expr:src="data:post.thumbnailUrl" />
</div>
<data:post.snippet>
<b:if cond="data:post.jumpLink != data:post.hasJumpLink">
</b:if></data:post.snippet><br />
<div class="jump-link">
<a expr:href="data:post.url + &quot;#more&quot;" expr:title="data:post.title" href="http://www.blogger.com/post-edit.g?blogID=3400109061097505112&amp;postID=1974165112640294081"><data:post.jumptext></data:post.jumptext></a>
</div>
<b:else>
<data:post.body>
</data:post.body>
<b:else>
<data:post.body>
</data:post.body>

 Langkah berikutnya, Anda perlu menambahkan sedikit sentuhan kode CSS, yang ditempatkan di atas atau sebelum kode

</b:skin>

. Berikut Kode CSS yang harus anda tambahkan :

thumb img {float: left; margin: 0 10px 5px 0;}.

Selesai, silakan simpan dan lihat hasilnya.

Artikel Terkait :