Membuat Auto Readmore Otomatis dilengkapi Thumbnail

Bagi Sebagian blogger, Readmore merupakan hal yang penting karena dapat mempersingkat postingan di halaman depan sebuah blog. Selain itu, dengan readmore, tampilan sebuah blog akan bagus dan simple. Untuk itu, dalam membuat readmore harus menampilkan readmore yang bagus juga. Dan tentunya Otomatis.

Bagi sebagian blogger ada yang menggunakan readmore bawaan blogger, ada juga menggunakan script dan merubah kode CSS. Untuk membuat readmore bawaan blogger, anda dapat menentukan sendiri dimana postingan anda yang harus dipotong dengan cara mengklik ikon kertas sobek (insert jump break) pada menu saat membuat postingan disamping gambar insert a video.

Untuk yang merubah kode CSS biasanya memasukkan kode yang lain dan menyertakan javascript. Berikut langkah membuat auto readmore otomatis dilengkapi thumbnail.

Contoh Readmore dilengkapi Thumbnail

Login ke blog anda.
Klik Rancangan.
Pilih Tab Edit HTML.
Klik Download Template Lengkap untuk membackup data anda.
Centang kotak Expand Template Widget.
Cari Kode </head> dengan menekan tombol Ctrl+F di keyboard anda dan masukkan </head> pada kotak pencarian.
Masukkan Kode Dibawah ini diatas kode </head> tadi.

Code:

<script type='text/javascript'>
var thumbnail_mode = "float";
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
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>

Selanjutnya cari kode <data:post.body/>.
Hapus dan ganti dengan kode dibawah ini.
Kode :

Code:

<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'><strong>Baca Selengkapnya.....</strong><data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan :

• Silahkan Ganti Tulisan "Baca Selengkapnya....." dengan yang anda inginkan.
• Untuk menghilangkan judul postingan setelah tulisan "Baca Selengkapnya.....", silahkan hapus <data:post.title/> pada <strong>Baca Selengkapnya.....</strong><data:post.title/></a></span>.
• Untuk merubah menjadi gambar, ganti <strong>Baca Selengkapnya.....</strong><data:post.title/> dengan <img src='URLgambarmu' alt='read more'/> dan masukkan URL gambar anda.
•  var thumbnail_mode = "float"; Jika tidak ingin diletakkan di kiri (float) ganti tulisan float dengan no-float.
• summary_noimg = 250; Banyak karakter yang akan ditampilkan pada postingan tanpa gambar.
• summary_img = 250; Banyak karakter yang akan di tampilkan pada postingan dengan gambar/thumbnail.
• img_thumb_height = 120; Tinggi ukuran gambar/thumbnail dalam ukuran piksel.
• img_thumb_width = 120; Lebar ukuran gambar/thumbnail dalam ukuran piksel.

Selamat Mencoba semoga Bermanfaat.  Jangan lupa untuk klik tombol +1 yang berada di bawah postingan ini. :)

Artikel Terkait