Info Petani - Cara membuat Read More Otomatis Tanpa Javascript di Blogger , Cara membuat Read More Otomatis Tanpa Javascript di Blogspot
Postingan Kali ini saya akan menjelaskan tentang Readmore Otomatis. Saya yakin anda pasti tau. Perlu anda ingat, 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 Readmore Otomatis 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.
1. Silahkan masuk ke halaman edit hmtl di blog Anda. Ingat, jangan lupa untuk mencentang widget (expand widget).
2. Cari kode <data:post.body/> dan ganti dengan kode dibawah ini :
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
3. 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;}.
4. Selesai, silakan simpan dan lihat hasilnya. Semoga bermanfaat. dan sekian itulah artikel Cara membuat Read More Otomatis Tanpa Javascript terimakasih ^_^
Tweet
Follow @kackdir
