Cara Mudah Pasang Readmore Otomatis + Judul Postingan

Assalamua'laikum..sobat CW semua, semoga sobat tetep betap mampir ke blog ini. Amin. Postingan kali ini kembali akan membahas masalah Tips Blog. Tips ini sebenarnya bukan hal baru lagi dalam dunia blogger, tapi kebetulan ada beberapa sobat yang nanya msalah read more. Oleh karena itu postinganan ini akhirnya meluncur juga dengan tambahkan judul postingan dari read more itu sendiri secara otomatis. Cuma postingan ini di khususkan kepada sobat CW yang masih kebingungan cara membuat Read More (baca selengkapnya) tapi kalo sobat dah tau mending lewatin aja postingan ini.Ok, dari pada ngomong panjang lebar, mending to the point aja.
kalau yang pake gambar gini modelnya :






Caranya mudah, ikuti langkah-langkah di bawah ini:

1. Masuk ke tata letak lalu EDIT HTML
2. Centang Expand Template Widget
3. Cari kode </head>
4. Tambahkan kode berwarna biru di bawah ini di atas kode </head>

<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[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2011 by ali sadikin

visit http://www.alycomp.co.cc/
********************************************/
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>


5. Lalu cari kode <data:post.body/>
6 Ganti kode tersebut dengan kode berwarna biru di bawah 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 - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Yang berwarna merah ganti sesuai keinginan Anda...
7. Simpan Template
8. Silahkan cek perbedaan blog sobat

Catatan :
Jika Anda Sudah Menggunakan Read More
Langkah ke 5 ganti dengan langkah berikut
Cari kode dibawah ini
<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'>Baca Selengkapnya......</a>
</b:if>

Ganti dengan script pada langkah nomer 6...
Simpan Template

Kalo sobat menggunakan Readmore versi lain..
Cari kode di bawah ini

<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;'/>

Kembalikan kodenya dulu dengan cara hapus yang berwarna merah, lalu ikuti langkah dari awal
Selamat mencoba...