Cara Memasang Read More Auto pada Blog

Assalamu Alaikum Warhmatullahi Wabarakatuh

Cara Memasang Auto Read More di Blogger Post yaitu cara otomatis untuk membuat Read More. Dengan fitur ini anda tidak perlu lagi menambah kode read more dalam setiap postingan namun sistem akan secara otomatis menghasilkan link read more untuk postingan anda. Dengan cara ini tentu kerja kita akan menjadi lebih ringan.

Bagi anda yang ingin menerapkan sistem auto read more pada blog anda langsung saja ikuti langkah-langkah dibawah ini.

Sebelum mengutak atik Rancangan HTML Blog Silahkan Backup ato silahkan Klik Download Templet Lengkap dulu baru memulainya..

1. Login ke Blogger. Masuk ke menu Design->Edit HTML

2. Beri centang pada "Expand Widget Templates"

3. Letakkan kode dibawah ini tepat diatas </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 301; img_thumb_height = 150; img_thumb_width = 150; </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");

if(img.length<1) {

imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWTsAe_JCCrxxHUK9lx7zmFtZdhlRT7KMKp1Ts_Q-TKcypSl8zK55UvjF0GlYEBEmn3H2L2t22zmz58nJLseCPjm2_swFe8lXHdG3NTl-S7GmCaRoydRl2DQRM2SoZgwa2NfLz7xYjuw/s1600/def-thumb.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

var summ = summary_noimg;

}

if(img.length>=1) {

imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><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>

utuk Keterangannya sbb:

summary_noimg = 300 menunjukkan jumlah karakter yang ditampilkan tanpa gambar

summary_img = 301 menunjukkan jumlah karakter yang ditampilkan termasuk gambar

img_thumb_height = 150 menunjukkan tinggi gambar thumbnail

img_thumb_width = 150 menunjukkan lebar gambar thumbnail

float:right menunjukkan posisi gambar thumbnail di kanan. Jika anda ingin gambar thumbnail berada di kiri ganti right menjadi left

img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWTsAe_JCCrxxHUK9lx7zmFtZdhlRT7KMKp1Ts_Q-TKcypSl8zK55UvjF0GlYEBEmn3H2L2t22zmz58nJLseCPjm2_swFe8lXHdG3NTl-S7GmCaRoydRl2DQRM2SoZgwa2NfLz7xYjuw/s1600/def-thumb.png" adalah gambar cadangan yang muncul jika tidak ada gambar dalam postingan. Anda bisa ganti gambar cadangan dengan gambar lain atau hapus saja alamat gambarnya jika anda tidak mau menggunakan gambar cadangan.

4. Kemudian cari <data:post.body/> atau <p><data:post.body/></p>

5. Ganti kode tersebut dengan kode dibawah 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:left'><a expr:href='data:post.url'><b>Read more &#187;</b></a></span>

</b:if>

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

</b:if>

6. Kalau sudah, simpan template anda. dan lihat hasilnya 

Seperti biasa anda bisa mengkreasi sendiri link read more misal dengan menambah judul posting didalamnya atau mengganti link read more dengan gambar. Caranya sama dengan read more manual. Selamat mencoba

7.Sebelum Disimpan SIlahkan Klik Dulu PRATINJAU untuk melihat Displaynya......Kalo sudah sesuai dengan yang diinginkan....maka Silakan klik tombol SIMPAN TEMPLATE. 

Nb :. Seandainya Terjadi Kesalahan ato tdk bisa juga...silahkan tinggalkan Komentarx Inysa Allah akan kami beri solusinya........Trima kasih.....

Wassalamu Alaikum Warhmatullahi Wabarakatuh