Bagi para
pemula membuat blog, ada tips untuk membuat penampilan tulisan kita kelihatan
ramping dan minimalis, yaitu dengan memasang Read More.
Cara Pasang Read More Otomatis di Blogspot memang ada beberapa macam
cara, tapi untuk kali ini saya ingin berbagi kepada kawan seperti yang saya pakai sekarang.
Saya akan berikan triknya buat kawan yang saat ini masih belum menemukan
caranya, atau ingin kawan ingin mengganti cara lama dengan cara baru seperti
yang saya punya ini. Semua orang awalnya pasti merasa sulit melakukannya, namun
dengan mengikuti petunjuk dibawah ini, saya yakin kawan pasti bisa, hehehe kaya
kampanye politik aja.
Langsung saja kita coba praktekan cara membuat read more otomatis seperti di bawah ini:
Oh ya, perlu diperhatikan juga bagi Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi kawan sesuaikan saja)
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>
Jika kawan sudah lakukan langkah tersebut diatas, maka kita akan lanjutkan langkah-langkah selanjutnya :
PERTAMA, silahkan menuju menu DESIGN -> Edit HTML, Cari kode
</head> kemudian letakan script dibawah ini di atas kode </head> jangan lupa save template terlebih dahulu.
Selanjutnya Copy kode dibawah ini :
Langsung saja kita coba praktekan cara membuat read more otomatis seperti di bawah ini:
Oh ya, perlu diperhatikan juga bagi Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi kawan sesuaikan saja)
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>
Jika kawan sudah lakukan langkah tersebut diatas, maka kita akan lanjutkan langkah-langkah selanjutnya :
PERTAMA, silahkan menuju menu DESIGN -> Edit HTML, Cari kode
</head> kemudian letakan script dibawah ini di atas kode </head> jangan lupa save template terlebih dahulu.
Selanjutnya Copy kode dibawah ini :
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 280;
summary_img = 250;
img_thumb_height = 70;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 2px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>
</b:if>
</b:if>
Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu cari kode seperti dibawah dengan menekan ctrl F : ketik <data:post.body/>
<data:post.body/>
Jika telah kawan temukan, ganti kode <data:post.body/> dengan semua kode dibawah ini dengan cara copas.
<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:left'><a expr:href='data:post.url'>READ MORE -
<data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Jika langkah tersebut diatas sudah selesai dilaksanakan, tinggal klik Preview.
