Cara menambahkan Readmore (baca juga) diblog

 Halo guys..kali ini saya akan bagikan tutorial cara menambahkan readmore diblog.

 Mari langsung ke materi saja ya, dan untuk mempraktekkannya baca dengan seksama dan pelan-pelan artikel ini agar tidak mengalami kesalahan yang mengakibatkan tidak berjalannya cara ini di template blog teman-teman semua. Oke, ini lah tampilan readmore yang akan kita buat kali ini.

Cara membuat readmore di blog

Cara Membuat Readmore di Blog Agar Template Keren

1. Masuk ke blogger masing-masing dan klik Template >> Edit HTML nya.
2. Saat masuk gunakan CTRL+F untuk mencari kode ini </head>
3. Kemudian masukkan kode di bawah ini tepat di atas kode yang telah di cari di pon ke 2
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 200;
summary_img = 200;
img_thumb_height = 120;
img_thumb_width = 110;
</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>
4. Selesai itu, cari lagi kode ini <data:post.body/>
5. Ganti kode yang di cari di atas  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>
6. Sampai di sini selesai, maka simpan template teman-teman dan lihat hasilnya dengan klikPratinjau Template atau Lihat Blog

Agar Tampilan Readmore ini menjadi lebih menarik lagi, maka teruskan caranya dengan langkah berikut ini

1. Cari kode ini ]]></b:skin>
2. Lalu masukkan kode di bawah ini dan letakkan di atas ]]></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;
}
3. Selesai deh, dan tampilannya pun semakin menarik

Nah itulah tutorial cara menambahkan readmore buat blog...sekian dari saya, wasallam^-^

Bagikan Artikel ini