Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Auto Read More dengan Thumbnail

Auto Read More dengan thumbnail, adalah solusi atau bisa dikatakan Blogger hacks untuk menampilkan fungsi read more di blog. Bahkan script ini menampilkan thumbnail gambar, baik itu disimpan di awal, tengah atau akhir. Cotohnya kaya di blog ini :


Langsung aja langkahnya :

1. Login ke Blogger. Dasbor > Rancangan > Edit HTML, centang "Expand template widget"
2. Simpan kode dibawah ini, tepat sebelum </head>
 <script type='text/javascript'>var thumbnail_mode = "no-float" ;
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>
Kode yang dapat di rubah :

summary_noimg = 430; (karakter yang ditampilkan tanpa gambar)
summary_img = 340; (karakter yang ditampilkan dengan gambar)
img_thumb_height = 100; (ukuran tinggi thumbnail gambar)
img_thumb_width = 120; (ukuran lebar thumbnail gambar)

3. Cari kode <data:post.body/>, dan ganti dengan kode ini :
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<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;padding-top:20px;'><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>
</b:if>
Kode yang betanda merah, bisa diganti sesuka anda, misalkan Read More, Baca Selengkapnya, dll

4. Save.

Gampang bukan? gimana hasilnya?

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

12 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Berhasil............. tks :)
  2. makasih scriptna
    thanks banget
    :D
  3. kang, ana pake cr read more yg lawas, kl pake ini apa hrus ganti yg lama n terus apa msh ngutik2 postingx, seperti ana selama ini kang hrus dicari sampai texs mn dlu yg mw dipotong...?
  4. mantap bos, aq ijin nyimak bos, sekalian coba aq praktekkan,,,
  5. berhasil!!!!! thanks....
  6. saya juga berhasil.. Arigatou..^^
  7. Thx kang, sukses 100% :D
  8. nya yg keberapa kang?
    thanks before
  9. Saya mau nanya nih Kang sehubungan dengan tips blog di atas. Untuk memasukan kode pemanggil alternatif pada gambar thumbnail readmorenya gimana ya bila perlu dengan title gambarnya
  10. mantap kang
  11. kang .. saya pake template super seo dari kang ismet cara bikin auto readmorenya gimana ? saya masih bingung ..
    mohong pencerahannya kang master ismet :)
  12. gak berhasil punyaku kang...
    mohon bantuannya... kuganti dengan tulisan "baca selengkapnya" tapi tetap aja nongol "read more"
    :(
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.