cara membuat Colom Template Read More Otomatis

Pemenggalan kalimat dalam postingan atau istilahnya Readmore, akan lebih mudah jika dilakukan secara automatis. Selain lebih tertata rapi karena kolom main post yang dihasilkannya akan berukuran sama , baik lebar maupun tingginya juga dengan memasang Readmore Otomatis, kita tidak usah lagi memenggal kalimat dengan memasukkan  " Insert Jump Break " Lagi , Karena secara otomatis nantinya akan dipenggal sendiri .

Jika dalam postingan ada gambar, meskipun gambar itu disimpan ditengah atau dibawah, nantinya gambar itu akan ditampilkan dalam ukuran tumbnail di halaman muka seperti contoh di bawah ini :

Gimana, mau mencobanya...?
Langsung saja kita ke cara memasang readmore Otomatis .
Sigin di draft blogger
Dalam dasbor masuk Tata letak --> Edit HTML
Centang Expand Template Widget
Readmore otomatis ini menggunakkan kode javascript, jadi copy kode javascript dibawah ini :

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 300;

summary_img = 250;

img_thumb_height = 50;

img_thumb_width = 50;

</script>

<script type='text/javascript'>

//<![CDATA[

/******************************************

Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks

********************************************/

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+'" /></span>';

summ = summary_img;

}

var summary =  imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

Paste kan diatas kode ini </head> , Silahkan di save dulu .

Sekarang Cari kode ini :<p><data:post.body/></p>

biasanya disimpan diatas ini :<!-- clear for photos floats -->
Ganti kode  <p><data:post.body/></p>
 dengan kode dibawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id' style='text-align: justify;'>

<p><data:post.body/></p>

</div>

<script type='text/javascript'>

createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<a expr:href='data:post.url' style='float:right;padding-top:10px;'>[Read More...] - <data:post.title/></a>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<p><data:post.body/></p>

</b:if>

Jangan lupa jika beres memasukkan kode diatas di save.
Sedikit penjelasan :

var thumbnail_mode = "float";  ( float: letak thumbnail berada di  kiri atau jika tidak silahkan ganti dengan " no-float " ).
summary_noimg = 300; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 50; (tinggi Thumbnail dalam pixel)
img_thumb_width = 50; ( lebar Thumbnail dalam pixel)


jika kita ingin menghilangkan judul post didepan Readmore, tinggal menghapus kode ini :

<data:post.title/>



Silahkan sesuaikan yang menurut anda sesuai dengan kolom template anda .

..... .SUMBER. .....

Related Articles