Cara Membuat Read More Pada Tampilan Blog Baru


CARA MEMBUAT READ MORE ATAU BACA SELENGKAPNYA PADA POSTINGAN DI BLOG - Untuk para newbie atau pemula blogger pasti bingung apa itu read more atau baca selengkapnya pada blog. Manfaat read more atau baca selengkapnya yaitu untuk mempersingkat isi bacaan dari blog kita agar tak semuanya terbaca karna jika ostingan terlalu banyak bacaan lainnya jadi tidak nampak karena tertutup artikel sebelumnya. Dan manfaat read more atau baca selengkapnya adalah bisa untuk merapihkan tulisan dan juga gambar dari postingan anda. Mungkin jika kita searching di google akan banyak tutorial membuat read more atau baca selengkapnya, namun itu mayoritas adalah postingan pada blog yang tampilan lama. Disini saya akan membantu anda para blogger pemula atau newbie untuk membuat read more atau baca selengkapnya pada postingan anda dengan tampilan blog yang baru. Mungkin sedikit agak rumit namun semoga dapat membantu.

CONTOH MEMBUAT READ MORE ATAU BACA SELENGKAPNYA

  • Silahkan log in dulu pada akun anda.
  • Buka Template > Edit HTML
  • Cari kode </head> dengan menggunakan CTRL+F agar mempermudah mencarinya.
  • Copy paste kode dibawah ini tepat di atas kode </head>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>   
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, (for blogspot)

by: http://trikseosimple.blogspot.com/
********************************************/
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>
  • Simpan Template anda
  • Kemudian klik "Lompat Ke Widget" pada pilihan diatas dan pilih "Blog1"
  • Cari kode <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
  • Kemudian cari kode <b:includable id='post' var='post'>.........</b:includable>
  • Klik panah hitam yang sejajar dengan tulisan diatas.
  • Selanjutnya cari kode <data:post.body/>
    •  Setelah ketemu hapus kode diatas dan ganti dengan kode dibawah ini:
    <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>
    <span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
  • Klik SAVE / SIMPAN dan lihat hasilnya.
Memang terlihat sulit, namun jika kita mengikuti satu per satu dari tutorial diatas maka kita akan bisa memperaktekannya.
Semoga berhasil.