Cara Membuat Readmore V2 di Blog Lebih Keren

Readmore v2 di Blog keren

carablog4 kali ini akan update dengan materi yang sama sebelumnya mengenai redmore, kali ini berbeda dengan yang sebelumnya karena ini menjadikan tampilan kita menjadi terlihat keren dengan redmore yang memiliki jarak antara tulisan artikel dengan redmore nya sendiri. Pembahasan sebelumnya readmorenya terlihat menyatu dengan artikel sehingga terlihat tidak memiliki readmore.

Mau baca artikel sebelumnya silahkan ke sini cara membuat readmore v1

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.

Readmore v2

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

Cara membuat readmore v2- Sekian artikel carablog4 kali ini semoga bermanfaat dan bisa di praktekkan dengan baik dan tidak mengalami kegagalan. Update terus blog carablog4 untuk mendapatkan informasi-informasi menarik lainnya seputar blog. Salam blogger....!!!

Baca juga : Cara membuat template keren di blog bagi pemula