Cara Memasang Read More Pada Blog Otomatis

 Print This Page

Cara Memasang Read More Pada Blog Otomatis merupakan salah satu cara mempercantik tampilan blog. Tutorial ini ditujukan kepada sobat-sobat yang masih menggunakan template bawaan blogger. Bila sudah menggunakan template dinamis, ini diabaikan saja sob. Kelebihan menggunakan template bawaan blogger adalah kita tidak hutang budi sama penyedia template blog karena menanamkan link/URL-na di dalam blog kita.

Langkah-langkahna :

• Buka akun blog sobat.
• Dari blogger (dasbor) pilihlan elemen Template lalu klik Edit HTML

• Carilah kode </head> (tekan Ctrl + F, untuk mempercepat pencarian) lalu salin/copylah kode di bawah ini dan tempatkan pas diatas kode </head> tadi.
  

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

 

• Selanjutnya cari kode <data:post.body/>  kemudian hapus kode <data:post.body/> tersebut dan gantikan kode script 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 style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
  <b:else/>
  <data:post.body/>
  </b:if>

• Klik Pratinjau Tema untuk mencoba Template, lalu klik Simpan Tema. Lihat hasilnya.

 Catatan:

• summary_noimg = 150; , yaitu untuk menentukan banyaknya karakter yang ingin ditampilkan pada posting yang tanpa thumbnail atau gambar.
• summary_img = 150; , yaitu untuk menentukan banyaknya karakter yang ingin ditampilkan pada posting dengan thumbnail atau gambar.

• img_thumb_height = 100; , merupakan tinggi thumbnail dalam piksel.

• img_thumb_width = 120; , merupakan lebar thumbnail dalam piksel.

• Pada bagian Read More, silahkan Sobat ubah sesuai keinginan, misalnya; lanjutkan, dll.

 
Demikian langkah-langkah Cara Memasang Read More Pada Blog Otomatis.
Semoga bermanfaat. 

Berbagi :