Readmore Otomatis Plus Judul Postingan

Seminggu ini minggu yang bener-bener sibuk. Bagaimana tidak? Banyak sekali yang request artikel dan meminta saya untuk menulisnya. Tapi saya bersyukur dan tersanjung (hiks hiks) sobat blogger mempercayakan kepada saya untuk memposting artikel-artikel seputar trik blog. Sebenarnya ini bukan trik baru tetapi mungkin banyak sobat blogger yang belum bertemu dan saya akan memberikan cara membuat readmore otomatis tanpa harus mengatur dulu sebelum diterbitkan. Selain itu akan muncul juga judul postingan Anda secara otomatis. Hebatnya lagi, jika Anda menambahkan gambar pada postingan, maka gambar pertama akan otomatis muncul di ringkasan posting.

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)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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

Nah cek blog Anda maka sudah jadi... !!!!

Plus untuk kasus lain!
Jika Anda Sudah Menggunakan Read More Versi 1
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

Mungkin kamu 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...

Eh bagi yang males Edit HTML,
gunakan saja Template dengan Readmore Otomatis
Klik link berikut template-dengan-readmore-otomatis

Siiip dah