Cara Membuat Read More otomatis

Read More atau Baca Selengkapnya pada Posting adalah untuk menghemat halaman depan Blog agar tidak terlalu panjang,
Read More kali ini memang berbeda dengan Read More yang sebelumnya → Cara Membuat Read More,
← Read More sebelumnya harus menggunakan kode <span class="fullpost"> dan </span>
jika diantara sobat Blogger ada yang berkeinginan untuk Pasang Read More Otomatis pada Blogspot sobat,
silahkan ikuti langkah-langkah berikut :
Bagi sobat yang sudah memasang Read More manual sebaiknya kodenya di kembalikan dulu seperti semula,
Caranya :

Login ke Blogger
Klik Rancangan → Edit HTML
Kemudian cari kode seperti dibawah
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)
jika sudah ketemu Hapus kode yang berwarna biru

 <div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

kalau sudah tinggal lanjutkan langkah-langkah dibawah.






Countion : Jika kalian belum pernah memasang Read More.. di blog anda langsung aj ikutin tutorial yg di bawah ini tp jika sudah terlanjur ikutin 2''nya yg atas ma yg bawah

Masih dalam halaman Edit HTML cari kode </head> kemudian Copy Script dibawah ini dan Paste di atas kode </head> tersebut
Kalau sudah, jangan lupa di SIMPAN TEMPLATE terlebih dahulu.
  

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
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 = 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>

 

Masih dalam halaman Edit HTML Beri tanda centang pada kotak di samping tulisan Expand Template Widget lalu temukan kode seperti dibawah :

<data:post.body/>

Kalo sudah ketemu , ganti kode <data:post.body/> dengan kode dibawah ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'> Read More &#8594; <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Keterangan : Sobat juga bisa menentukan letak thumbnail (gambar), jumlah karakter tulisan baik tanpa maupun dengan thumbnail serta tinggi dan lebar thumbnail pada Postingan dengan cara merubah kode yang berwarna biru di atas.
Berikut penjelasannya :

var thumbnail_mode = "float"; : Letak thumbnail berada di "float" kiri atau jika tidak silahkan ganti dengan "no-float";
summary_noimg = 250; : Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;
summary_img = 250; : Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;
img_thumb_height = 120; : Tinggi thumbnail dalam ukuran piksel;
img_thumb_width = 120; : Lebar thumbnail dalam ukuran piksel;
Read More &#8594; <data:post.title/> : Tulisan Read More bisa diganti misalnya dengan "Baca Selengkapnya" dan apabila anda tidak ingin menampilkan judul dibelakang Read More, sobat bisa menghapus kode Script ini <data:post.title/>

Selamat mencoba 

Artikel Terkait:

Posted in: Tips Blogger