Cara Membuat Auto Readmore Fast Loading Tanpa Javascript di Blog

Baca Juga

Cara Membuat Auto Readmore Fast Loading Tanpa Javascript di Blog.

Auto Readmore adalah istilah bagi tampilan halaman depan blog berupa judul, gambar thumbnail, dan kutipan (summary, snippet) teks alinea pertama.

Contohnya halaman depan blog ini. Posting tidak tampil penuh.

Disebut Readmore karena biasanya ada link bertuliskan "read more" atau "baca selengkapnya", meski belakangan link tersebut jarang digunakan para blogger, karena Google juga tidak menampilkannya di halaman hasil pencarian (SERP).

Disebut Auto Readmore karena postingan akan otomatis tampil berupa judul, gambar thumbnail, dan ringkasan di halaman depan.

Cara Membuat Auto Readmore Fast Loading Tanpa Javascript di Blog

Bagi Anda yang blognya masih menggunakan template bawaan blogger dan postingan halaman depan masih tampil penuh (semua artikel), gunakan cara dan kode berikut ini untuk menampilkan auto readmore.

1- Klik Tema > Edit Template
2- Cari kode ]]></b:skin>
3- Copy kode CSS Auto Readmore berikut di atas kode ]]></b:skin>

.thumbnail-post {width:100px !important; height:80px !important; float:left; margin:0px 15px 5px 0px;}

4- Cari dan ganti kode <data:post.body/> yang kedua dengan kode berikut ini:

<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:title='data:post.title' expr:src='data:post.firstImageUrl'/></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>
<div class='rm-button-wrap'>
<a class='button' expr:href='data:post.url'>Baca Selengkapnya</a>
</div>
</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>

5- Save Template !

Kode Auto Readmore di atas Fast Loading karena tanpa Javascript sekaligus ramah mesin telusur (SEO Friendly) gambar thumbnailnya sudah otomatis menampilkan deskripsi gambar (judul dan alternatif teks) yang diambil dari judul postingan.

Anda bisa mengubah ukuran gambarnya di kode  CSS Auto Readmore bagian width dan height.

Demikian Cara Membuat Auto Readmore Fast Loading Tanpa Javascript di Blog. Wasalam.*