Cara membuat read more otomatis untuk blog

Membuat Read More Secara Otomatis di Blog - Jika template bawaan anda 

belum ada fitur Read more atau Baca selengkapnya tidah usah bingung tambahkan

 saja Script yang akan disajikan dalam Tutorial kali ini. Berikut cara membuat Read 

More otomatis untuk blog.

Kenapa diberi Read More karena akan Menjadikan Blog Anda terlihat Lebih rapih dan Enak dilihat olehpengunjung sehingga pengunjung anda tidak bosan untuk selalu mengunjungi blog anda

Pertama anda masuk dasbord blogger >> lalu pilih rancangan >> Pilih Edit HTML.
Jangan lupa centang Expand Template Widget.
Lalu cari kode </head>  untuk mempermudah pencarian tekan F3.

Masukan kode berikut tepat ditas </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>

<script type='text/javascript'>

//<![CDATA[

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>

Belum selesai, cari lagi kode :  <data:post.body/>

Ganti kode  <data:post.body/>, dengan kode di bawah ini :

<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 class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'> <b>Read more</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

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

</b:if>

Sampai disini lalu save template anda.

Selesai deh, untuk memastikannya coba lihat hasilnya.

Kata Read more warna merah dapat anda ganti dengan kata-kata selera anda, misalnya : Baca selanjutnya.

Demikianlah Tutorial cara Membuat Read More Secara Otomatis di Blog, semoga bermanfaat. Jangan lupa Like-nya.

About The Author

Terima kasih Atas kepercayaan anda selama ini kepada saya, Saya akan menjaga kepercayaan anda atas apa yang anda berikan kepada ku dan ini bukan lah yang terakhir untuk Saling Bersilaturahmi antar Blog , By : Arif Maulana

Share This

• 
• 
• 
• 
• 
• 
•