Cara Menciptakan Auto Readmore Fast Loading Tanpa Javascript Di Blog

Cara Membuat Auto Readmore Fast Loading Tanpa Javascript di Blog.

Auto Readmore ialah 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 alasannya ialah biasanya ada link bertuliskan "read more" atau "baca selengkapnya", meski belakangan link tersebut jarang dipakai para blogger, alasannya ialah Google juga tidak menampilkannya di halaman hasil pencarian (SERP).

Disebut Auto Readmore alasannya ialah 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 arahan berikut ini untuk menampilkan auto readmore.

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

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

4- Cari dan ganti arahan <data:post.body/> yang kedua dengan arahan 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 alasannya ialah 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 dapat mengubah ukuran gambarnya di kode  CSS Auto Readmore bab width dan height.

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