Cara Membuat Auto Readmore Bergambar di Blogger

Read More ini dilengkapi dengan thumbnail gambar dengan otomatis mengambil  gambar pertama pada postingan.
Untuk mengaktifkan fitur auto read more pada blogger silahkan ikuti cara berikut

1. Login ke akun Blogger anda.
2. Masuk ke menu Template > Edit HTML
3. Beri centang pada "Expand Widget Templates"
4. Letakkan kode dibawah ini tepat diatas </head> untuk memudahkan pencarian tekan Ctrl+F atau F3

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 301; img_thumb_height = 150; img_thumb_width = 150; </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");
if(img.length<1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><img src="http://2.bp.blogspot.com/_0Nr--qemD8Y/TCLunoOn0SI/AAAAAAAAAsU/PFNWur48hKg/s1600/def-thumb.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><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>
5. Kemudian cari <data:post.body/> atau <p><data:post.body/></p>
6. Ganti kode tersebut dengan 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:left'><a expr:href='data:post.url'><b>Read more &#187;</b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><p><data:post.body/></p>
</b:if>
6. Kalau sudah, simpan template anda.
7. Selesai.

Keterangan :

summary_noimg = 300 jumlah karakter yang ditampilkan tanpa gambar
summary_img = 300  jumlah karakter yang ditampilkan termasuk gambar
img_thumb_height = 150 menunjukkan tinggi gambar thumbnail
img_thumb_width = 150 menunjukkan lebar gambar thumbnail
float:right menunjukkan posisi gambar thumbnail di kanan. Jika anda ingin gambar thumbnail berada di kiri ganti right menjadi left
img src="http://2.bp.blogspot.com/_0Nr--qemD8Y/TCLunoOn0SI/AAAAAAAAAsU/PFNWur48hKg/s1600/def-thumb.png" adalah gambar cadangan yang muncul jika tidak ada gambar dalam postingan. Anda bisa ganti gambar cadangan dengan gambar lain atau hapus saja alamat gambarnya jika anda tidak mau menggunakan gambar cadangan.


Sumber: http://www.mas-adhie.web.id/2012/08/cara-membuat-autoreadmore-blogger.html

Cara Membuat Auto Readmore Bergambar di Blogger Rating: 4.5 Diposkan Oleh: Seribu Arsp

3 komentar:

-Wildan Taupiq mengatakan...

ane pemula ni ..
setelah muter2 ahirnya di sini ane bisa membuat read more ma kasih banyak gan.....
sukses untuk Mu gan

Fandi Firmansyah mengatakan...

trimkasih ya....

andin zandinzahra mengatakan...

Thanks for sharing this Krishan. Beautiful to read about the Awakin circle at the other end of the country. :-)

I definately enjoy every little bit of it and I have you bookmarked to check out new stuff of your blog a must read blog
- Milna Bubur Bayi Organik, MPASI Terbaik untuk Si Kecil
- Manfaat Yoghurt Heavenly Blush Untuk Kesehatan
- RCA Sparepart Motor Berkualitas Terbaik dengan Harga Terjangkau di Indonesia
- Perlindungan Asuransi Kesehatan Dengan Unit Link Commonwealth Life
- Rexco 50 Pelumas Anti Karat

Posting Komentar