Membuat Read More di Blogger

Di sini ane akan sedikit share tentang cara membuat Read More pada setiap post yang kita posting di blogger. Caranya sederhana kok cukup ikutin aja tutorial singkat di bawah ini.

Nah yang pertama, 

-  ente harus masuk dulu ke blogger.com

-  Pilih template 

-  Lalu pilih yang edit html 

-  Sebelumnya jangan lupa untuk memberi centang pada "expand widget templates"

-  Kemudia Cari kode </head> (tekan CTRL + F untuk mempermudah  mencari kodenya) dan setelah menemukannya letakkan kode dibawah ini tepat diatas kode </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 350;
summary_img = 300;
img_thumb_height = 50;
img_thumb_width = 50;
</script>

<script type='text/javascript'>
//<![CDATA[
/*
Bumi Informasi
http://bumi-informasi.blogspot.com - Kumpulan Berita dan Informasi Terbaru
*/
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>

-  Selanjutnya, cari kode <data:post.body/> dan jika sudah ketemu, ganti kode tersebut dengan kode dibawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</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 == &quot;item&quot;'><data:post.body/>

</b:if>

-  Nah ini  bagian yang paling asik, setelah semuanya selesai maka ente save template.

Ente bisa nikmatin deh hasilnya.
Semoga bermanfaat :)