Cara membuat Read More gampang dan mudah di blog - Membuat readmore cepat dalam beberapa detik

Untuk saat ini informasi yang Admin berikan merupakan dasar-dasar dari dunia per-bloggeran. Dikarenakan menurut Admin segala sesuatu yang mendasar harus dishare agar tidak hilang didalam peredaran. Walaupun agak lawas, namun Admin rasa info ini masih sangat berguna bagi para newbie yang ingin mulai nge-Blog.
Langsung saja masuk ke inti dari judul postingan ini, bagaiamana cara membuat readmore gampang dan mudah ? Silakan ikuti tutorial dibawah :

Cara Membuat Read More di Blog gampang dan mudah

• Masuk ke Template dan klik Edit Template
• Klik CTRL + F, dan cari kode html </head>
• Letakan kode dibawah ini, diatas 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>

•  Lanjut dan cari kode ini <data:post.body/> dan ubah dengan kode HTML 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>

• Disini banyak blogger yang bingung, karena ada banyak sekali kode <data:post.body/>, kalau pakai template standar / template default yang diganti adalah yang kode Kedua ( itemprop='description articleBody' )
• Jika sudah tinggal anda klik Save dan lihat hasilnya. Jika cara membuat read more di blog Anda berhasil, maka hasilnya akan seperti gambar dibawah ini.

Untuk membuat tampilan dari readmore semakin menarik dan gaul. Silakan ikuti tutorial tambahan dibawah ini :

Cara Membuat Read More di Blog Lebih Menarik

• Sama seperti langkah cara membuat read more diatas, yang pertama adalah buka Template lalu klik Edit
• Klik CTRL + F dan ketikkan ]]></b:skin> lalu klik Enter
• Masukkan kode css dibawah ini tepat diatas ]]></b:skin>.

.arrow {
font-size: 18px;
font-family: serif;
font-weight: 900;
}
.readmore-link {
margin-top: 20px;
border-bottom: 1px solid gainsboro;
margin-left: 250px;
}

• Langkah terakhir tinggal anda klik save template.
• Silahkan cek tampilan readmore yang baru, maka akan terlihat seperti gambar dibawah ini.

Begitulah tutorial dari Cara membuat Read More gampang dan mudah di blog semoga bermanfaat untuk para blogger dan newbie.