Info Blog : Cara Membuat Auto Read More untuk Blogspot

Info Blog : Cara Membuat Auto Read More untuk Blogspot
Auto Read More atau Baca selengkapnya sangat membantu kita dalam mempersingkat artikel pada halaman utama blog. Auto Read More bisa kita buat dengan cara manual atau Otomatis.

Jika kita menggunakan cara manual maka setiap kita menulis artikel, kita harus menggunakan "Insert jump break" untuk memotong artikel kita atau sering disebut juga "men-split artikel", dan kita harus menentukan sendiri sampai mana tulisan kita harus dipotong.

Beda ceritanya kalau kita menggunakan Script Auto Read More, saat kita memasang Script Auto Read More dalam blog maka secara otomatis artikel kita akan terpotong dengan sendirinya dan panjang tulisan artikel kita yang terpotong bisa sama.

Di bawah ini adalah langkah-langkah Membuat Auto Read More :
Pertama, silahkan masuk ke halaman EDIT HTML, Cari kode </head>
Letakkan kode dibawah ini tepat diatas 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>

Kedua ,Kalau sudah, ganti kode <data:post.body/> ,ganti 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 - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Langkah terakhir Klik Simpan dan lihat hasilnya.

Catatan : Untuk Anda yang telah membuat read More dengan Metode Manual harus dibersihkan dulu seperti default, hapus pada bagian warna merah, seperti contoh 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;'/>

Comments

  1. 100% work

    look my blog w3mediafire.com

    ReplyDelete
  2. berhasil bos, termaksih bnyak ya

    visit blog ku ya http://nbacolors.blogspot.com/

    ReplyDelete
  3. siap menuju blog agan2 semua..

    ReplyDelete
  4. thanks banget mas,,
    saya telah terapkan di blog saya n berhasil!!!

    ReplyDelete
  5. sama-sama mas andreke, jika ingin tutorial blog yang lain anda bisa mengunjungi blog ini: http://harinfo-blog.blogspot.com/

    ReplyDelete
  6. makasih gan, berkat tutor dari mas akhirnya bisa juga buat auto read mode.,

    soalnya dari kemarin gagal mulu.,

    ReplyDelete
  7. nice sob

    www.getcheaters.blogspot.com

    ReplyDelete

Post a Comment

PLEASE USE COMMENT TO TELL US IF THERE ARE HACK THAT DO NOT WORK