Cara Membuat Read More Di Blogger Tanpa Script

Adakah cara membuat read more di blogger tanpa script ?
Tentu ada sobat, ada beberapa cara membuat read more di blogger, ada yang menggunakan script auto read more untuk blogger dan ada juga cara membuat read more tanpa script.

Setelah lumayan lama tidak menulis tutorial blogger, akhirnya kali ini saya bisa menuliskan salah satu tutorial blogger yaitu tutorial cara membuat read more di blogger tanpa script, yang mana cara ini juga saya terapkan di blog baca tulis ini.

Saya yakin sobat sudah tahu dong apa tujuan membuat read more ini, yaitu untuk mempersingkat artikel yang kita tulis pada halaman index blog blogger, yaitu halaman home, label, dan arsip.

Cara Membuat Read More Di Blogger Tanpa Script Auto Read More Untuk Blogger

Walaupun tutorial cara membuat read more di blogger tanpa script ini tidak menggunakan script auto read more untuk blogger, namun cara ini juga akan memotong artikel yang ada di blog kita secara otomatis.

Pada tutorial ini kita akan menggunakan kode yang sebenarnya sudah ada pada template blogger, namun pada template bawaan blogger kode ini hanya dipasang pada versi mobile, namun kode tersebut sebenarnya bisa kita guanakan untuk membuat read more di blogger secara otomatis tanpa menggunakan script auto read more untuk blogger.

Adapun kode yang akan digunakan dalam tutorial cara membuat read more di blogger tanpa script ini adalah :

<img expr:src='data:post.thumbnailUrl'/> gunanya untuk menampilkan gambar thumbnail
dan
<data:post.snippet/> gunanya untuk membuat ringkasan artikel Serta kode pendukung lainnya

Untuk lebih jelasnya saya akan menuliskan langkah - langkah / tutorial cara membuat read more di blogger tanpa script ini, berikut caranya :

Seperti biasanya, langkah pertama yang harus dilakukan adalah masuk ke dasbor blogger, kemudian buka halaman Template.

Backup / cadangkan template blogger yang sobat gunakan untuk jaga - jaga.
Klik tombol Edit HTML yang letaknya di bawah tampilan template blogger yang sobat gunakan (untuk lebih jelasnya silakan lihat gambar)

Apabila sudah berada pada halaman Edit HTML Template maka sekarang temukan kode <b:includable id='post' var='post'>

Apabila kode tersebut sudah dapat maka silakan cari kode <data:post.body/> yang letaknya tidak jauh di bawah kode <b:includable id='post' var='post'> tadi.

Selanjutnya ganti kode <data:post.body/> dengan seluruh kode berikut :

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<style type="text/css">.thumb img {float: left; margin: 0 10px 5px 0;}</style>
<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' expr:title='data:post.title'>Read more</a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Keterangan :

Pada kode di atas terdapat kode <style type="text/css">.thumb img {float: left; margin: 0 10px 5px 0;}</style> yang mana kode itu adalah kode CSS yang gunanya untuk membuat gambar yang ada berada disebelah kiri, silakan edit / tambahkan kode css lainnya sesuai selera, dan kode css tersebut tidak wajib berada di area kode tersebut, namun bisa juga sobat letakkan sebelum kode </head>.
Di atas juga terdapat tulisan Read More (pada kode <a expr:href='data:post.url' expr:title='data:post.title'>Read more</a>), tulisan tersebut boleh diganti dengan tulisan lain sesuai selera, misalnya Baca selengkapnya ..., dsb.

Setelah itu silakan simpan pengaturan template sobat, caranya klik tombol Simpan Template yang berada di atas kolom editor template.
Selesai ...

Nah itulah tutorial cara membuat read more di blogger tanpa script, yaitu dengan menggunakan kode yang sudah disediakan pihak blogger