Cara Membuat Read More/Baca Selanjutnya Di Blogspot

Cara Mudah Membuat Read More Otomatis di Blog.

Sebelum melangkah ke cara membuat read more otomatis di blogspot lebih baik kita ketahui apa itu read more dan apa fungsi dari read more itu sendiri?

I. Pengertian :

Read more yakni potongan dalam sebuah artikel, biasanya hanya menampilkan beberapa kalimat saja dan biasanya di tandai dengan kata “READ MORE”, “BACA SELENGKAPNYA”, ”LANJUTKAN MEMBACA”, dll.

II. Fungsi :
fungsi read more itu sendiri yakni meminimalis penggunaan halaman blog biar terlihat lebih rapi dan menarik.

III. Manfaat :
Read more otomatisini akan memotong tampilan depan artikel yang panjang dan anda mampu menentukan berapa banyak aksara yang akan ditampilkan di halaman depan, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung mampu membaca artikel penuh blog anda.

Banyak para blogger yang masih kebingungan untuk membuat readmore secara otomatis di blog mereka, walaupun berbagai artikel-artikel yang mebahas bagaimana cara membuat readmore otomatis. Hal ini disebabkan karena banyaknya artikel yang copas padahal si pemilik blog sendiri tidak faham dengan caranya. Disini saya akan menjelaskan cara membuat readmore otomatis secara detail sehingga blogger pemula sekalipun mampu membuatnya.

Sekarang kita lanjut ke langkah cara membuat read more otomatis di blogspot. simak dengan baik-baik :
A. Cara membuat readmore otomatis dengan gambar.

1. Silahkan Login ke akun Blog anda.
2. Pilih Template => edit HTML.
3. Cari Kode </head> tekan Ctrl+F untuk memudahkan pencarian anda.
4. Copy paste instruksi dibawah ini sempurna di atas kode </head>.haha
<!--ReadMore https://socialseo-bookmark.blogspot.com-->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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 = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya aksara bila tidak ada gambar
summary_img = 250; //banyaknya aksara bila 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>
<!--Auto Read More Akhir-->
5. Kemudian Save Template anda.
6. Selanjutnya scroll template anda kebawah cari instruksi ibarat berikut:
   
   Ket: Kata kuncinya yakni didalam kotak hitam "BLOG POSTS / POSTINGAN BLOG" bila anda menggunakan bahasa indonesia.
7. Lalu Cari instruksi "POST' VAR='POST'".
   
8. Setelah ketemu klik tanda panah yang lurus dengan instruksi tersebut.
9. selanjutnya akan terbuka instruksi kode yang lain.
10. geser atau scrol ke bawah dan cari kode <data:post.body/>.
11. Setelah ketemu hapus instruksi diatas dan ganti dengan instruksi dibawah ini:
<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div class='read-more'>
<a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>
</div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->
12. Klik SAVE / SIMPAN dan lihat hasilnya.

Sekian Dulu postingan saya kali ini, lain kesempatan kita bertemu lagi di lain postingan tentunya....saya ucapkan terimakasih dan selamat mencoba....