Cara Membuat Auto Readmore SEO Friendly & Fast Loading

Cara Membuat Auto Readmore SEO Friendly & Fast Loading untuk Blogger.

BLOGGER senior tentu sudah tidak asing lagi dengan istilah Auto Readmore. Blogger pemula, mungkin belum memahami apa itu Auto Read more.

Auto Readmore adalah istilah bagi tampilan posting di halaman depan blog berupa gambar thumbnail (diambil dari gambar pertama posting), judul, dan ringkasan atau cuplikan isi tulisan bagian awal (alinea pertama dst).

Secara manual, auto readmore bisa dibuat dengan klik menu "Insert jump break" saat membuat tulisan.

Tips di bawah ini untuk blogger yang belum menggunakan auto readmore otomatis, seperti template bawan blogger. Yang sudah menggunakan auto read more, tinggal bandingkan dan sesuaikan saja.

Cara Membuat Auto Readmore SEO Friendly & Fast Loading

Disebut SEO Friendly karena ada tambahan kode khusus untuk deskripsi gambar thumbnail (alternative/alt text). Disebut fast loading (ringan, tampil cepat) karena tidak menggunakan Javascript alias murni CSS & HTML.

Berikut ini Cara Membuat Auto Readmore Fast Loading untuk Blogger yang otomatis menjadikan tampilan halaman depan blog berupa ringkasan posting.

1. EDIT TEMPLATE
Klik "Template" > "Edit HTML"

2. SIMPAN KODE
Simpan sebaris kode css gambar thumbnail berikut ini di atas kode ]]></b:skin>

.thumbnail-post {width:150px; height:100px; float:left; margin:0px 10px 0px 0px;}

Catatan:

Anda bisa mengubah angka 150 dan 100. Itu ukuran gambar, lebar dan tinggi. 

3. GANTI KODE
Cari (Ctrl+F) dan ganti kode <data:post.body/> yang kedua dengan kode auto readmore seo fiendly dan fast loading berikut ini.

Kode ini yang meringkas tampilan posting di halaman depan sehingga tidak tampil penuh:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:post.firstImageUrl'>

      <a expr:href='data:post.url'><img class='thumbnail-post' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/></a>

    <b:else/>

      <a expr:href='data:post.url'><img class='thumbnail-post' expr:alt='data:post.title' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a>

    </b:if>

<div class='post-snippet'>

<data:post.snippet/>
</div>
<a class='button' expr:href='data:post.url'>Read More</a></b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
</b:if>

Catatan:

Untuk menghapus atau menghilangkan teks "Read More", hapus kode:

 <a class='button' expr:href='data:post.url'>Read More</a>

4. Save!