Cara Membuat Read More Di Blogger (Cara 1)- [Tips]

iHola Readers ^,^

Aku membawa tips lagi nih, untuk kalian pengguna Blogger. Pasti masih belum banyak yang tahu tentang Read More di Blogger. Blogger dan Wordpress sangat berbeda dalam pengaturaan Read More atau Baca Selengkapnya. Jika di Wordpress bisa mengatur dengan mudah karena sudah tersedia pengaturannya. Berbeda dengan Blogger, kita harus mengaturnya secara manual. Memang sedikit sulit, tapi jika kalian membaca artikel ini sambil mempraktekannya maka akan lebih mudah. :)

Berikut langkah-langkahnya:

• Seperti biasa, kalian harus masuk ke akun Blogger kalian.
• Setelah itu, kalian klik Template.
• Lalu pilih Edit HTML.
• Kemudian letakkan kode di bawah ini tepat di atas kode html </head>.

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

Untuk memudahkan kalian mencari kode </head>, kalian kilk tombol Ctrl + F, kemudian tuliskan kodenya dan klik enter.

• Kemudian tempelkan kode berikutnya, terlebih dahulu cari kode <data:post.body/> dan ubah kode tersebut dengan kode di bawah 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>
<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> 


Jika kalian bingung dengan kode <data:post.body/>, karena terdapat banyak kode tersebut. Kalau kalian memakai template standar, maka yang harus diganti adalah kode <data:post.body/> yang kedua.

• Jika sudah selesai, klik save template. Lalu, lihat hasilnya.

Selamat mencoba dan semoga berhasil ^.^ 


Sumber Artikel: Berguru SEO