Cara Menciptakan Auto Readmore Super Fast Loading Dan Responsive Seo

Disebut super fast loading (ringan, tampil lebih cepat) alasannya yaitu tidak memakai Javascript alias murni CSS & HTML), Disebut SEO Friendly alasannya yaitu ada embel-embel arahan khusus untuk deskripsi gambar thumbnail (alternative/alt text). Berikut ini Cara Membuat Auto Readmore Fast Loading untuk Blogger yang otomatis menyebabkan tampilan halaman depan blog berupa ringkasan posting.
1. EDIT TEMPLATE
Klik "Template" > "Edit HTML"


2. SIMPAN KODE
Simpan sebaris arahan 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 dapat 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 arahan 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-postexpr: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!


EmoticonEmoticon