Pasang Auto Read More di Blogger Posts

Posted by Herman on Monday, September 20, 2010 37 comments

Saya yakin pembaca sudah tidak asing dengan fitur read more yaitu sebuah metode untuk menyembunyikan sebagian isi artikel dari halaman depan blog agar tampilan blog terlihat lebih rapi dan profesional.

Untuk metode read more yang lama, biasanya pemilik blog harus menyelipkan kode pada setiap postingan agar fitur read more bekerja. Kelemahan dari cara ini tentu kurang praktis.

Nah bagi anda yang tidak mau repot, anda bisa menggunakan fitur 'auto read more'. Dengan fitur ini anda tidak perlu lagi menambah kode read more dalam setiap postingan namun sistem akan secara otomatis menghasilkan link read more untuk postingan anda. Dengan cara ini tentu kerja kita akan menjadi lebih ringan.

Nah bagi anda yang ingin menerapkan sistem auto read more pada blog anda langsung saja ikuti langkah-langkah dibawah ini.

Catatan:
Bagi anda yang pernah memasang read more manual harap dihapus terlebih dahulu kodenya sebelum memasang kode auto read more.


1. Login ke Blogger. Masuk ke menu Design->Edit HTML
2. Beri centang pada "Expand Widget Templates"
3. Letakkan kode dibawah ini tepat diatas </head>

<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>

Keterangan:
summary_noimg = 300 menunjukkan jumlah karakter yang ditampilkan tanpa gambar
summary_img = 301 menunjukkan 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.

4. Kemudian cari <data:post.body/> atau <p><data:post.body/></p>

5. 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. Silahkan lihat hasilnya

Seperti biasa anda bisa mengkreasi sendiri link read more misal dengan menambah judul posting didalamnya atau mengganti link read more dengan gambar. Caranya sama dengan read more manual. Selamat mencoba!!

Jika ada yang kurang jelas silahkan bertanya melalui kolom komentar saya akan berusaha membantu anda.


Recent Posts:

37 comments

TIANSHI Indonesia said... 22 September, 2010
Terima kasih informasinya, tips menarik.
Herman said... 25 September, 2010
@Tianshi: thanks sob :)
enoy said... 04 November, 2010
=(( mas, kok setelah saya pasang read more otomatis ini, saya gag bisa pasang tombol sharing is sexy' dan tombol share yang lain,,,gimana solusinya mas? tolong di bantu ya mas....
EghaXXx said... 21 November, 2010
Thank you banget brooo...
numpang nax nih,,, klo mw ganti background blog pake gambar gmana ya ??? tapi gambarx fit ma layarnya gitu,,,, he...he...
sorry ru pemula...
martos said... 26 November, 2010
makasi infonya gan. postingnya mantap.
jalan-jalan juga ke blog ku ya...
I need any feedback, kritik dan saran tentang blog ku.
raul said... 07 December, 2010
nice infonya gan..saya sudah cb untuk auto readmorenya, tp kenapa template tidak bisa disave ya?mohon pencerahannya gan....suwun...=))
Iyud said... 08 December, 2010
Gimna nii bang...
templatku gak ada ""
kalo blogku yang satunya(www.bai-alhidayah.co.cc) udah bisa tapi yang 1-nya ini gak ada(amanahcomp.blogspot.com, gimana cara meng-akalainya. thanks before ~x( ~x( ~x(
Iyud said... 08 December, 2010
maksku tanda petik ("") tadi adalah gak ada -data:post.body- nya. ;))
raul said... 16 December, 2010
mas, saya sudah bisa sekarang untuk implement ilmunya....terima kasih ya mas.
Herman said... 27 January, 2011
klu -dataost.body- memang gak ada mas, yang ada itu <data:post.body/> :)
Ainatul Radhiah said... 27 January, 2011
wah makasih ya...^_^ keren simpel banget codingnya, ga sepanjang yang lain cara bikin read morenya.
Aksatriya Diwangkara Nusantara said... 21 February, 2011
@Herman keren mas :)
sueerrr said... 15 March, 2011
makasiih bro
sangat membantuu :D
FAT4LITY said... 17 March, 2011
agar postingan sebelum readmore bisa tampil rata kanan kiri gimana bang ?
gaAra said... 25 March, 2011
ijin share yah mas...
:-bd
Muhammad Faishal Hafizh a.k.a HPeaceArtWork (H'ArtWork/H'AWork) said... 25 June, 2011
thx bgt sob... sangat bermanfaat nih tutornya... :) baru tau kalo ada yg auto read more..
Faiq Qushoyyi said... 17 July, 2011
nice ,, readmore ini yang paling saya suka ..
makasih gan ..
Saiful A. Zy said... 19 July, 2011
Mantap ..... Udah ane terapin sob. Tq yaa ....
Triple-A said... 23 July, 2011
Alhmadulillah mantappp cuy.. thanks yoo
Lilih Prilian Ari Pranowo said... 27 July, 2011
Mau tanya mas, apakah berbeda dengan format yang dimiliki oleh blogger sendiri?

Best Regards,
Lilih Prilian Ari Pranowo
www.lilihprilian.com
AA SULE said... 22 August, 2011
Agan para master Blog, Ane mau tanya..ane coba pake kode diats utk bikin "Read More", sukses buat posting di halaman utama, tapi koq untuk halaman Profil ane ga bisa kebaca ya klo "Read More"-nya di klik... mohon pencerahannya.. ;)

Thanks.
Aa Sule
frizi go said... 18 September, 2011
kunjunganya gan lagi bleajar ngeblog ni
Admin said... 27 September, 2011
berhasil di blog saya mas... terima kasih atas tutorialnya...

sekalian mohon agar blog saya di kunjungi..
Brankas Investasi said... 27 September, 2011
thanx for tutorial :X
Devon Madiyanto said... 28 September, 2011
mas gmna carany bira readmorenya cma ada d home aj g d semua pages blog? thx
Fuad XP said... 24 October, 2011
Ko masih ga bisa ya om?? mohon bimbinganya..
ANGGA.FIRMANSYAH said... 18 December, 2011
Bagus gan infonya..
Thx, nih sebelumnya..
komen balik di
http://anggafirmansyah1.blogspot.com
Fuad Ridho said... 27 January, 2012
nyari aja kepala ane ampe puyeng... :(
udien said... 15 March, 2012
kang herman setelah saya coba pake kode auto readmore nya koq malah muncul kode width="150px" height="150px"/> di halaman depannya.. gimana neh kang tolong bantuin. blog ane www.teknotipsup.blogspot.com
TMM 999 said... 01 April, 2012
Terima kasih infonya gan,,,
gudang cheat said... 17 September, 2012
hanya sekedar mampir,,,!!

di tunggu follback nya yah,..!!


:))
budi seplawan said... 05 October, 2012
terima kasih mas atas tutorialnya,alhamdulillah sudah saya praktekan disini Budi seplawan
Ady Ajust said... 01 November, 2012
thank sob... ditunggu kunjungannya http://warehousefor-download.blogspot.com/ ;;)
rmat said... 20 November, 2012
kok gk bisa muncul beberapa postingan knp ya, mohon bantuanya
Roby Wakas said... 06 December, 2012
tq gan nice informasi,,,,roby wakas berkunjung yah
adi nugraha said... 21 December, 2012
salam kenal bro, ijin pake script. mohon pencerahan neh, image dah nongol tapi summary koq ga kebaca, yg keluar malah format tulisan html, ty jawabannya
Anggi Kristianto said... 31 January, 2013
maksih infonya...berguna sekali,,,boleh kalu mau ganti gambarnya dengan gambar yang ada di komputer gimana ya...?

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment