Cara Membuat Read More Otomatis

Read More Otomatis

Memangkas eh..maksudnya meringkas atau memotong postingan agar tidak tampil semua di halaman depan sebuah blog biasanya disebut dengan READ MORE, bisa dibuat secara manual dan bisa dibuat secara otomatis.

Untuk Cara manualnya, cukup dengan satu kali klik pada ikon menu "Insert Jump Break" dengan memperhitungkan sendiri berapa patah kata yang ingin dimunculkan, ketika membuat entri baru.

Adapun cara membuat Read More yang otomatis, maka ini sudah sangat banyak yang memberikan tutorial cara membuatnya di dunia maya, namun satu hal yang harus kita perhatikan jangan sampai kita dapatkan kode HTML yang setengah-setengah, dalam artian tidak maksimal sehingga mengakibatkan halaman statis atau static page blog kita ikut terkena dampak dari READ MORE tersebut, padahal tidak semestinya seperti itu.

Berikut ini beberapa langkah untuk membuat read more otomatis yang tidak mempengaruhi statis page blog anda :

1.	Login terlebih dahulu ke akun blogger anda,
2.	Pilih Template lalu Edit Html, Jangan lupa centang Expand Template widget. Letakkan kode di bawah ini di atas kode </head> untuk mempermudah pencarian bold </head> lalu tekan ctrl+f di keyboard anda,

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script><br /> <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(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div> ' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script>

4.	Kemudian cari kode ini <data:post.body/> untuk mempermudah pencarian bold <data:post.body/> lalu tekan ctrl+f di keyboard anda,
5.	Kemudian hapus kode <data:post.body/> tersebut dan ganti dengan kode di bawah ini :

<b:if cond='data:blog.pageType == "static_page"'><br /> <data:post.body/><br /> <b:else/><br /> <b:if cond='data:blog.pageType != "item"'><br /> <div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><br /> <span class='more' style='float:left'><br /> <a expr:href='data:post.url'>Read more</a><br /> </span><br /> </b:if> </b:if><br /> <b:if cond='data:blog.pageType == "item"'><br /> <data:post.body/><br /> </b:if>

6.	Klik pratinjau dan lihat hasilnya
7.	Jika Sudah benar Simpan Template anda

Demikianlah tujuh langkah mudah untuk membuat read more otomatis yang tidak mengganggu halaman statis blog anda.

Keterangan :

summary_noimg	=	430	Menentukan jumlah karakter dalam ringkasan tanpa gambar.
summary_img	=	340	Menentukan jumlah karakter dalam ringkasan dengan gambar.
img_thumb_height	=	100	Kode ini untuk tinggi gambar thumbnailnya.
img_thumb_width	=	120	Kode ini untuk lebar gambar thumbnailnya.

Read more = Bisa di ganti tulisan yang lain, misalnya: Baca selengkapnya, Baca selanjutnya, Baca terusannya dan lain-lain sesuai keinginan anda. Juga bisa diganti dengan image sebagaimana yang nampak di blog ini.

Sumber Kode : Cara membuat read more otomatis tanpa mengganggu halaman statis