Sebelumnya sudah dibagikan cara membuat blog di Blogger dan cara membuat template blog responsive. Kini kita lanjutkan dengan menjadikan halaman depan blog berupa daftar ringkasan postingan, bukan artikel penuh. Para blogger mengenalnya sebagai Auto Read More, seperti dalam gambar ini.
Dengan memasang kode auto read more, maka otomatis tamplilan hamalan depan akan terdiri dari gambar thumbnail, judul, dan ringkasan (snippet/summary), tanpa harus klik “Jump break” saat menulis artikel.
Template bawaan Blogger menampilkan tulisan penuh di homepage. Template yang sudah dimodifikasi, khususnya template premium, biasanya sudah auto read more.
Nah, jika Anda memakai template dari Blogger, khususnya tema Sederhana (Simple), kita bisa membuat auto read more di halaman depannya, seperti gambar di atas.
Cara Membuat Auto Read More di Blogger
Lakukan langkah berikut ini dengan teliti dan seksama, dalam tempo yang normal saja. Gak usah buru-buru.
1. Klik Tema > klik Edit HTML
2. Copas kode berikut ini di atas kode </head>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.thumb img {float: left;margin: 0 20px 5px 0;width: 180px;height: 100px;padding:0 0 5px}
h2.post-title {font-size: 18px;margin-bottom: 8px;}
.post-body {font-size: 95%;line-height:1.3;position: relative;}
.post-footer,h2.date-header {display:none}
.post {margin: 0 0 15px 0;border-bottom: 1px solid #eee;padding:0 0 15px;}
</style>
</b:if>
</b:if>
3. Cari (Ctrl+F) kode <data:post.body/>
4. Hapus kode <data:post.body/> yang kedua dan ganti dengan kode berikut ini:
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<a expr:href='data:post.url'><img expr:src='data:post.thumbnailUrl'/></a>
</div>
<b:else/>
<div class='Image thumb'><a expr:href='data:post.url'>
<img alt='data:post.title' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='https://4.bp.blogspot.com/-UzwA9RpjrY4/WZ4jEVrADsI/AAAAAAAAlR4/Z87IZNgdx8wNxstSOvidfwH1ZRhsw_XmACLcBGAs/s1600/no_available_image.png' width='180' height='100'/>
</a></div>
</b:if><b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h2>
</b:if>
</b:if>
</b:if>
<data:post.snippet/>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
5. Cari kode <a expr:name=’data:post.id’/>. Di bawahnya pasti ada kode seperti :
<b:if cond='data:post.title'><h3 class='post-title entry-title' itemprop='name'><b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'><a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></h3></b:if>
Hapus kode tersebut dan ganti dengan kode di bawah ini:
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:post.title'><h1 class='post-title entry-title' itemprop='name'><b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'><a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></h1></b:if></b:if>
6. Untuk mengatasi gambar thumbnail yang buram (blur) dan terpotong.
Untuk mengatasi gambar thumbnail yang buram, tambahkan kode berikut ini di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("Blog1");
theText = bodyText.innerHTML;
theText = theText.replace(/s72-c/gi, "s200-c");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
Untuk mengatasi Thumbnail Image yang blur dan terpotong (cropped), agar tampil utuh meski ukurannya kecil, gunakan koder berikut ini. Simpan di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
function thumbnyabener(e,t){for(var g=document.getElementById(e),m=g.getElementsByTagName("img"),r=0;r<m.length;r++)m[r].src=m[r].src.replace(/\/s72\-c/,"/s"+t),m[r]}thumbnyabener("Blog1",1600);
//]]>
</script>
7. Simpan Template!
Kini auto read more sudah terpasang. Klik “Preview” (Pratinjau) untuk mengeceknya dan membuka blog Anda dengan tampilan baru menggunakan jump break otomatis.
Gratis! Template Simple Responsive dan Auto Read More
Berikut ini kode template Simple yang sudah responsive, auto read more, bagian header sudah modifikasi, juga sudah edit sejumlah elemen biar lebih bersih, simple, dan ringan (seo friendly). Anda tinggal menambahkan elemen lain seperti breadcrumb dan related post.
Good Luck!
