Cara membuat menu Read More pada blogger

dengan menggunakan tampilan read more atau baca selengkapnya dapat untuk memudahkan pungunjung untuk melihat daftar blog anda jika postingan yang anda buat sangat panjang dan tidak menggunakan menu read more tentunya akan membuat pengunjung susah untuk ,melihat daftar blog kita. Baca selengkapnya untuk cara membuat menu Read more di blogger

Membuat Read More bisa menggunakan 2 cara :

 - Menggunakan Menu yang Sudah disebiakan blogger
 - Menggunakan Java Script

Menggunakan Menu yang Sudah Disediakan blogger
Penjelasan:

Menu ini merupkan tombol setting yang sudah disiapkan oleh blogger. dengan tombol Insert Jump Break kita dapat memotong artikel atau memperpendeknya saat berada di dalam halaman utama blogger. dengan ini kita bisa menentukan panjang pendeknya artikel yang ditampilkan

1.Pergi ke [Blogger] Masuk ke Entri Baru

2.pastikan anda membuat artikelnyat terlebih dahulu Kemudian Klik Instert Jump Break Yang ada atas bergambar kertas robek terakhir Simpan atau publikasikan

Menggunakan Java Script

Penjelasan:
Dengan menggunakan Java Script kita tidak perlu susah susah untuk menentukan seberapa panjang artikel yang akan ditampilkan di blogger karena sudah otomatis ditentukan. Dengan menggunakan Java Script tampilan Read More akan lebih rapi dan menarik

1.Masuk ke [Blogger] > Template > Edit HTML > kemudian klik CTRL + F dan cari Code </head> Lalu Masukkan Kode dibawah ini Tepat Diatas Kode </head>

b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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>
<span
 class='readmore' style='float:right'><a 
expr:href='data:post.url'>Read More 
&#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Keterangan : 
Biasanya script atau code <data:post.body/> terdapa lebih dari satu jka anda menukan 2 code yang sama coba gantikan yang bawah atau atau atas jika tidak bisa gantikan saja keduanya. dan jika code <data:post.body/> hanya terdapat 1 saja mengkinkan jika anda menggunakan cara ini akan gagal

2.Cari Lagi Code <data:post.body/> Hapus Code nya dan Gantikan Dengan Code dibawah

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
img_thumb_width = 120;
</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 = posts_no_thumb_sum;
if(img.length>=1) {
imgtag
 = '<span class="posts-thumb" style="float:left; margin-right: 
5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" 
height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Catatan:
Warna Hijau Untuk Mengatur Lebar Tinggi Gambar
Warna Biru Untuk Mengatur Banyak Kata yang Diisi dan tidak disi

3.Kemudian Save