Cara Membuat Readmore Otomatis Versi Terbaru

Sebelumnya blog saya ini ngak ada readmore nya..tapi setelah saya cari2 dg usaha keras dan diiringi dengan do'a saya akhirnya bisa membuat readmore otoamtis versi terbaru..saya ucapkan terimakasih buat sobat saya Rizaldi Priantama Blog dan Lenterablogger yang telah memberikan ilmu nya tentang Cara membuat readmore otomatis di blog..untuk membuat readmore otomatis disini ada 2 versi, Tanpa panjang lebar langsung saja prakteknya sobat...

• Versi Tulisan Teks Biasa 

Caranya lihat dan perhatikan baik-baik.

 Cara Buat Auto Read More :

• Login dulu di akun blogger sobat
• Dari Design, klik Edit HTML dan tandai Expand Widget Template
• Back Up terlebih dahulu template sobat.
• Cari kode </head>
• Tambahkan kode berikut Setelah atau di bawah kode </head>

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
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(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 -->

• Setelah itu, cari kode <data:post.body/>
• Ganti kode <data:post.body/> dengan kode berikut :

<!-- Auto read more Start -->
<!-- http:lenterablogger.blogspot.com -->
<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 End -->

• Klik Preview, kalau sudah berhasil klik Save

Tambahan :

1. summary_img adalah jumlah karakter yang akan ditampilkan dalam penggalan dengan thumbnail.
2. summary_noimg adalah jumlah karakter yang akan ditampilkan dalam penggalan tanpa thumbnail
3. img_thumb_height dan img_thumb_width adalah ukuran tinggi dan lebar gambar, Sobat blogger bisa menyesuaikan angka tersebut.
4. Kata "Read more" bisa di ganti dengan kata yang sobat blogger inginkan misalnya : Baca Selengkapnya, Lebih Lengkap, Baca Lagi, Selengkapnya, dll.

•  Versi Tulisan Teks dengan Highlight Background

Caranya lihat dan perhatikan baik-baik

1.  Login ke akun blogger anda
2. Masuk ke Template > Edit Html 
3. Centang tanda expand template widget 
4. Cari kode ]]></b:skin>, lalu letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

.readmore-wrap{margin-bottom:5px;float:right;-moz-border-radius:4px 4px 4px 4px;-khtml-border-radius:4px 4px 4px 4px;-webkit-border-radius:2px 4px 4px 4px;border-radius:4px 4px 4px 4px;overflow:hidden;}a.readmore{color:#666;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiffCTxrsHHwbXb7NWqrDIPF8DH6YpWzGgg57DClMe0lmyS0FDxfLYypRRrTXen-mU43IDAdotvoFu3jHkfWgZB_t5f8qXTwTRZh-Xl9vlKFT1Y_Kg8EKS5RXLLhW3mqRgcsR33_CHtAmi/s1600/readmore-bg.png) left top repeat-x;border:1px solid #C4C4C4;padding:5px 14px;font-size:11px;line-height:11px;display:block;text-decoration:none;text-shadow:0 1px 0 #fff}a.readmore:hover{color:#fff;background:#1A90CB left -124px repeat-x;border:1px solid #333;text-decoration:none;text-shadow:0 1px 0 #222}

     6.  Setelah itu, anda cari lagi kode </head>. Letakkan kode dibawah ini tepat diatas kode </head>

  

<script type='text/javascript'>
summary_noimg = 550;
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>

      7.  Sekarang anda tinggal memasangkan script readmore di bagian blog anda, silahkan cari kode   <data:post.body/> ( Jika anda menemukan 2 kode, pilih kode yang pertama saja ) . Lalu ganti kode <data:post.body/> dengan kode dibawah ini 

 <p><b:if cond='data:blog.pageType != &quot;static_page&quot;'><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><div class='readmore-wrap'><a class='readmore' expr:href='data:post.url'>Baca Selengkapnya &#187;</a></div></b:if></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if><b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if></p>

    8.  Ganti Baca Selengkapnya dengan kata yang anda sukai
    9.  Simpan Template dan lihat hasilnya



Sekarang tergantung sobat mana yang sobat suka silahkan pilih untuk membuat readmore otomatis di blog.
Akhir kata saya ucapkan selamat mencoba dan semoga bermanfaat..

Sumber : http://lenterablogger.blogspot.com/ dan http://rizaldipriantama.blogspot.com/