Cara Membuat Read More di Blog

Cara Membuat Read More di Blog

Salam hangat sobat cwek cowok blog, sebenarnya mungkin saja cara membuat read more di blog belum banyak mengetahuinya termasuk admin yang masih newbie. Dan sudah banyak yang posting, lantas mengapa admin post lagi karena mungkin banyak yang kurang paham apalagi yang masih newbie macam admin, ditambah lagi postingan yang kebanyakan di google cukup rumit. Setelah mutar kesana kemari akhirnya ketemu juga caranya, so admin hanya membagi pengalaman saja yah.

Dalam tutorial ini saya menggunakan Template Sederhana (standar) yang disediakan Blogger. Dan adminpun menggunakannya yang simple saja biar gak ribet dan mudah dipahami

Tanpa banyak basi-basi lagi langsung saja pada topiknya :

Cara Membuat Read More di Blog

1.      Sobat silahkan login di blogger

2.      Klik Thema dan pilih edit HTML

3.      Klik CTRL + F, dan cari kode html </head>

4.      Letakkan kode dibawah ini, tepat diatas kode </head>

Gambar 1

 Lihat gambar 1

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 275;
summary_img = 275;
img_thumb_height = 120;
img_thumb_width = 120;
</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>

5.      Lanjut dan cari kode ini <data:post.body/> dan ubah dengan kode HTML di bawah ini. 

Gambar 2

gambar 3

Lihat gambar 2 dan 3

<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-link'><span class='arrow'>›</span> <a expr:href='data:post.url'>Read More</a></div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

6.      Sobat cewek cowok blog ingat kode <data:post.body/> yang diganti adalah yang kode kedua setelah kode itemprop='articleBody'> . kebanyakan sobat blog kurang paham disini sehingga gagal dalam membuat read more di blog, termasuk admin juga sih. Maklum masih newbie di dunia blogger

7.      Jika sobat sudah copas kode diatas sobat tinggal simpan dan lihat hasilnya

gambar 4

Nahh sobat cewek cowok blog sampai disini sudah paham kan, cara membuat read more pada blog. Tapi sobat tampilan laman page juga pasti muncul read more dibawah ini cara untuk menghilangkan read more pada lama

Cara menghilangkan readmore pada laman page

Naah setelah selesai otomatis lama page juga akan muncul read more untuk menghilangkannya berikut caranya :

Masih di <data:post.body/> yang kita edit tadi supaya muncul read more kalau sudah keluar ikuti langkah diatas yaah.

Lihat gambar 5 dibawah ini :

Gambar 5

  <div class='post-body entry-content'>

Tambahkan kode dibawah ini tepat di bawah kode tepat setelah kode ( <div class='post-body entry-content' )

    <b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/><data:post.body/><b:else/>

setelah selesai lihat dibawahnya ada kode

    <div style='clear: both;'/> <!-- clear for photos floats -->

Lalu tambahkan di atasnya Kode

    </b:if>

yang terakhir SAVE dan lihat hasilnya


otomatis tulisan read more pada laman page akan hilang, semoga bermanfaat yaah sobat cewek cowok blog