October 12, 2016

Membuat Auto Readmore SEO Friendly & Fast Loading untuk Blogger

October 12, 2016

Membuat Auto Readmore SEO Friendly & Fast Loading untuk Blogger
Cara Membuat Auto Readmore SEO Friendly & Fast Loading untuk Blogger.

BLOGGER senior tentu sudah tidak asing lagi dengan istilah Auto Readmore. Blogger pemula, mungkin belum memahami apa itu Auto Read more.

Auto Readmore adalah istilah bagi tampilan posting di halaman depan blog berupa gambar thumbnail (diambil dari gambar pertama posting), judul, dan ringkasan atau cuplikan isi tulisan bagian awal (alinea pertama dst).

Secara manual, auto readmore bisa dibuat dengan klik menu "Insert jump break" saat membuat tulisan.

Tips di bawah ini untuk blogger yang belum menggunakan auto readmore otomatis, seperti template bawan blogger. Yang sudah menggunakan auto read more, tinggal bandingkan dan sesuaikan saja.

Tips ini CB share setelah mendesain template CB Super Simple yang skor seonya 95%. Ternyata kurang 5% karena tidak ada deskripsi gambar di auto readmore. Setelah ditambahkan kode alt text, jadilah skor seonya sempurna: 100%.

Cara Membuat Auto Readmore SEO Friendly & Fast Loading

Disebut SEO Friendly karena ada tambahan kode khusus untuk deskripsi gambar thumbnail (alternative/alt text). Disebut fast loading (ringan, tampil cepat) karena tidak menggunakan Javascript alias murni CSS & HTML.

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"

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!

Trik menjadikan Auto Readmore SEO Friendly ini mirip dengan menjadikan SEO Friendly widget popular post thumbnail image. Good Luck & Happy Blogging! (www.contohblog.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

7 comments on Membuat Auto Readmore SEO Friendly & Fast Loading untuk Blogger

  1. Gan. Ane buat read more tapi kok ada tanda " ... ... ". Bagaimana cara menghapus titik 3 pertama?
    makasih

    ReplyDelete
    Replies
    1. hapus di kodenya, cari ... itu pasti ada dan hapus

      Delete
    2. Makasih gan udah tanda " ... " hilang. tapi sayang ketika saya membuka artikel, artikel tsb blank nga ada isi.

      Mohon solusi gan?

      Delete
    3. balikin lagi .... daripada tulisan hilang :)
      lagian, ada masalah dengan .... ???

      Delete
  2. gan membuat template seo gmn triknya???

    ReplyDelete
  3. request dong gan tutorial nambahin auto readmore dengan text di samping gambar

    ReplyDelete
    Replies
    1. Sudah dibuatkan, silakan:
      http://www.contohblog.com/2018/02/auto-readmore-judul-teks-samping-gambar.html

      Delete

Contact Form

Name

Email *

Message *