Pada postingan sebelumnya sudah pernah saya bahas tentang cara membuat read more atau baca selengkapnya. Hampir sama dengan postingan saya kali ini, namun read more otomatis memiliki kelebihan yaitu postingan akan terbagi menjadi 2 bagian secara otomatis.
Untuk read more otomatis ini, dibutuhkan kode javascript yang sebenarnya bisa sobat simpan sendiri di tempat biasa sobat menyimpan file secara online. Namun kali ini script read more diletakkan langsung di template tanpa menggunakan hosting untuk mencegah errror saat hosting yang kita gunakan untuk menyimpan kode script-nya sedang down.
Buat blogger baru, saya sarankan menggunakan read more otomatis saja ketimbang read more yang biasa. Karena tentunya sobat tidak akan repot membagi 2 postingan sobat dengan kode manual.
Berikut langkah – langkah dalam membuat read more otomatis :
- Silahkan login ke blogger terlebih dahulu.
- Klik Tata Letak.
- Kemudian klik Edit HTML.
- Centang Expand Template Widget.
- Letakkan kode berikut ini tepat diatas kode </head> :
<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </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> - Untuk yang sudah pernah menggunakan read more versi lama (manual), sebaiknya sobat kembalikan dulu kodenya seperti semula. Hapus kode yang saya tandai dengan warna biru di bawah ini, sesuaikan dengan template sobat, karena setiap template berbeda - beda :
<div class='post-header-line-1'/>
sehingga sekarang hanya ada satu <data:post.body/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/> - Kemudian hapus kode : <data:post.body/> atau <p><data:post.body/></p>
-
Ganti kode tersebut dengan kode berikut 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: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> - Kemudian Simpan Template.
Keterangan :
- summary_noimg = 450 –-> untuk tinggi postingan tanpa gambar.
- summary_img = 360 –-> untuk tinggi postingan dengan gambar.
- img_thumb_height = 120 –> tinggi gambar.
- img_thumb_width = 150 –> lebar gambar.
- Read More… –> bisa sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan.
Silahkan sobat atur sesuai template sobat. Selamat berkreasi.
Tweet
|
Berlangganan artikel terbaru via Email
|
64 comments
wah...akhir'a nemu juga..
thx..like this..likr this..
Miscah emang jago dalam mengulik java script
salut
thanks sob atas tutorialnya
Hehe.. mantep Gan..
sip.. dah. Keep posting bro..
waaah,,makasihhh,,bgdz,,udh bisa read more neh blog akhu,,,
keren mas..saya dah coba. saya ada masalah sedikit mas, bisa bantu kan? kalo pengen posting mengenai pribadi untuk tidak tampil di menu bar 'home', tapi tampil di menu bar 'about' gimana caranya. trus contact form yang saya bikin juga tampil di home bukan di menu bar 'contact' gimana mengakalinya yaa? makasih mas....sukses yaa!
@Bullirus : maksudnya mgkn About Me yg tampil di sidebar kali ya..coba pd halaman dasbor klik Edit Profil, trus u/ menampilkan di halaman sidebar klik Tata Letak -->> Elemen Halaman -->> Tambah Gadget -->> klik Profil trus Simpan...mgkn itu maksdnya ya, jd About Me jgn di posting sob tp di Edit Profil aja masukkan ket tentang dirimu..
Om..http://miskahiper.fileave.com/read-more-otomatis.js gak bs diakses, jd readmore otomatisnya gk jalan, ada alternate link buat didownload om...thx
iya mas,,
read moreQ juga gak aktif,,
didownload scrptnya kok jadi format HTML?
pengennya Q simpen di online storageQ
cara hapus read more gimana yaaaaaaaaa?
@ Gisela : hapus aja kode yg sdh gisela tambahkan sebelumnya..
ooh oke, trimss
kalau membuat tautan otomatis bisa ga mas?
maksudnya, misalkan kita ngetik "sesuatu" pada postingan truss langsung menuju link yang kita mau. bisa ga ya ?
thanks
@ atman : mgkn maksud mas atman, buat link dlm postingan ya, kan ada di menu postingan blogger dgn tab tautan
trimakasih saya dari dulu nyari yg kaya gini.ternyata manjur.....makasih ya sob
mas, kalau pake kode diatas berlaku gag sama readmore gambar ?
mas, pada html template saya ga ada kode
yang ada kode seperti berikut...
kode itu ga bisa dihapus... setiap kali dihapus psti gagal mengedit templatenyaa... jadi bagaimana solusinya ?
@ Fajri Alhadi : klo mo buat read more otomatis gambar saja yg ditampilkan pada halaman depan, silahkan cari kode summary_img = 360 ganti angka 360 dgn angka NOL, maka yg akan muncul hanya gambar saja pada halaman depan
Makasih buanget boosss....
terimakasih infonya sangat bermanfaat
mas kalo postingannya dikit tetep otomatis keluar readmorenya sich,,,
jadi agak ribet caranya gimana ya,,, yang sedikit ga pake read more tapi kalo yang banyak/panjang baru pake read more
Bos Q kok gagal pasang readmorenya, padahal Q pake tamplate hasil donload dari sini
Beh....hebat-hebat para senior ini...
Masih bbbuuuuaaaanyaaaakkkk yang belum saya tahu. tapi setelah liat blog ini jadi bingung, banyak banget infonya. Mulai dari mana ini. tapi jadi lebih tahu dari sebelumnya...kayaknya betah belajar disini. Perkenalkan, saya orang kampung tapi suka internetan..biar gak gaptek2 amat.
terima kasih infonya...
mau tanya dunk mas..
saya sudah berhasil buat read more automatis, tapi kok di menu navigasi halaman saya ada read morenya juga, dan anehnya tuh halaman gk bisa kebuka walaupun sudah di klik readmorenya.
jadi solusinya harus gimana mas ?
silahkan mas liat blog saya di bagian halaman :
http://www.sukses-one.co.cc/p/blogroll.html
mohon pencerahannya mas
@ArhiezOne : coba km ganti kode no.8 dengan kode berikut :
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
@dody : tetep gk bisa tuh, malah lebih parah lagi, gk ada tulisannya di stiap page blog saya ..
kok bisa gitu yah ??
@dody : tetep gk bisa mas, malah tambah aneh, gk ada tulisan di stiap page blog saya.
masalahnya dimana yah ??
sungguh aneh -_-"
oke dech postingannya.
sudah saya coba dan akhirnya berhasil dan sesuai dengan yang saya ingikan.
terima kasih banyak,salam kenal sesama blogger ya
@dody : tetep gk bisa mas, malah lebih parah, gk ada tulisannya di stiap page.
jadi harus gimana lagi nih ..
ass. mas mau nanya nih..gimana tuh caranya buat halaman baru tanpa ada readmorenya, soalnya templateku ada readmore otomatisnya?
bagus artikelnya mas.,,terima kasih
readmore berfungsi untuk memendekkan artikel.nice tips.
hhaahahaaa... !! cuma mao bilang ,..wueeh Muanteebbb ne blognya..thxs..
Terima kasih atas infonya, sangat membantu sekali khususnya untuk saya seorang newbie
mkasih info'ny,, sangat bermanfaat,, sudah saya coda dan ternyata berhasill,, thanks,,
mampir k blog saya,,
http://zonabebasberekspresi.blogspot.com/
maaf acak"an,, newbie jd msih bingung,, :D
om saya mau nnya nie, template saya kan ga ada sintaks seperti tulisan om yg No 7, klu saya mau bikin read more gimna donk om ??
mohon pencerahan nya
tq my brother ^^
kok gabisa sih ? kenapa yaaaa ? pas ditulis di atas kode headnya kok gabisabisa sih ?
monggo ke blog saya maap saya masih pemula hehe http://bellasinakamurariko.blogspot.com/
Waaah...mantab banget mazzz....singkat dan jelazzz...matur suwun...
Cara membuat read more otomatis udh lama sy praktikkan dr tutorialnya mas dody n sukses akan tetapi setelah tulisan Read more.... Yang sy tanyakan, bagaimana cara menghilangkan tulisan judul artikel yang menyertai tulisan Read more...tsb ?
Maklum nyubie..mohon ditengok di http://ellalayla.blogspot.com.
@Ella Layla : coba perhatikan kode dibawah ini
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read More … <data:post.title/></a></span>
hapus kode yg sy tebalkan
@Dody FariaL
,,,resepnya emang tokcer abis. Kmudian iseng2 "left" sy ganti mjd right dan setelah tulisan read more tanda ... sy gnti dg >>>, eh sukses jg, krg tampilan blog sy jd terlihat lebih manis hehe...
Trims yo mas dody.
kereeeeenn,,,....
top top top,, haaahaa
thank u brooo..
punya saya sudah bisa tapi,gak kepotong malahan tetep fullpost tlus tulisan read moreny masi ada di gimain caranya?
kalo mau ngecek lengkapnya coba liat di
http://rizky1997.blogspot.com
http://www.smamardiutomo.co.cc/
mas, mau nanya nih,,,gmna cara mengubah warna pada tulisan baca selengkapnya,,,soalnya gak bisa dibedain warnanya...sebelumnya thx atas tutornya,,sangat bermanfaat
Kenapa ada Normal 0 false false false IN X-NONE X-NONE ... ??
Mohon dibantu mengatasinya !
Trims atas panduannya pak, kini blog saya sudah bisa dipasangi read more...tutorial di sini sangat sangat bermanfaat bagi saya dan pemula seperti saya..update terus ya pak...
salam sukses
Disini memang tempat Surganya para Blogger, thanks gan
tengkyu tengkyu...udah berhasil...
ada yg berhasil..tp ada artikel yg ga da summary-nya, tertulis: 12.00 Normal 0 false false false IN X-NONE X-NONE MicrosoftInternetExplorer4 ...ada lg: v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} Normal 0 false false false false IN X-NONE X-NONE MicrosoftInternetExplorer4 ...
ada lg :Normal 0 false false false IN X-NONE X-NONE ...
sib, sukses dicoba
Makasih info.a!
Kode yang ada di langkah nomor 7 tuh ada dimana sih? Nggak ketemu-ketemu, emosi aku -____-
klo kita punya laman, khan lamannya jga kena read more otomatis, tp pas mau dbka readmore nya gag bsa kok malah ke readmore lgi ?
makasih mas toturialnya...tapi ada sedikit masalah.."read more" nya ada doubel sama "baca selengkapnya" tadinya ganti template yg udah include read more otomatis...tapi hasilnya jadi double...gimana mengatasinya mas?
oh..iya ...template yg sy pake tamplina lama bukan fitur baru...mohon pencerahan...
coba cek di http://aa-yudisa.blogspot.com
Makasih mas
terima kasih mas, tips read more otomatisnya sudah dimanfaatkan nih.
http://iwankusnawan.blogspot.com
saya sudah mempraktekannya dan berhasil tetapi kok yang anehnya di bawah tulisan read more nya tulisan yang lengkapnya ada dibawah read more ?
jadi maksudnya, dibawah read more langsung tercantum tulisan lengkapnya...
kenapa ya ?
mohon bantuannya
monggo mampir dlu mas untuk cek
http://jodyciu.blogspot.com/
Myanmar Housing!
The Biggest Real Estate Web Portal in Myanmar !
coba pake textarea sob,, biar lbih gmpang copasnya
Tp, mkasih lah tipsnya, sy coba dulu, mudah2n
berhasil
makasih infonya gan
Sob, kode data post bodynya ada dua. Kode no. 8 tu ditarok ke yang ke 1, 2, ato dua duanya?
makasih bnyak bro ud share,lumayan nambah wawasan saya :)
Terimakasih banyak sudah share. Sangat membantu sekali ;)
Posting Komentar