Cara Membuat Auto Readmore Fast Loading Tanpa Javascript di Blog

Romeltea | Follow @romel_tea
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.*

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Blogger from Bandung, Jawa Barat, Indonesia. Follow me: facebook twitter instagram twitter youtube

Recommended Posts

1 comment on Cara Membuat Auto Readmore Fast Loading Tanpa Javascript di Blog

  1. kalo bikin turorial yg lengkap dong om..... jgn kyk gini doang

    ReplyDelete

No Spam, Please!

Contact Form

Name

Email *

Message *