Cara Membuat Read More Otomatis di Blogger

Pada halaman awal (home page) yang berisi beberapa artikel mungkin akan sangat panjang untuk ditampilkan. Belum lagi pada setiap artikel tersebut membuat banyak gambar sehingga akan memakan waktu loading halaman yang cukup lama. Oleh karena itu fungsi Read More atau baca selengkapnya sangat dibutuhkan untuk meringkas artikel-artikel pada halaman awal. Ada dua cara dalam pembuatan Read More yaitu cara manual dan Otomatis. Pada posting kali ini Kak Hady akan membagikan cara yang otomatis. Berikut adalah langkah-langkahnya.

Login ke Blogger akun anda
Pada dasbor blog anda silahkan pilih Template
Klik Edit HTML
Cari Kode </head>
Copy paste kode dibawah ini tepat di atas kode </head>


<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9; text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:250px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 250;
</script>
<script type='text/javascript'>//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx = s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>
Scroll ke bawah dan cari kode <data:post.body/> yang terakhir
Setelah ketemu hapus kode <data:post.body/> dan ganti dengan kode di bawah ini:

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<div class='read-more'>
<a expr:href='data:post.url'>Baca Selengkapnya »</a>
</div>
</b:if>
</b:if>
Simpan Template dan lihat hasilnya.

Kak Hady Berbagi

1. Terima kasih telah berkunjung dan membaca artikel ini

Judul : Cara Membuat Read More Otomatis di Blogger
URL :
Diposkan oleh : Kang Hady
Pada : Minggu, 05 Januari 2014.
Pukul : 09:38
Label/kategori : Ilmu Komputer , Web Desain
Bagikan ke : Facebook | Google+ | Twitter | Digg

2. Saya mengharapkan kritik dan saran dari pembaca semua. Untuk itu silakan berkomentar pada setiap postingan blog ini;
3. Setiap komentar yang anda berikan adalah masukan bagi saya agar blog ini lebih baik.