Membuat Readmore Otomatis Dengan Snippet Blogspot

Membuat Readmore Otomatis - Ada banyak cara untuk memotong postingan atau membuat read more pada blogspot, diantaranya menggunakan script auto read more (Java Script), atau dengan manual menggunakan kode <!—Moreà dalam setiap membuat postingan baru pada mode posting html. Cara cara tersebut mungkin sedikit kurang sesuai dengan keinginan kita ketika diterapkan pada

Seiring dengan berjalannya waktu, mungkin cara-cara tersebut sedikit kurang asyik jika kita terapkan pada template blogger, karena tentunya cara-cara tersebut selain memiliki kelebihan tersendiri, pasti juga memiliki beberapa kelamahan.

Saat ini blogger telah menambahkan fitur baru pada layanan blogspot mereka yaitu fitur snippet pada posting artikel, sehingga kita tidak perlu lagi menggunakan metode script auto read more atau metode <!--more--> untuk memotong posting artikel kita. Namun fitur tersebut tidak bisa secara otomatis kita nikmati, melainkan kita harus sedikit melakukan sedikt modifikasi code script pada template kita.

Berikut langkah langkah untuk membuat readmore otomatis code snippet pada template kamu:

1. Masuk akun blogger Anda. Pilih tab menu Rancangan -> Edit HTML.

2. Beri centang pada 'Expand Widget Templates'.

3. Masukan kode css berikut sebelum kode ]]></b:skin>

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

4. Setelah itu cari kode <data:post.body/>
Mungkin Anda akan menemukan 2 kode yang sama, untuk itu pilih urutan yang pertama saja.

5. Ganti kode tersebut dengan kode dibawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<data:post.body/>
<b:else/>
<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/>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a> <div class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1<data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</div>
</div>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>

Kode post snippet blogger tersebut sudah di modifikasi oleh IdBlogdesign sehingga dapat menampilkan jumlah komentar pada setiap tampilan post snippet serta tidak akan mengalami eror pada saat halaman pages.

6. Sebelum Anda menyimpan template Anda, silahkan preview terlebih dahulu hasil modifikasi template blogger Anda.

Jangan lupa sebelum melakukan cara tersebut diatas, alangkah baiknya jika Anda melakukan backup template Anda terlebih dahulu.