Cara Mempersingkat Postingan Artikel Blog dengan Readmore

Cara Mempersingkat Postingan Artikel Blog dengan Readmore - Walaupun sudah banyak yang membahas cara memasang Readmore (Baca Selengkapnya) untuk mempersingkat Postingan Blog, tapi tidak ada salahnya saya bahas di sini. Memang secara default fasiltas read more ini tidak disediakan oleh blogger tapi bisa kita siasati dengan menambahkan sedikit kode HTML ke dalam template kita.

Fungsi Read More juga mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. bisa disebut dengan fasilitas image thumbnail bisa diliat di blog ini.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image.

Untuk lebih jelasnya langsung kita praktik, Ok?

Pertama login ke blogger.com, pilih Template, kemudian masuk ke Edit HTML.

Pada halaman Edit HTML, Cari kode </head> untuk memudahkan pencarian klik Ctrl+F. Kemudian letakan script berikut tepat di atas kode </head>.

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430;summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 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>

Keterangan:

var thumbnail_mode = "float" => Letak thumbnail berada di “float” kiri atau jika sobat tidak menginginkan demikian silahkan ganti dengan “no-float”.
summary_noimg = 250;  => Jumlah karakter yang akan ditampilkan di posting tanpa menampilkan gambar postingan.

summary_img = 250;   =>  Jumlah karakter yang akan ditampilkan di posting dengan menampikan gambar postingan.

img_thumb_height = 120; => Ukuran tinggi gambar dalam satuan pixel.

img_thumb_width = 120;  => Ukuran Lebar  gambar dalam satuan pixel.

Masih pada halaman Edit HTML, lalu cari kode <data:post.body/> Kalo sudah, ganti kode <data:post.body/> dengan semua 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;padding-top:20px;'>

<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

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

</b:if>

Keterangan:

Sobat juga dapat menggantikan tulisan readmore   dengan tulisan lain seperti "Baca selengkapnya".

Setelah itu simpan dan lihat hasilnya. Selamat Mencoba..

Artikel terkait :