Membuat Auto Read More Pada Blogspot (Thumbnail) Penyempurnaan

Script auto readmore blogger/blogspot dengan thumbnails  ini adalah penyempurnaan dari script auto readmore sebelumnya, di mana ditemukan adanya masalah pada halaman statis. Ketika halaman statis ditampilkan, auto readmore ikut muncul, sehingga harus diberi pengecualian (b if cond & b else) untuk static pages pada scriptnya. Selain itu, javascript dalam auto readmore ini juga bersifat internal jadi tidak perlu lagi memuat file .js eksternal yang diupload ke hosting lain. Meskipun file template menjadi sedikit lebih besar, namun loading  page menjadi lebih cepat daripada auto readmore sebelumnya.

Langkah-langkahnya :

1. Masuk ke dahboard > Design/Rancangan > Edit HTML. Jangan lupa centang 'Expand Widget Templates'. Download/back up file XML template terlebih dahulu agar nanti bisa mengembalikan seperti semula jika ada kesalahan.

2. Jika dulu sudah diisi script auto  readmore yang pertama, hapus terlebih dahulu, gunakan panduan dari posting auto readmore sebelumya untuk mengetahui mana saja yang harus dihapus.

3. Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F):

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
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");
    var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
    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>
<!-- Auto read more script End -->

Yang berwarna merah adalah jumlah dan ukuran tampilan, summary_noimg=jumlah karakter tanpa gambar, summary_img=jumlah karakter dengan gambar, sedangkan img_thumb_height dan img_thumb_width adalah ukuran gambar (dalam pixel). Ubahlah sesuai dengan keinginan.

3. Kemudian cari <data:post.body/> (gunakan Ctrl+F), dan GANTI dengan:

<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div style='text-align:justify;' 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='padding-top:5px;;float:right;text-align:right;'>

<a class='more' expr:href='data:post.url'>Read More >></a></span>

</b:if>
</b:if>
<!-- Auto read more End -->

Kostumisasi :

Tambahan style='text-align:justify;' dalam <div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'> dimaksudkan agar tulisan rata kiri rata kata. Ganti alamat   Read More >> dengan kata-kata yang diinginkan. Atau jika ingin menggantinya dengan gambar, ganti tulisan berwarna merah tersebut dengan:

<img border='0' src='url (direct link) gambar readmore'/>

Contoh:

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTgLh_vDN87M2YoUtJu_MCeE0XsYwZ7_CUZzk3SkcIUAjeAPQu16AkqHVtdfjdiJk6oby4kflL2q03DxkHukgvKnZwaI6RGdVz0zvxZ3XjiTy_JuV1ULtAgqLlp31ZAjVMZHvXYwHmGxE/s320/read+more+biru.png'/>

<img border='0' src='http://i825.photobucket.com/albums/zz175/ngoeg/readmore-1.gif'/> 

<img border='0' src='http://i809.photobucket.com/albums/zz14/drzazulisr/kliktoRM.gif'/>

<img border='0' src='http://i873.photobucket.com/albums/ab297/satriyoku/readmorecantik.gif'/>

<img border='0' src='http://i491.photobucket.com/albums/rr273/nceiif/read-more.gif'/>

<img border='0' src='http://i1202.photobucket.com/albums/bb380/blogbiztutor/Blogger/Button/animasi5.gif'/>

<img border='0' src='http://i692.photobucket.com/albums/vv289/icawoman/readmorebiru.png'/> 

<img border='0' src='http://i774.photobucket.com/albums/yy29/menthor/1268056366_6911db34_1268056366.gif'/>

Bila anda mau tinggal ambil salah satu di atas, dan bila and ingin mengupload sendiri anda bisa  mengupload dan menghosting  gambar disitus  dibawah ini :

1.   Picturestack.Support: jpg, jpeg, tiff, png, gif, bmp, tiff, ico. Max: 4092 Kb.

2.   HostAnyImage. Support: jpg, jpeg, gif, ico, bmp, png. Max: 10420 Kb.

3.   HostAnyPic. Support: jpg, jpeg, bmp, gif, tiff, tif, png, ico, psd, swf. Max: 10420 Kb.

4.  Qfqy. Support: jpg, jpeg, gif, png, ico. Max: 2048 Kb.

5.   MyImageHost. Support: jpeg, jpg, gif, bmp, ico, png. Max: 25600 Kb.

6.   ImageHosting.gr. Support: jpeg, jpg, bmp, png, gif, ico, tif, tiff, psd, swf. Max: 2355 Kb.

7.   MyUpload.org. Support: jpg, jpeg, gif, png, ico. Max: 10240 Kb.

8.   Image.Computersteroids. Support: jpeg, jpg, bmp, png, gif, ico, tif, tiff, psd, swf, psp, art.

9.   FreeImageHosting.in. Support: jpeg, jpg, gif, png, ico. Max: 2048.

10. Photobucket.com.  Support: jpeg, jpg, gif, png, ico. Max: 2048.

atau di selipkan dalam postingan anda juga bisa...sahabat... !!!!

4. Preview terlebih dahulu, jika sudah beres, kemudian save.

SEMOGA BERMANFAAT