Membuat Read More Otomatis Di Blogger 0

Sebelumnya saya pernah membahas tentang cara membuat read more secara manual , baca disini ( Cara Membuat Rread More Pada Postingan Di Blogspot ) dengan read more manual kita akan mengahabiskan lebih banyak waktu ketika kita akan memposting sebuah artikel ,lain halnya dengan read more otomatis yang akan kita buata kali ini.Sama seperti read more manual ,read more otomatis ini berpungsi untuk memotong atau memperpendek artikel pada halaman home sehingga tidak terlalu memakan tempat dan memperlambat loading halaman home . Adapun perbedaan read more otomatis dengan read more manual adalah kita akan mendapatkan potongan halaman pada home page setelah kita membuat artikel tanpa menambahkan tag denagan perkiran jumlah karakter yang akan kita potong karna sudah kita set dan kita bisa langsung mempostingnya.

Adapun langkah - langkahnya sebagai berikut :

1. login ke blogger dengan ID sobat.

2. Pilih Rancangan atau Tata Letak.

3. Pilih Edit HTML.

4. Centang tulisan "expand template widget".

5. Lalu cari kode</head> : untuk mempermudah pencarian tekan F3 atau ( Ctrl+ F ) .

6. Lalu Copy dan masukkan code di bawah ini tepat di atas kode</head> ini .

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

Keterangan ( Kode di atas ):

I.var thumbnail_mode= "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;

II.summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar/thumbnail;

III.summary_img = 250;: Jumlah karakter yang akan ditampilkan di postingdengan gambar/thumbnail;

IV.img_thumb_height = 120;: Tinggi thumbnail yang akan di tampilkan dalam ukuran pixel;

V .img_thumb_width = 120;: Lebar thumbnail yang akan di tampilkan dalam ukuran pixel;


7. Kemudian sobat cari 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> readmore</b> &#187;&#187;&#160;&#160; </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

Keterangan ( kode diatas ): READMORE: Tulisan READMORE bisa diganti

misalnya dengan “Baca Selengkapnya” atau sesuai dengan

yang anda inginkan



8. Simpan templete anda .




Selamat mencoba dan semoga bermanfaat bye..........