Cara membuat Read More otomatis di Blogspot dengan menambahkan kode javascript pada template blog. Kali ini yang akan saya bahas
mengenai cara membuat read more di blogspot atau blogger. Kenapa
cara membuat read more di wordpress tidak dibahas juga? wah kalao read more di wordpress tidak bisa dibuat secara otomatis, tapi dengan cara manual setiap postingan. Ok kita mulai bahasan mengenai
cara membuat read more otomatis di blogspot.
Bagaimana Cara membuat Read More otomatis di blogspot?
Cara membuat read more otomatis di blogspot sangat mudah. Sebelum melangkah ke
cara membuat read more otomatis di blogspot lebih baik kita tahu apa itu
read more? dan apa fungsi read more?
Read more dalam bahasa indonesia yaitu " Baca Selengkapnya " dan fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik.
Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca artikel penuh blog anda. Sekarang lanjut ke langkah
cara membuat read more otomatis di blogspot.
Langkah-langkah cara membuat Read More Otomatis di Blogspot
- Login ke Blog anda
- Buka halaman design > Edit HTML > centang Expand template widget
- Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
- Paste kode berikut tepat dibawah </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 src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>
- Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p> ( seperti biasan gunakan CTRL + F untuk mempermudah pencarian. Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama.
- Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah 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;padding-top:20px;'>
<a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
- Finish simpan template dan lihat hasilnya
Cara membuat Read More otomatis di Blogspot ini bisa anda rubah sebagian. Yang bisa dirubah adalah berwarna merah saja dan berikut ini adalah keterangannya :
- summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
- summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar
- img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan
- img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
- Anda juga bisa mengubah Icon read more http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif silahkan diganti URL icon yang anda inginkan. Atau anda ingin mengubah Icon Read more tersebut menjadi tulisan saja misalnya " >> Read more ", maka anda tinggal menghapus / mengganti kode <img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.
Semoga artikel
cara membuat read more otomatis di blog ini bermanfaat. Selamat mencoba dan semoga berhasil.
nyimak dulu gan, thanks sebelumnya :)
BalasHapusmonggo mz, sama sama dan terima kasih sudah berkunjung
BalasHapuswah keren... dah dicoba, berhasil. Tq
BalasHapushehe.. alhamdulillah kalo gitu mbak. :)
BalasHapusBerhasil......
BalasHapussudah beberapa trik yang sudah dicoba tapi hasilnya nihil.
Thank's bgt yak...
izin copas ke blogku boleh ga mas....???
@Heni_malini alhamdulillah kalo sudah berhasil mbak.. silahkan kalu maucopy ke blognya, jgn lupa kasi referensi link yah hehehe . thanks sudah mampir disini
BalasHapusberhasil.... makasih yah...
BalasHapustapi artikel q udah semuanya trus ada read more ?
bantuannya dong
follow blog gua dong
http://iandpryanto.blogspot.com/
success sob
BalasHapusmakasih banyak atas infonya,,
@Widy Apriyanto Hi Natsir
BalasHapusmantab.. thanks ya dah mampir
makasih ya infonya...
BalasHapussama sama :)
BalasHapusAslmkm... mksh mas tutorialnya..tdk ribet dan saya praktekin langsung jadi. cuma bagaimana ko artikel yang brada di laman Read morenya ga bs dibaca tiap clik read more cuma cuma artikel yang sama munculnya..mhn pencerahanya
BalasHapuskak knapa laman saya juga ada readmore nya dan gak bisa di buka
BalasHapus@greycoo: walaikum salam mz. kalau masalahnya itu mungkin salah penempatan kode. blognya yg mana mz?
BalasHapus@riko dwi santoso: g bisanya knapa mz. barusan saya lihat blognya sudah bagus dan ada read more nyatuh :D
BalasHapusbingung naruhnya di data post body, kaeknya lupa gak disebutin,
BalasHapus@Arit Nuansa Pagi: bukan ditaruk mz, tapi di ganti :D
BalasHapuswaaahh kereeenn. thx banget infonya. nice!
BalasHapus@Indradja: yup sama2 masbro :) thanks sudah mampir
BalasHapustnk's gan udah ana coba , n suksess..
BalasHapusseep berhasil gan
BalasHapusmakasih ya ....
maju terus
gak sukses brow artikelnya tetep panjang gimana nih???
BalasHapus@Saplak: sampean sudah pakai readmore sebelumnya? kalo iya biasanya terdapat 3 kode . coba dikembalikan dulu ke kode standard
BalasHapus@cobacendy: yup sama2 sob.. thanks sudah berkenan komentar dsini :)
BalasHapusgan kaga ketmu yang data post nya
BalasHapus@Blog'e Cah Majenang: coba juga cari yg
BalasHapus<p><data:post.body/></p>
Makasih banyak om..sunguh bermanfaat dan berhasil di praktekan..sebelumnya saya di buat pusing ama postingan sejenis tapi ga berhasil..dimana saya pemula.
BalasHapus@panen uang: iyah sama2 mas...:) thanks juga sudah mampir
BalasHapusthx sob atas infonya
BalasHapusmampir sob di AndreyKusanagi.Com
@Andrey Kusanagi: iyah, makasih sudah mampir
BalasHapusgotcha:D thanks a lot
BalasHapus@Flaviana, Dude :]: u'r welcome
BalasHapusterima kasih,
BalasHapussangat membantu
@mj_rock: iyah sama2 :)
BalasHapuswaduh gan... makasi banyakkkkkkkkk........
BalasHapus@my name is Adhe: iyah sama2..maaf linknya saya hapus,, :)
BalasHapusmakasih ya, udah banyak artikel tentang reed more yang aku baca, cuma ini yang berhasil. thanks :D
BalasHapus@RahmiFitriYanti: sama2 mbak. :) sudah malem masih lembur aja nih :D
BalasHapuspermisi om..saya mau tanya nih...di post saya berhasil membuat read more dari metode om, tapi kenapa di halaman saya muncul read morenya ga bisa terbuka...alias terpenggal tanpa ada kelanjutannya kalo dklik read morenya....mohon penjelasannya
BalasHapus@panen uang: barusan saya lihat blognya sudah benar mz.. tidak pake gambar kan hehe.. mantab :)
BalasHapusSalam.
BalasHapusTerima kasih perkongsian ilmu ini.
Makasih...
BalasHapusberguna banget....
jgn lupa mampir di mauraindria.blogspot.com ya.....
Syukran akhi.....
BalasHapusizin coba ya gan...
BalasHapusTerima kasih atas infonya...
@roha: iya sama2 thanks juga sudah mampir
BalasHapus@dakwahmudah: heuhe apanya sukuran?
BalasHapus@zankjex: silahkan mzbro
BalasHapus@Maura Indria Meidianing: iya sama2 thanks juga sudah mampir
BalasHapusHalo mas lam knal nih.
BalasHapussaya newbie, dah saya coba tapi postingnya malah hilang...mohon pencerahannya donk.
ditunggu kunjungan balknya ya.
coba di ulangi dan lebih teliti lagi.. kalau masih gagal laporan lagi :) biasanya yang bikin masalah penempatan kode yg salah :)
BalasHapusthanks gan tutor nya berguna bngets
BalasHapus@yudi s3ns3: iyah sama2 :)
BalasHapusthanks gan
BalasHapus@threerus_tm: iyah sama2
BalasHapusmangstab juragan, btw ane izin upload dulu script js di atas ke lampiran sitesgoogle ane ya gan, ntar ane link dari situ aja gan biar nggak ngrepotin he he
BalasHapus@Kerah Ledrek: silahkan masbro :)
BalasHapusTanya gan, kalo browsenya pake mozilla kenapa gak ngaruh ya?
BalasHapus@Kerah Ledrek: g ngaruhnya gimana bro?
BalasHapuspagenya tampil penuh lagi gak kepotong ganz, sekarang malah pake chrome juga kembali kayak semula....apa gara2 barusan ane addurl ama webmaster ya :hammers
BalasHapusboleh cek lapak nubi ganz, kerahledrek.tk
BalasHapusbtw ane izin kopas dech bt belajar :Yb tapi ane cantumkan kok sumbernya disana :maho
@Kerah Ledrek: add Url g ngaruh kok.. ini blog saya jg pake cara tsb.. :) salah penempatan kode pasti hehe. profil sampean g isa dibuka, redirect ke Google Plus
BalasHapus@BamZ:
BalasHapuskemungkinan sih gitu mas padahal td dah ok kok, cara nyari kesalahannya gimana nih kira2 he he
@Kerah Ledrek: caranya sama mas seperti anda memasangnya gimana, di paasang di sekitar kode apa,, atau kalau pakai Tulisan "read more" cari kata tersebut. atau link gambar readmorenya
BalasHapusweis betul ganz, salah kode he he sip dah tutorialnya ganz thx berat neh infonya. keep posting gan :Yb
BalasHapus@Kerah Ledrek: yoa mas sama2 :)
BalasHapussudah berhasil. makasih banget tuto-nya ya.
BalasHapus@nisa: sama2 mbak :)
BalasHapusgan, ane dh coba tapi koq di halaman (page) readmore'y gak bisa ke buka. Tapi klo di postingan bisa. Gmn ya?
BalasHapusGan... yg ini kan, setelah diklik read morenya langsung loading web kita..
BalasHapusada ga yg langsung otomatis munculin full post tanpa loading gi..??
Ty Gan
@Anonim: iyah halaman page ngikut juga, masih belum ada solusi nih :) nanti kalo sudah ada saya posting :)
BalasHapus@Ir. UjaNk: ya masbro saya juga masih cari cara biar read more kayak Spoiller modelnya. jadi tanpa loading .. doakan ada deh caranya hehe
BalasHapustanks infonya
BalasHapusmohon dicek
http://a-r-su-b.blogspot.com
@BamZ:
BalasHapusUpdate ganz, ane nemu yang bisa tanpa script juga, it's work :Yb
reff : http://blog.ahmadrifai.net/2011/04/membuat-read-more-tanpa-script.html
gagal mulu saya gan,,,,coba aj mampir di http://k-popnewsix.blogspot.com
BalasHapusBro saya baru mau coba, tertarik dengan banyaknya yg berhasil, tapi nyari script ini : "data:post.body dan p data:post.body p" gak ketemu, gimana Bro, minta pencerahanya, tq
BalasHapus@AullyARSA:di coba lagi hehe
BalasHapus@Suhalim: di cari salah satunya saja mz :)
@Kerah Ledrek: sip
mkasih ya ,postingnnya ,sangat bermanfaat buat pemula seaperti saya ..
BalasHapusjanan lupa berkunjung ya do www.arhyblogger.blogspot.com
Peluang bisnis bagi mahasiswa, klik disini untuk membacanya http://sejahterawithoriflame.blogspot.com/p/peluang-bisnis-modal-kecil-online.html
BalasHapusatau untuk info bisa hubungi kami di independent_oriflame@consultant.com
@My Blogg Diary: iyah
BalasHapus@Median: semoga sukses bisnisnya :)
BalasHapusMohon bantuannya??blognya bagus sy sdh coba read morenya muncul tp kok g berubah.trim's...
BalasHapus@HASIL KARYAKU: mungkin salah penempatan kodenya. coba di ulangi lagi dengan lebih teliti
BalasHapusyah mudah - mudahan berhasil, thanknya...
BalasHapus@andika: iyah,,, semoga berhasil
BalasHapussaya mencari kode dalam HTML blog saya gak jumpa padahal dah pake ctrl + f, gimana ni mas ....
BalasHapus@KANTOR URUSAN AGAMA KECAMATAN KERINCI KANAN: semua blog pasti ada kode tersebut mz, karena kode tersebut adalah kode isi artikel atau posting
BalasHapusmantep infonya ...
BalasHapus@indro haryo prabowo: yup sama2 :)
BalasHapusMaksih gan tutornya Berguna banget.....
BalasHapus@BobS84: iyah gan sama :)
BalasHapusikut nyimak Gan
BalasHapus@Oki Satriyono: kalo cuma nyimak g kira bisa :). harus praktek kwkkw
BalasHapusgan, boleh nyedot gak?
BalasHapushttp://ronaldorico.blogspot.com
@ricoronaldo: nyedot apanya
BalasHapusTips for Unlock Iphone 4 w Anyone who has access to an iPhone ought to happen to be disclosed to your account additionally they requires unlock iPhone 4 g ideas, ordinarily connected with specialized computer program that may be in addition protected.Then again, it may be rather frustrating for you to unlock someone's i actually cell phone if you refuse to find a very good completely new apple iphone4 detaching the shut at program.There are a variety in promotions in all places, yet, with no specific realizing that are available, entirely caught, therefore several options some vast hard cash relating to almost nothing. korvax
BalasHapus@Anonim: sini kasih saya Iphone gratis kwkakwa
BalasHapustiap saya butuh sesuatu, googling trus nemu beberapa artikel yang saya butuhin dan nyoba, rata2 ga berhasil tapi kalo make caranya mas BamZ pasti berhasil...thanks utk ilmu2 nya mas Bamz Samson :D
BalasHapus@Hojindo: Hospitality Job Indonesia: iyah sama2 mas. :) jangan lupa gabung di twitter sama FB fansclub :)
BalasHapuspengen nyoba tapi kok susah ya
BalasHapushttp://puisir3maja.blogspot.com/ maen disini ya saya masih baru
wah makasi banget mas atas infonyamampir ya http://dhe2-komputer.blogspot.com/
BalasHapusmakasih atas sarannya
BalasHapus@raive: apanya yang susah.
BalasHapus@sang petualang: yah sukses promonya
BalasHapus@imam asriningrat: yup sama2
BalasHapusAne udah coba ternyata sukses gan...
BalasHapusmksh gan...
klo membuat readmore tanpa javascript gmn bos
BalasHapus@add media computer: ok sama2 gan :)
BalasHapus@Berita Aneh: wah enak tuh bisa lebih cepet loadnya
BalasHapuskok kode-kodenya aku cari gak ada yah? semua udah aku coba padahal. Mohon pencerahannya :)
BalasHapus@Erla Ayu Pertiwi: kode yang mana mbak,, bisa lebih dijelaskan lagi
BalasHapusgan ada yang tau mengatur gambar di home blog gak? mksdnya kan kadang ada gambar yang sebelum read more itu pasti tertera kan di home blognya. nah cara mengatur gambar itu agar kuran gambarnya lebih kecil di home agar post2 yang sebelum read more itu sama semua ukuran gambarnya. dan ketika kita read more baru muncul gambar dengan ukuran yang sebenarnya..
BalasHapusplease bantu ya para master..
@Libas Habis: cari img_thumb_width , itu untuk ukuran lebar dan img_thumb_height untuk tinggi :D
BalasHapusMantab.......
BalasHapusBerhasil, thnks informasinya.....
@Joenoes: okeh mas sama2
BalasHapusLagi belajar.
BalasHapusBang saya udah pasang redmore otomatis dari tutor abang. tapi pas saya posting baru kenapa yang muncul kode2 gtu, coba liat di www.diz-net.blogspot.com
tolong solusinya bang, thnx...
barusan saya cek di blognya sudah bener tuh
Hapuswah bagus banget mas nice nya,,, coba dulu ahhh nice post mas ijin sedotttt nice post..........
BalasHapussilahkan, thanks kunjungannya
Hapusmantap bos...
BalasHapusyua,, thanks kunjungannya
HapusOk thanks,,,mantaffff,,,,
BalasHapushem boleh cek,,,http://busro-alkarim.blogspot.com/
sep dah thanks kunjungannya
Hapus