Cara Membuat Auto Readmore Super Fast Loading dan Responsive SEO

Cara Membuat Auto Readmore Super Fast Loading dan Responsive SEO

Posted by litelinfo on

Disebut super fast loading (ringan, tampil lebih cepat) karena tidak menggunakan Javascript alias murni CSS & HTML), Disebut SEO Friendly karena ada tambahan kode khusus untuk deskripsi gambar thumbnail (alternative/alt text). 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!