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.
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%.
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"
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.
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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
4. Save!
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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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 == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
Catatan:
</div>
<a class='button' expr:href='data:post.url'>Read More</a></b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<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).*
Labels: Desain Blog
<< Home