Menambah Read More di Postingan Blog

Readmore membuat aline panjang di postingan kita akan terpotong dengan rapi dan tidak ditampilkan semua kedalam halaman home sehingga membuat postingan lain dapat ditampilkan dan terlihat di bagian home.   

Langkah-langkah menambahkan Read Mode di blog adalah sebagai berikut:

1. Klik Tema > klik Edit HTML

2. Copas kode berikut ini di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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 == &quot;static_page&quot;'>
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ9Cvt-_lyX_49n7IDggrlFd5u9K_LHiF2pAmLncMYYas7IcQqCgSEAcNLYeIGyxvjlj7O4fI_zKPW5dTXy2sdk9scH6QszObv634kO7HGNCKjW5J6SgabJcAd-7K-pi7NsICCixCusbs/s1600/no_available_image.png' width='180' height='100'/>
</a></div>
</b:if><b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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 == &quot;item&quot;'><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.

Sumber : romeltea.com