Skip to main content

Membuat Read More Otomatis Seperti di Blog Ini


Sebenarnya Membuat Read More Otomatis Seperti di Blog Ini sangat mudah, yg terpenting adalah  bagaimana kalian mencermati dengan teliti, menyimak dan katakan tidak untuk "Menyerah".
Sebelum melangkah  ke cara Membuat Read More Otomatis Seperti di Blog Ini, lebih baik kita tahu Apa itu Read More? dan Apa Fungsi dari Read More Tersebut? Kenapah ? hehehehe 
"Read more" dalam bahasa indonesia yaitu "Baca Selengkapnya" dan Fungsi Read More itu sendiri adalah Meminimalis penggunaan halaman blog agar terlihat lebih rapi, menarik, indah dan cantik. Read more otomatis ini akan memotong tampilan depan postingan atau artikel panjang yang sudah anda buat dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan atau home, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca artikel penuh blog anda. Sekarang lanjut ke langkah cara membuat read more otomatis seperti di blog ini.
Berikut langkah-langkah Membuat Read More Otomatis Seperti di Blog Ini
  • Login ke Blog anda
  • Pilih Template -» Edit HTML -» Expand template widget
  • Klik kiri pada mouse 1x dimana saja didalam kotak template
  • Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
  • Paste-kan kode berikut tepat diatas kode </head>

/* --- Start Read More ---- */
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
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>
/* --- End Read More ---- */

  • Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p> (gunakan CTRL + F untuk mempermudah pencarian).
*Kode di atas tersebut biasanya memiliki jumlah 2
  • Jika sudah ketemu silahkan anda ganti kode <data:post.body/> dengan kode dibawah ini :


<!-- Start Auto Read More -->
<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>
  <b><span class='rmlink' style='color: #38761d float:left'><a expr:href='data:post.url'>Read More &#8594; <data:post.title/></a></span></b>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<!-- End Auto Read More -->

  • Jika terdapat 3 kode seperti template saya, maka ganti ketiga kode tersebut.
  • Selesai simpan template dan lihat hasilnya.
*klik pada gambar agar lebih jelas
Keterangan :
Ganti tulisan "Read More →" dengan kata yg anda inginkan, Misal : "Baca Selengkapnya"
summary_noimg = 250; jika tanpa gambar satupun, maka yang akan tampil pada halaman depan adalah 250 huruf.
summary_img = 250; jika ada gambar maka yang akan tampil pada halaman depan adalah 250 huruf dan gambar postingan anda.
img_thumb_height = 120; untuk mengatur tinggi gambar / thumbnail yang akan muncul di halaman depan
img_thumb_width = 120; sedangkan yang ini untuk mengatur lebar gambar / thumbnail di halaman depan.


Tambahan :
Anda juga bisa mengubah tulisan Read More tersebut dengan gambar yg anda sukai. Silahkan ganti tulisan Read More,  Baca Selengkapnya dll. dengan gambar yang anda sukai tinggal menghapus / mengganti kode berikut :
<!-- Start Auto Read More --><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>  <b><span class='rmlink' style='color: #38761d float:left'><a expr:href='data:post.url'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIbvdfYETQ_F6zwOrexopmKWcJ91rcvAn6-qdqF8iyASubWpjECKzyKj_Dq1l0WOVcdeuZahdvkqlqDneNvpyGUtVsWO3-yIuKYS2TjCC6H9XCngz3OZYVHc3JSylykPcX9jFJuS4wbYw/s1600/ReadMoreGrayFontDark-VX.png"></img><data:post.title/></a></span></b></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if><!-- End Auto Read More -->
Atau Ini :
<!-- Start Auto Read More --><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>  <b><span class='rmlink' style='color: #38761d float:left'><a expr:href='data:post.url'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_lIHIq3yzP9ciq2eQedZMoKo6KDac4Oryy7J3Eu69o4MI42KmK7Al8XCKLZYMql1d6OQFy8gSp-PAqahFAE99h9JT9xxcNkBRkl62lLg9WDC0lZq5DmsMMoSjRWOdBVTgHGmomSWJeno/s1600/SelengkapnyaGray-VX.png"></img><data:post.title/></a></span></b></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if><!-- End Auto Read More -->
Ganti warna ungu tersebut dengan gambar anda dan selamat bereksperimen 

kalau masih belum faham, silahkan komentar ;)


Selamat mencoba dan Semoga bermanfaat 



Ad by Adsterra