Membuat Readmore Otomatis

Pada kesempatan yang lalu kita juga pernah membahas Cara Membuat Readmore atau Baca Selengkapnya dan juga Cara membuat readmore beserta judul postingan, maka kali ini kita akan membahas bagaimana Cara membuat readmore otomatis tanpa harus membagi artikel menjadi 2 bagian secara manual..

Berikut cara² nya:

1. Klik Rancangan

2. Klik Edit HTML

3. Jangan lupa centang Expand Template Widget

4. Copy kode di bawah ini dan pastekan diatas kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no- float&quot; ;summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150;

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

summary_noimg = 450; adalah panjang artikel tanpa gambar,

summary_img = 360; adalah panjang artikel dengan gambar,

img_thumb_height = 120; adalah tinggi gambar,

img_thumb_width = 150; adalah lebar gambar
.


Sobat bisa menggantinya sesuai keinginan sobat

5. Jika sobat pernah membuat Readmore versi lama kembalikan kode tersebut, kemungkinan setiap template memiliki kode yg berbeda, sebagai contoh seperti 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;'/>

Kode yg berwarna merah adalah kode yang harus anda hapus

6. Kemudian cari kode <data:post.body/>
ganti kode tsb dengan kode di bawah ini, jika terdapat 2 kode, taruh pada kode ke 2

<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'>Selengkapnya…<data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Tulisan Selengkapnya... bisa sobat ganti sesuai keinginan sobat seperti Readmore..., Baca selengkapnya..., atau Baca selanjutnya...

Atau sobat bisa menggantinya dengan sebuah gambar seperti ini

Caranya: pada tulisan Selengkapnya.. sobat ganti dengan
kode di bawah ini

<img src='http://i737.photobucket.com/albums/xx17/arisyudha/th_selengkapnya.png' alt='Selengkapnya' />

tulisan yg berwarna merah adalah alamat url gambar di atas, jika sobat memiliki gambar sendiri, ganti alamat tersebut dengan alamat gambar milik sobat..

7. Simpan dan selesai

Selamat mencoba...!!!!!





Sumber: http://lovelizzers.blogspot.com/2011/06/membuat-readmore-otomatis.html

Label/Kategori: Tutorial Blog

Baca Terkait Lainnya..