Membahas tentang desain blog (Blogspot) memang susah-susah gampang.
Tanpa harus belajar sangat dalam tentang HTML maupun JavaScript, kita
dimudahkan karena banyak teman-teman blogger yang disana membagikan cara
Membuat Read More, cara menghilangkan tulisan diberdayakan oleh
blogger, desain blog dan lain-lain.
Cara Membuat Read More pada Blog
Pada kesempatan kali ini saya akan share cara membuat read more pada blog dan berikut adalah caranya:
Silahkan buka blogger.com kemudian pilih Template, Edit HTML dan jangan
lupa untuk memberi tanda centang pada Expand Template Widget. Tapi
sebelumnya anda perlu untuk memback up template blog anda terlebih
dahulu demi keamanan template anda jika terjadi Galat (Error).
Cari kode </head> (tekan CTRL + F) dan letakkan kode dibawah ini tepat diatas kode </head>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 100;
summary_img = 100;
img_thumb_height = 50;
img_thumb_width = 50;
</script>
<script type='text/javascript'>
//<![CDATA[
/*
kursus komputer
http://kursuskomputerbogor.blogspot.com - kursus komputer
*/
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 2px 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>
Setelah itu, cari kode <data:post.body/> jika sudah ketemu, ganti kode tersebut dengan kode dibawah 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>
<span class='rmlink' style='float:right;font:normal 9px Arial;text-transform:uppercase;padding:2px 5px 0 0;'><a expr:href='data:post.url'><img src='https://lh6.googleusercontent.com/-FwOHKtFSP5I/UObRrk3BRHI/AAAAAAAAAeI/m-C5R2snR5M/s108/Read%2520More.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>
Jika selesai, klik simpan! Namun jangan menyimpannya terlebih dahulu,
sebaiknya pratinjau, jika anda rasa tidak ada masalah pada template
anda, klik simpan!
