Readmore memberikan efek simpel pada postingan blog. dan ini memberikan ruang yang cukup untuk menampilkan beberapa postingan dalam satu halaman blog.
untuk membuat Readmore pada blog dapat dilakukan dengan cara:
1. Pertama kita masuk dahulu pada dashboard blog dan edit templatenya. untuk caranya lihat disini.
2. setelah berada pada halaman edit masukan code berikut diatas code </head>
[code hl="1, 4, 7"]
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style>
.post-body{text-align:justify; color:#000000;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 5px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#000000; text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#ff0f00;}
.pic{border: 1px solid #fff;float:left; height:100px; width:150px; margin-right:5px; margin-bottom:5px; overflow:hidden; box-shadow: 5px 5px 5px #111;}
.grow img{height:100px;width:150px;transition: all 2s ease;}
.grow img:hover{width:175px;height:150px;border:5px solid #fff;float:left;height:150px;width:175px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
</style>
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 50; //banyaknya huruf jika tidak ada gambar
summary_img = 100; //banyaknya huruf jika ada gambar
img_thumb_height = 70;
img_thumb_width =100;
</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(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
[/code]
silahkan rubah kode yang berwarna merah sesuaikan dengan style template blog kita. untuk color itu menunjukan warna tulisan pada kotak readmore, Background yang pertama untuk warna kotak tulisan readmorenya, dan Background yang kedua untuk warna kotak readmore saat posisi kursor berada di atasnya. Warna Biru height untuk tinggi gambar jika dipostingnya ada gambar dan utnuk width itu lebarnya. Setelah selesai simpan templatenya.
Demikian langkah membuat Readmore pada blog mudah-mudahan ada manfaatnya......
