Home / Trik dan Tips Blog / Cara Membuat Read More Versi 3 ( Automatis + Thumbnail )

Cara Membuat Read More Versi 3 ( Automatis + Thumbnail )

Posted by Unknown Jumat, 25 November 2011 0 komentar

Rasanya tutorial ini udah banyak di ketahui oleh para sahabat blogger, tapi hanya untuk sekedar sharing aja…apa salahnya….siapa tau ada blogger pemula seperti saya yang masih kebingungan tentang masalah readmore….he…he…he…
Sesuai namanya Readmore versi 3 berbeda dengan readmore versi sebelumnya, yakni versi 1 dan versi 2…karena di readmore versi 1 dan versi 2, kita harus mengatur batas perpotingan text sevcara manual…nah tapi dengan readmore versi tiga atau yang lebih di kenal dengan Read More Automatis + Thumbnail ini bisa menentukan jumlah karakter text yang akan menjadi abstraksi postingan kita…karena itulah di sebut Readmore Automatis..karena kita gak perlu ribet-ribet lagi untuk mengatur posisi perpotongan text dengan meletakkan text sebelum kode <span class="fullpost"> dan sisanya sebelum kode </span>, karena itu udah ketinggalan zaman…he..he…he…

Selain kelebihannya yang otomatis …readmore versi 3 ini juga memiliki kelebihan lain, yakni mampu menampilkan thumbnail dari gambar pertama postingan, untuk mewakili isi dari postingan kita

He..he…he…keren kan…???

Kalau para sahabat blogger tertarik denagan readmore versi 3 ini,
Ikuti aja langkah-langkah di bawah ini :

1. login dulu ke akun Blogger kamu

2. Pilih Layout > Edit HTML

3. Letakkan kode berikut di di bawah kode </head>

<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; margin:0px 10px 5px 0px; padding:0; border-right:2px solid #ccc; border-bottom:2px solid #ccc;"><img src="' img[0].src '" width="' img_thumb_width 'px" height="' img_thumb_height 'px"/></span>';
summ = summary_img;
}

var summary = imgtag '<span>' removeHtmlTag(div.innerHTML,summ) '</span>';
div.innerHTML = summary;
}
//]]>
</script>

<script type='text/javascript'>
var thumbnail_mode = "float";
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 125;
img_thumb_width = 120;
</script>

Catatan :
var thumbnail_mode = "float"; = Menentukan posisi thumnail
summary_noimg = 500; = Jumlah karakter bila tidak menggunakan thumbnail
summary_img = 400; = Jumlah karakter bila menggunakan thumbnail
img_thumb_height = 125; =Tinggi thumbnail
img_thumb_width = 120; = Lebar thumbnail

4. Klik Save Template

5. masih ada di kolom Edit HTML, lalu centang Expand Widget Template

6. Cari kode <data:post.body/>, dan ganti kode tersebut dengan kode berikut:
<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>

7. lalu Save template nya.

Catatan :

Tulisan READ MORE - bisa anda ganti sesuai keinginan kamu .jika kamu ingin mengubahnya ke bentuk gambar…klik aja [ di sini ]

oke deh semuanya dah rebes beres, silahkan di cek aja, gimana tampilan readmore baru kamu…He…he…he…
Selamat mencoba, Semoga berhasil , dan jangan lupa tinggalkan komentar

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Cara Membuat Read More Versi 3 ( Automatis + Thumbnail )
Ditulis oleh Unknown
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://azharadzuan.blogspot.com/2011/11/cara-membuat-read-more-versi-3.html. Terima kasih sudah singgah membaca artikel ini.