Mengganti Readmore Versi 1 dan Versi 2 Dengan Auto Readmore - E-Learning With Blog
Headlines News :
Home » » Mengganti Readmore Versi 1 dan Versi 2 Dengan Auto Readmore

Mengganti Readmore Versi 1 dan Versi 2 Dengan Auto Readmore

Written By Ahmad Nurhakim on Sabtu, 07 Januari 2012 | 21.20

Pada bahasan sebelumnya, mengenai auto readmore, saya sudah berjanji akan membahas mengenai cara mengganti readmore versi 1 dan versi 2 dengan auto readmore. Karena bagi beberapa sobat yang sudah terlanjur menggunakan readmore versi 1 atau versi 2, mungkin masih kesulitan jika harus menggantinya dengan auto readmore.

Sebenarnya jika sobat masih ingat kode yang digantikan ketika membuat readmore versi 1 atau versi 2, tidaklah susah untuk mengubahnya menjadi auto readmore ini, karena hanya tinggal menghapus kode-kode tersebut dan menggantikannya dengan kode auto readmore.

Ok deh, untuk lebih jelasnya kamu bisa mengikuti langkah-langkah berikut:

Mengganti Readmore Versi 1 Dengan Auto Readmore
  • Dari dasbor, pilih Rancangan - Edit HTML.
  • Lakukan duplikasi template untuk jaga-jaga jika bermasalah.
  • Beri tanda checklist (centrang) pada Expand Template Widget.
  • Copy script berikut lalu letakkan (paste) di bawah kode </head> (antara </head> dan <body>):
    <script type='text/javascript'>
    summary_noimg = 700;
    summary_img = 500;
    img_thumb_height = 150;
    img_thumb_width = 200;
    </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:
    summary_noimg = jumlam karakter yang ditampilkan jika artikel tidak memakai gambar (misal: 700 karakter)
    summary_img = jumlam karakter yang ditampilkan jika artikel memakai gambar (misal: 500 karakter)
    img_thumb_height = tinggi gambar thumbnail (misal: 150px)
    img_thumb_width = lebar gambar thumbnail (misal: 200px)
  • Setelah itu carilah kode berikut:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>.fullpost{display:none;}</style>
    <p><data:post.body/></p>
    <a expr:href='data:post.url'>Readmore »»</a>
    </b:if>

    Kata Readmore »» mungkin saja berbeda tergantung dulu kamu membuatnya.
  • Ganti kode tersebut dengan kode ini:
    <!-- Awal Readmore -->
    <p>
    <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='readmore' style='float:right; font-style:italic'><a expr:href='data:post.url' expr:title='data:post.jumpText + &quot; &quot; + data:post.title'>Readmore...</a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
    </p>
    <!-- Akhir Readmore -->

    Catatan:
    Jika mau, kamu dapat mengganti perataan tek sebelah kanan (right) dengan kiri (left), atau mengubah style huruf italic dengan normal. Kamu juga bisa mengganti tulisan Readmore... dengan kata lain atau dengan gambar (image).
  • Simpanlah hasil editing ini dan ucapkan alhamdulillah...


Mengganti Readmore Versi 1 Dengan Auto Readmore
Untuk mengganti readmore versi 2, ikuti saja langkah-langkah seperti pada artikel Menambahkan Auto Readmore Pada Blogspot, kemudian cari lalu hapus kode:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link' style='text-align:right'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>

Jika kamu tidak menghapusnya pun tidak akan menjadi masalah.

Ok, segitu aja sob. Semoga bermanfaat .....


Share this article :

0 comments:

Speak up your mind

Tell us what you're thinking... !

SubScriber

Masukan alamat Email kamu disini untuk mendapatkan artikel terbaru..!

Add to Google Reader or Homepage

Join Member

 
Support : Creating Website | Johny Template | Mas Template
Proudly powered by Blogger
Copyright © 2011. E-Learning With Blog - All Rights Reserved
Template Design by Creating Website Published by Mas Template