Cara Membuat Read More Atau Baca Selanjutnya

Sobat Blogger semua , kali ini " Tips dan Tutorial " akan membahas tentang Membuat Readmore Atau Baca Selanjutnya setelah saya browsing dan diskusi serta belajar dari pengalaman kawan- kawan yang sudah berpengalaman di bidang blogger tersebut, mungkin kawan kawan pernah mengunjungi sebuah blog yang terdapat readmore atau baca selanjutnya.

Membuat Readmore Atau Baca Selanjutnya adalah suatu kombinasi jawascript yang di ciptakan dan akan tampil otomatis meskipun kita tidak mengeditnya kembali, berikut ini beberapa cara membuatnya sebagai berikut :

Langkah Pertama adalah Cara Membuat Read More Otomatis tanpa j Query pada Blogger dengan Bahasa Javascript Ada dua (2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob, yakni read more menggunakan gambar dan hanya menggunakan tulisan.

a.   Pertama sekali, seperti biasa ya gan pilih Dashboard, lalu Tata Letak dan                    Contreng tulisan Expand Widget Templates.

b.   Selanjutnya, cari kode </head>, setelah ketemu tepat di atasnya letakkan                       kode javascript berikut:

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 150;

summary_img = 150;

img_thumb_height = 100;

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 create Summary And Thumb(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>

Kemudian cari kembali kode

 <data:post.body/> atau <p><data:post.body/></p>

Setelah itu   untuk Cara 1 Read More Button Otomatis menggunakan gambar, hapus kode tersebut dan gantilah dengan kode berikut:

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

<div expr:id='&quot;summary&quot; +

data:post.id'><data:post.body/></div>

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

<span style='float:right'><a expr:href='data:post.url'><img alt='Read

More..' src='http://1.bp.blogspot.com/-

IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>

<b:else/>

<data:post.body/>

</b:if>

Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text ,hapus kode <data:post.body/> atau <p><data:post.body/></p> tersebut dan gantilah dengan kode berikut:

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

<div expr:id='&quot;summary&quot; +

data:post.id'><data:post.body/></div>

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

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

More..</a></span>

<b:else/>

<data:post.body/>

</b:if>

Lalu simpan templates dan lihat hasilnya.

Untuk yang terlanjur menggunakan read more secara manual seperti di sini, tinggal hapus kode:

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

<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>

</b:if>

Sedikit tambahan dari Tips dan Tutorial  dan gantilah dengan kode sesuai pilihan kawan- kawan, bisa menggunakan cara pertama maupun cara kedua, demikian saja artikel Membuat Readmore Dan Baca Selanjutnya. Tetap semangat dan terus belajar.