Halaman depan blog akan secara otomatis menampilkan beberapa artikel terbaru secara lengkap, sehingga membuat laman postingan menjadi sangat panjang. Untuk mengatasi hal ini, banyak blogger yang membuat auto readmore dengan memenggal setiap tulisan menjadi hanya beberapa baris saja dan dengan memasang auto readmore akan membuat tampilan blog menjadi lebih rapi. Contoh tampilan homepage dengan auto readmore bisa dilihat di gambar berikut:
Pada kesempatan kali ini, saya akan membahas tentang cara membuat auto readmore plus thumbnail (gambar) tanpa menggunakan javascript. Kenapa tidak menggunakan javascript? Karena javascript bisa memperlambat loading blog. Sebaliknya, auto readmore tanpa javascript akan membuat loading blog menjadi semakin ringan dan cepat.
Lantas, bagaimana cara membuat auto readmore+gambar tanpa javascript di blog ?
Begini caranya....
- Login ke Blogger
- Pilih Template > Edit HTML
- Cari kode (Ctrl+F) ]]></b:skin> dan paste kode berikut diatasnya:.thumbnail-post {width:160px;height:120px;float:left;margin:0px 10px 0px 0px;}
Note: Tulisan bewarna merah adalah ukuran gambar yang bisa diubah-ubah. - Selanjutnya, cari kode <data:post.body/> yang kedua atau ketiga dan ganti dengan kode berikut:<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:title='data:post.title' expr:src='data:post.firstImageUrl'/></a><b:else/><a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh969481izNp2ReArSjDX_wlqFq_HSonR5zvpqRIQnZ7xpyrKVciahvDqbHxLJoagiqMgpcvDk4rIxAAQhmfsQE5fX_mWdgLJqwzxjG3YT169d7pQglm4Lf-_UF6KoAenZmUaoRsghxAGNZ/s1600/picture_not_available.png'/></a></b:if><div class='post-snippet'><data:post.snippet/></div><div class='rm-button-wrap'><a class='button' expr:href='data:post.url'>Readmore</a></div></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>
- Terakhir Jangan lupa Save!
Selesai, sekarang anda sudah bisa membuat halaman utama di blog berisi postingan yang dipenggal dengan auto readmore yang membuat blog anda terlihat lebih professional.
(http://mas-rd.blogspot.com/2015/07/cara-membuat-auto-readmore-thumbnail.html)*.