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>

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

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

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>

Klik Preview, kalau sudah berhasil klik Save

Tambahan :

summary_img adalah jumlah karakter yang akan ditampilkan dalam penggalan dengan thumbnail.
summary_noimg adalah jumlah karakter yang akan ditampilkan dalam penggalan tanpa thumbnail
img_thumb_height dan img_thumb_width adalah ukuran tinggi dan lebar gambar, Sobat blogger bisa menyesuaikan angka tersebut.
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

Login ke akun blogger anda
Masuk ke Template > Edit Html
Centang tanda expand template widget
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/AVvXsEjpVpNXSLefrP3ZvWb9xR7NFWzx2SuIehiRx4HtwMsMYPuopyYt5kjj4F4MeFWsV8aXNhm3eRAMBt-M9ZQo2fnffvORUXbkKMHauXqFk271jEo7L4Bfcq-YAlwRqG87qphb1_iLjEMUCrJP/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 != "static_page"'><b:if cond='data:blog.pageType != "item"'><div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><div class='readmore-wrap'><a class='readmore' expr:href='data:post.url'>Baca Selengkapnya »</a></div></b:if></b:if><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><b:if cond='data:blog.pageType == "static_page"'><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/

Cara Membuat Readmore Otomatis Versi Terbaru

2 komentar:

Random Post

Advertise

Sosial Media

Followers

Site Info