Cara Membuat Read More Otomatis Tanpa Javascript

Cara Membuat Auto Read More Otomatis Tanpa Javascript di Blogspot - Bagi para blogger read more sudah menjadi bagian penting untuk meringankan dan mempercantik tampilan blog mereka. Cara membuat read more dibedakan menjadi dua, yaitu read more otomatis dan manual. Jika anda ingin menggunakan cara menual, anda tinggal klik tombol Insert Jump Break pada posting blog, dengan cara ini pastinya kita harus melakukannya setiap menulis artikel. Tapi jika anda ingin membuat read more dengan cara otomatis pastinya akan ada beberapa penambahan kode pada Edit HTML.

Dengan auto read more otomatis pastinya kegiatan blogger anda akan menjadi lebih praktis. Jika membuat artikel anda sudah tidak perlu khawatir dengan lupa memencet tombol kertas sobek atau insert jump break lagi. Tetapi jika kita memasang auto read more, pastinya kita harus memberi tambahan script pada kode HTML kita. Fungsi readmore yang seharusnya berguna untuk mempersingkat posting atau artikel malah akan mengakibatkan blog anda menjadi berat karena mengandung kode javascript.

Kode auto readmore otomatis yang akan saya berikan pada posting ini tidak mengandung javascript, jadi dengan menggunakan kode ini template blog anda akan menjadi lebih SEO Friendly dan ringan, karena seperti yang kita tahu, google tidak suka dengan penggunaan kode javascript pada blog. Dalam trik ini kita akan memanfaatkan kode yang digunakan oleh tampilan mobile blogspot, yaitu post snippet. Untuk cara pemasangan auto read more otomatis tanpa javascript silahkan ikuti langkah berikut.

1. Login ke blogger, pilih salah satu blog
2. Pilih Template, lanjutkan ke Edit HTML
3. Lalu cari kode ]]></b:skin>, untuk mempermudah silahkan menggunakan ctrl+f
4. Masukkan kode ini diatas kode ]]></b:skin>

.post-thumbnail{float:left;margin-right:20px}

5. Lalu cari kode <data:post.body/> dan ganti dengan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

6. Lalu Simpan Template

Oke cukup sekian