Cara Bikin Read More Di Posting Blogger

Bagaimana ya cara menampilkan sebagian tulisan kemudian ada bacaan Read More atau Baca Selengkapnya di halaman awal blog blogger?...

Pertanyaan di atas kelihatan panjang ya, sebenarnya kalau di per singkat bisa, begini kira-kira jika pertanyaan di atas tersebut di singkat

Bagaimana Cara Membuat Read More Di Blogger?

Sebenarnya ada dua cara membuat read more di bloggger, namun kali ini saya akan mengangkat satu cara saja, yang ada thumbnail (Gambarnya).

Ok Mari Kita mulai belajar membuat Read More sendiri...

Pertama:

Jika anda belum login sebaiknya login dulu, setelah itu klik menu Tata Letak atau Design

Kedua:

Klik Menu Edit Html 

 

Ketiga :

Setelah itu beri centang pada pada bagian Expand Widget Templates

Keempat :

Letakkan Script Auto Read More di atas kode </head> 

 

Kelima:

Berikut Script Read More yang harus di letakkan tersebut : 

Spoiler:

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

Keterangan:

summary_noimg = 250 adalah jumlah ringkasan tulisan jika tidak ada gambarnya
summary_img = 250 adalah jumlah ringkasan tulisan jika ada gambarnya
img_thumb_height = 120 adalah tinggi gambar
img_thumb_width = 120 adalah lebar gambar

Keenam :
Temukan kode <data:post.body/> kemudian ganti kode tersebut dengan kode di bawah ini

Spoiler:

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>

<span style='float:right'><a expr:href='data:post.url'>Baca Selengkapnya... </a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Sekarang coba preview dulu hasilnya, jika sudah ada tulisan Baca Selengkapnya... dan tulisannya sudah di tampilakan sebagian saja itu artinya anda sudah berhasil membuat read more sendiri.

Sumber : AHMAD RIFAI