Cara Membuat Read More Otomatis di Blog

Cara Membuat Read More Otomatis di Blog - Tips Cara Terbaru kali ini setelah cara memperbaiki bad sector hardisc yang rusak,kali ini saya akan berikan tips blogger yaitu Cara Membuat Read More Otomatis di Blog. Keuntungan dari menggunakan cara otomatis seperti ini adalah kita ga perlu secara manual lagi dalam membuat read more,dan hasil nya lebih rapi lagi

Langkah Cara Membuat Read More Otomatis tanpa jQuery 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.

Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisan Expand Widget Templates.

(1)

(2)

(3)

Selanjutnya,cari kode </head>,setelah ketemu tepat diATASnya letakkan kode javascript berikut:

<script type='text/javascript'>

var thumbnail_mode = "float" ;

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

</code></blockquote>

<blockquote class="tr_bq">
Kemudian cari kembali kode <code><b>&lt;data:post.body/&gt;</b></code> atau <code><b>&lt;p&gt;&lt;data:post.body/&gt;&lt;/p&gt;</b></code>

Setelah itu untuk <b><u>Cara 1.Read More Button Otomatis menggunakan gambar</u></b>,hapus kode tersebut dan gantilah dengan kode berikut:

<code>&lt;b:if cond='data:blog.pageType != &amp;quot;item&amp;quot;'&gt;</code>
<code>&lt;div expr:id='&amp;quot;summary&amp;quot; + data:post.id'&gt;&lt;data:post.body/&gt;&lt;/div&gt;</code>
<code>&lt;script type='text/javascript'&gt;createSummaryAndThumb(&amp;quot;summary&lt;data:post.id/&gt;&amp;quot;);&lt;/script&gt;</code>
<code>&lt;span  style='float:right'&gt;&lt;a expr:href='data:post.url'&gt;&lt;img  alt='Read More..'  src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/&gt;&lt;/a&gt;&lt;/a&gt;&lt;/span&gt;  </code>
<code>&lt;b:else/&gt;</code>
<code>&lt;data:post.body/&gt;</code>
<code>&lt;/b:if&gt;

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:

&lt;b:if cond='data:blog.pageType != &amp;quot;item&amp;quot;'&gt;

&lt;div expr:id='&amp;quot;summary&amp;quot; + data:post.id'&gt;&lt;data:post.body/&gt;&lt;/div&gt;

&lt;script type='text/javascript'&gt;createSummaryAndThumb(&amp;quot;summary&lt;data:post.id/&gt;&amp;quot;);&lt;/script&gt;

&lt;span style='float:right'&gt;&lt;a expr:href='data:post.url'&gt;Read More..&lt;/a&gt;&lt;/span&gt;

&lt;b:else/&gt;

&lt;data:post.body/&gt;

&lt;/b:if&gt;

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>

Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara 2,Semoga bermanfaat
sumber