Merasa Blogger sejati? Silakan klik Tombol 'SUKA' dibawah ini ya .....

!

Membuat Read More Dengan Thumbnail (Icon)

Sesuai judulnya, kali ini kita akan membahas tentang penggunaan Read More dengan mode Thumbnail/Icon.
Sebenarnya ini adalah versi Read More punyanya  o-om (Agus Ramadhani) yang saya modifikasi dengan tambahan thumbnail. Mohon maaf bagi beliau yang tulisannya saya comot. hihii :))

Langsung saja kita mulai.
Pertama, masuk ke mode Design > Edit HTML (Expand Widget Template) lalu temukan kode </head>
dan letakkan kode berikut tepat diatasnya:

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


Langkah kedua,  temukan kode <data:post.body/> atau <p><data:post.body/></p>
ganti salah satu kode di atas dengan kode di bawah ini:

<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:right'><a expr:href='data:post.url'><img alt='read_more' src='
http://i945.photobucket.com/albums/ad291/zeromania/read_more_biru.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


Keterangan: 
  • summary_noimg = 250 : berarti jumlah karakter yg dipenggal tanpa gambar
  • summary_img = 250 : berarti jumlah karakter yg dipenggal disertai dg gambar
  • img_thumb_height = 120 dan img_thumb_width = 120 : ukuran gambar dalam satuan piksel
  • http://i945.photobucket.com/albums/ad291/zeromania/read_more_biru.png : bisa sobat ganti dengan URL dimana menyimpan logo read morenya

Terakhir jangan lupa simpan template Anda dan lihat hasilnya..

Untuk pilihan icon Read More, bisa menggunakan beberapa tombol berikut:

 http://2.bp.blogspot.com/_cBqgjADBBko/TKgl77kBE8I/AAAAAAAAAZs/V_zHbd9XFvk/s1600/readmor5.png

 http://3.bp.blogspot.com/_cBqgjADBBko/TKgl8w9FXfI/AAAAAAAAAZw/xwOcH6mefQo/s1600/readmor6.png

http://3.bp.blogspot.com/_cBqgjADBBko/TKgnAN5Lc2I/AAAAAAAAAaI/PaikoNcMF8M/s1600/readmor7.png

 http://1.bp.blogspot.com/_cBqgjADBBko/TKgnBdmtKpI/AAAAAAAAAaM/3whvXaguiH4/s1600/readmor8.png
 http://4.bp.blogspot.com/_cBqgjADBBko/TKgl9zYci-I/AAAAAAAAAZ4/UE6N2-9Dbuw/s1600/readmore2.png
 http://3.bp.blogspot.com/_cBqgjADBBko/TKgm_TrrJZI/AAAAAAAAAaE/kFfuf_-usG4/s1600/readmor10.png

 http://3.bp.blogspot.com/_cBqgjADBBko/TKgl9V-iV0I/AAAAAAAAAZ0/QA4P2K0MyRU/s1600/readmore1.png

 http://4.bp.blogspot.com/_cBqgjADBBko/TKgl9zYci-I/AAAAAAAAAZ4/UE6N2-9Dbuw/s1600/readmore2.png

 http://4.bp.blogspot.com/_cBqgjADBBko/TKgl-ZqmYHI/AAAAAAAAAZ8/90sxoVPS4aE/s1600/readmore3.png

http://3.bp.blogspot.com/_cBqgjADBBko/TKgl-33MxSI/AAAAAAAAAaA/6FG4IFcolhw/s1600/readmore4.png


Selamat mencoba :))
 

17 Responses to "Membuat Read More Dengan Thumbnail (Icon)"

  1. boleh ni dicoba^^ \
    maksih infonya

    BalasHapus
  2. wih bagus nih, aku save ya sob :)

    BalasHapus
  3. makasih infonya fren...thx dah mampir yah, aku dah follow, follow me ya fren...;D

    BalasHapus
  4. wah.wah..mantaf..mantaf....bole dicoba juga neh

    BalasHapus
  5. @Septian
    ok bro,,, thx udah berkunjung :))

    BalasHapus
  6. @_@ haduh masih bingung... tolong carikan ato buatkan video tutorial edit html yang ini dunk... tentang jump break. Bisa nggak? kalo dah dapat comenntar di blogku ya...

    >> http://netterondemand.blogspot.com/

    BalasHapus
  7. pa mungkin... Templatnya harus diganti kali ya...??

    BalasHapus
  8. @ うちはサスケ :
    sebenarnya mudah saja sob.. jangan dilihat kode2 yg panjang itu. cyukup ikuti langkah tempatkan kode yg pertama (yg panjang itu)
    lalu ikuti langkah ke2nya.. selesai!!!

    oya jangan lupa klik Expand Widget Templates agar kode yg dicari ketemu !!
    ok, good lack

    BalasHapus
  9. read morenya ada yg lain kah?
    bisa diganti sama gambar yg lain gak?
    hehehehh

    BalasHapus
  10. @Luthfie chan: bisa donk, asal kamu punya gambar dan URL-nya. diganti foto owa juga bisa klo mau narsis... kwkwwk

    BalasHapus

Terimakasih^^

wdcfawqafwef