Jumat, 06 Januari 2012

Cara Membuat Autoreadmore V3 [Update ke tiga]

2 comments
Sebelumnya saya pernah memposting :
1. Cara Membuat Readmore Otomatis
2. Cara Membuat Auto Readmore (Update)

dan sekarang saya ingin memposting lagi versi yang lebih tahan lama heheh karena waktu saya pake cara pertama readmorenya suka rusak :'( dan yang kedua hmm ... gk tahu sih untuk yang ini tapi ane punya aura gk enak pake cara yang kedua ... karena waktu itu ane pake template yang otomatis sudah ada readmore-nya ... tapi karena ane bosen dan pengen pake template google plus yang belum ada readmore otomatisnya yaa ... terpaksa ane pake cara manual ... karena ane gk mau punya readmore otomatis yang sering rusak yaa... terpaksa ane ngegugel .. ehh akhirnya ketemu disini dan ane pake langsung berhasil ... yasudah ane langusng kasih pengetahuan ini kepada kamu - kamu yang belum tahu :)
Simak cara berikut ...

Contoh Read more ...


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 sebelumnya sobat sudah menaruh kode auto readmore sebelumnya mohon di hapus dulu,kunjungi disitus mana ente dapet ilmu auto readmore nya supaya ente tahu mana saja yang harus di hapus.

3. Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F):
<!-- Auto read more script -http://buka-rahasia.blogspot.com- 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 -http://buka-rahasia.blogspot.com- 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 -http://buka-rahasia.blogspot.com- 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 expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
<!-- Auto read more -http://buka-rahasia.blogspot.com- End -->
Kostumisasi:
Ganti 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'/> 
Ganti url (direct link) gambar readmore dengan alamat url dimana anda mengupload dan menghosting gambar

---------------------------
Update (12102011):
Di komentar sobat Ari [buka-rahasia.blogspot.com]di bawah ditanyakan: bagaimana cara agar tampilan teks di post summary - auto readmore bisa rata kiri kanan (justified)
Lihat bagian ini pada script kedua di atas. Jika auto readmore sudah dipasang, cari dengan Ctrl + F:

<div expr:id='&quot;summary&quot; + data:post.id'>
Untuk membuat teks di post summary dlm readmore justify, tambahkan style css ini ke dalam tag: style='text-align:justify;'
Jadinya:
<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>
----------------
4. Preview terlebih dahulu, jika sudah beres, kemudian save.

Jika ada apa - apa tentang script ini harap memberitahukan masalahnya lewat komentar ...


mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

ARTIKEL TERKAIT:

2 comments

Anonim
20 Juli 2012 07.19

Ok thx gan ... ilmu sangat bermanfaat :)

17 Juli 2016 21.30

artikel bagus gan... jadi tau caranya bikin readmore...

Leave a Reply

Apresiasikan dengan memberi komentar :)
Tapi komentarnya dengan bahasa yang baik lho ...