Cara Membuat/Memasang Auto Readmore Blogger/Blogspot (Plus Thumbnail)

Update: 
 Lihat Cara Membuat Auto Readmore (Thumbnails) Blogspot V2 (Penyempurnaan) yang merupakan penyempurnaan dari script auto readmore ini, pengecualian tampilan auto readmore pada halaman statis (static pages) telah ditambahkan.

Pertama-tama, bapak ibu sekalian, auto readmore memudahkan kita dalam membuat posting. Memasang fitur ini membuat kita tidak perlu membubuhkan kode <!--more--> atau mengklik tanda setiap kali melakukan posting.
Fitur auto readmore akan mengurangi pekerjaan ini karena secara otomatis semua posting yang muncul di halaman-halaman utama (misalnya home, search query results, tag results, dll) akan terpotong dengan readmore.

Berikut langkah-langkahnya:
1. Masuk ke editor template HTML. Download template terlebih dahulu untuk amannya.
2. centang expand widgets template.
3. Masukkan script berikut TEPAT SEBELUM tag </head> (gunakan Ctrl+F untuk mencari)
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='https://sites.google.com/site/bukarahasiahost/azmeereadmore/azmee-readmore.js' type='text/javascript'/>
keterangan:
-summary_noimg = 230; adalah banyaknya karakter yang akan ditampilkan ketika tidak ada gambar di dalam posting anda, anda bisa mengubah jumlahnya.
-summary_img = 140; adalah banyaknya karakter yang akan ditampilkan ketika terdapat gambar di dalam posting anda, anda bisa mengubah jumlahnya.
-img_thumb_height = 100; adalah tinggi gambar thumbnail, anda dapat mengubah nilainya.
-img_thumb_width = 100; adalah lebar gambar thumbnail, anda dapat mengubah nilainya.
 Tapi untuk amannya tinggalkan begitu saja.

4. Lanjutkan dengan mencari <data:post.body/> (seperti biasa, gunakan senjata Ctrl+F)
5. Lalu GANTI <data:post.body/> dengan script berikut:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<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>
<div style='clear: both;'/><span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>
</b:if>
keterangan:
-padding-top:5px, ganti nilainya untuk membuat jarak dengan tulisan di atas readmore.
-float:right, ganti right dengan left jika ingin readmore muncul di sebelah kiri.
-Anda bisa mengganti Read more dengan kata-kata lain misalnya "baca selanjutnya", "Read the rest of this  entry", "Lanjut gan...",  "Monggo dilanjut!", atau apa sajalah...
Tapi untuk amannya tinggalkan begitu saja.
 
6. Untuk memastikan hasilnya, jangan di-save dulu. Gunakan preview untuk mengeceknya.
7. Setelah beres, silakan di-save.
8. Finished, you've now got auto readmore for blogger.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Membuat/Memasang Auto Readmore Blogger/Blogspot (Plus Thumbnail)
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 88 Comment(s):

gloriaputri said...

Well Ctrl F nya membantu bgt :)) dr kmrn bingung saya :) saya pasang link ini di blog saya deh :) thx ya

gloriaputri said...

sudah saya pasang di list Tips and Trick dalam blog saya :) semoga bermanfaat buat blogger2 lain :)

Ahmad Khoirul Azmee said...

Halo Gloriaputri. Ya, makasih banyak ya, that's nice and thank you very much for your kindness ^_*

gloriaputri said...

well...anyway, gimana cara mbuat pencuri konten itu? jd bs tau klo blog kita ada yg copas?

gloriaputri said...

koq linknya gag bs di buka ya?
aq sih uda pake copyscape...cukup gt aja ya?

Ahmad Khoirul Azmee said...

waduh iya sori, ada kekeliruan penulisan kodenya.... saya tulis lagi, tar copas secara manual ke browser:

http://buka-rahasia.blogspot.com/2010/12/tips-mengetahui-pencuri-konten-artikel.html

http://buka-rahasia.blogspot.com/2011/02/copycats-kucing-kucing-penjiplak.html

untuk copyscape itu kan cuma simbol saja, bukan pelindung, jadi tetep harus ada tindakan dari pemilik blog sendiri. masuk aja ke copyscape.com, masukkan url blog atau url artikel yang ingin diketahui dicuri apa tidak, klik enter.

kalo pengen punya copyright sebagai bukti, daftar gratis di myfreecopyright.com

istiqlal gest said...

yess boss

wahyu.pranajaya said...

makasih banyak yah gan informasinya hahaha :D ctr+f nya membantu bangett

Eckhart™ said...

Trima kasih infonya. Sdh di coba & berhasil.
Salam kenal...

Ahmad Khoirul Azmee said...

@ istiqlal gest, @ wahyu.pranajaya, @ Eckhart™ :
Good, you're welcome :D

ANDIK WIN said...

siiip gan artikelnya sakses! http://andikwin.blogspot.com/

Anonymous said...

tapi kok gk berubah ya cuma nambah tulisan dibawah Read More>>
ni blogku www.hikageninetyseven.blogspot.com

Appri said...

sy g nemu gan, kode html sprti di atas

Egi Marta Nugraha said...

Makasih banyak... Info yang sangat berguna... silakan kunjungi blog saya http://ceukbeja.blogspot.com

Adan Hyrockx said...

kak! gimana cranya biar imagenya di tengah (center) ?

emshakeer said...

mangstab infonya,,
emm ,tp msh bingung masbro ,, kuk cm nmbh tulisan red more ya ,,

Ary_Putra said...

Terima Kasih buat infonya. salam

Faried Sulthon Al-Husna said...

Terima kasih ilmu-nya...
Izinkan saya copas ya..

Ilmu Komputer said...

Assalamualaikum... Mas Admin"
Cara agar Article kita tidak bisa dicopy Gimana ya?
Soalnya saya pernah lihat blog/website ga bisa dicopy.?

Ilmu Komputer said...

== Assalamualaikum == Tanks saya sudah coba, tapi itu tulisan Read more saya berwarna Hitam? cara gantinya gimana ya? soalnya blog saya Background Postingnya Warna Hitam.
coba dilihat di Blog :
=== http://ilmukomputer95.blogspot.com/ ===

Ahmad Khoirul Azmi said...

@Ilmu:
Halo.
Sisipkan kode pada bagian style seperti contoh di bawah yang dicetak miring dan tebal"

style='color:#kodewarnapilihankamu;padding-top:5px;;float:right;text-align:right;'

untuk kode warna bisa dilihat disini:
http://buka-rahasia.blogspot.com/p/hex-color-chart-generator-compose-your.html

Ahmad Khoirul Azmi said...

Soal anti copy paste, silahkan cari di Google dengan keyword script anti copy paste, script anti klik kanan, script anti text selection atau gunakan kombinasi ketiganya.

bonanza buatan indonesia said...

saya coba terapkan auto read more ini di blog saya. code html nya sudah saya pasang tetapi tetap saja tidak terjadi read more otomatis seperti yang diharapkan dan setelah saya utak atik saya tetap tidak dapat memperbaikinya,,, nah saya mau minta tolong sama mas Ahmad Khoirul Azmi untuk mencoba memperbaiki auto read more di blog saya tersebut tolong sms saya di nomor 085878738769 nanti akan saya kirim ID login ke blog saya sekalian password nya, atau saya kirim script template blog saya via e-mail.. maaf kalo merepotkan dan terimakasih banyak

SHEILA ON 7 said...

kok setelah dicari di blog saya tidak ada kata:
terus gimana?

Redbleck said...

Thx infonya gan, mampir ke blog saya juga ya

Rizky_Revenue said...

HaturNuhun kk infonya,, dah ane pasang..
Di cek zaw kk blog newbie ane..

ERALD said...

thank's bri infonya
membantu beud

numpang sebar link yaa
http://rldtubanict.blogspot.com/
software,trics,tips,information of IT
:)

ferdy said...

makasih om... berhasil... tapi tulisannya cuma muncul sedikit ya... padahal summary_imagenya udah ditambahin...
bisa bantuannya om?
ni blog saya
http://boxpilem.blogspot.com

Dewi Setiawati said...

tulisan readmore nya mana yah?

http://zahralover-dewidedew.blogspot.com/

Handi Shevchenko said...

THanks gan
ane berhasil

salam kenal ya
Follow http://saungcheater.blogspot.com/

Halim Pakpahan said...

bang ahmad .. :) met malam, bikin text nya rata kiri kanan gmana bang yah bang? mksi bang :)

Ahmad Khoirul Azmi said...

lihat script kedua, cari bagian ini:

<div expr:id='&quot;summary&quot; + data:post.id'>

tambahkan: style='text-align:justify;' pada tag tersebut, jadinya:

<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>

save.

wane noor said...

readmore ane ada, tp ketika di halaman ndak bisa ke buka readmorenya, ada apa ya? saya bingung memperbaikinya.

Teguh Sinulingga said...

ada yang saya tanyain nih. kan setiap posting di blog ini ada disitu tulisan "mencuri adalah pekerjaan pengecut" gimana bikinnya gan?

thanks...

Ahmad Khoirul Azmi said...

@Teguh: Haha, itu cuma dibikin secara manual aja, bro.

Unknown said...

Makasih ya Mas..,,,atas infonya Berguna baget bagi yang pemula kayak saya...,,
thanks

nuron jamiludin said...

bagus artikelnya gan, ane udah praktek-in, langsung jreng!! Thanx, gan! Kalo ga keberatan ane mohon visitnya di indoprestasi.blogspot.com :D

Denny Lazwardy said...

Nice Tutor..... ijin Buat Copy Gan........THank's

lee jihyun said...

carana gimana biar laman selain home biar ada read more nya ? di bales yah thanks :D

live skor update said...

tutor yang sangat berguna bagi saya yang msh newbie..
saya banyk mendaptkn info dari blog agan..
saya ada pertanyaan sedikit gan..
stlh pasang totur agan diatas ternyata halaman statisnya jg ikut berisi readmore, pertanyaan saya bagaimana cara menghilangkannya?
terima kasih sebelumnya gan..

Tokotua-shop said...

Terima kasih atas artikelnya pak, tapi knp di template saya tidak tersedia yah??
mohon bantuannya :)

rizky aryan said...

makasi banyak kebetulan saya newbi dalam blog.
kalo lagi ada luang waktu silahkan mampir ya om
http://gameriski.blogspot.com

Software Download Full said...

makasi boz untuk tutorialnya ....

T.Khairul Nova said...

hampir kebanyakan newbie bingung gimana cara cepat nyari konten script...CTRL F yang mas khoirul tulis disetiap postingan sangat membantu...keep spirit mas :)

rheyvana said...

jempol sekali...

Kang Artha said...

Saya haturkan terimakasih atas tutorialnya sangat berhasil dengan baik di blog saya, salam dari si suka lupa kang artha, makasihhh

carkonline said...

great mas,,udh dicoba n berhasil,,
o ya,,kalo si mas berkenan nie mampir di blog ane,,soalnya dl pernah ngedit template,,n muncul huruf2 di sebelah kiri atas blog,,kira2 apa y t mas,,n gmn ngilanginnya,,
moga2 berkenan,,n thanks bgt.
blog ane http://iker-onlinebusiness.blogspot.com

zack zacky said...

thank's for sharing. gan BTW kalo gambarnya biar ditengah gimana caranya ya gan ?

ini blog ane mampir ya : http://al-munawar.blogspot.com/

Muh. Akram said...

ok kak

jiro joyman said...
This comment has been removed by the author.
jiro joyman said...

saya mau tanya mas,data:post.body saya ada 4 nah saya masukin ganti data:post.body yang paling pertama,pas saya coba readmore saya gak muncul padahal saya cek html saya udah sesuai intruksi.mohon penjelasnya....,thanks

Styler 199 said...

berhasil gan..

thanks very much, semoga bloggnya makin jaya

Sukualam said...

sangat membantu untuk newbie seperti saya, maturnuwun!

jangan lupa mampir balik ke blog saya
http://thesukualam.blogspot.com

romi boz said...

thanks om sukses/..//

armae said...

Terimakasih tutorialnyaaaa.. Saya sudah coba di blog saya, dan berhasil. Sipp deh.. Sekali lagi makasih yaaa :D

Freiz Sky said...

makasih ya gan infonya
Mampir di blog ane :)

freizsky.blogspot.com

stdonedie said...

mantap gan... sukses. sudah saya coba... terima kasih

Fandi Adhitya said...

terima kasih pak auto readmore nya membantu

Salwa Taslima Hidayat said...

Alhamdulillah, sy berhasil.
Terima kasih ya,..
Ctrl+F-nya membantu bgt,.
Ilmu baru nich,.

ZZSharez Sensei said...

gan tapi knapa ya laman juga jadi ada read more nya juga?

Vie Tebe said...

thx infonya.. sy punya masalah nih.. susah ngejelasinnya

coba mampir: whatskpop.blogspot.com/

Templatenya pake auto read more (bagus sih) CUMA, pos sebelum di klik read more itu keliatan seperti berantakan dan nyambung ky gitu... kl cuma memperbaiki aja bisa gak ya? (Read more tetep, cuma postingannya sebelum klik read more, beraturan/sesuai dengan yang kita buat)

Hmmm... kl tau, kasitau sy ya... thx you

Ahmad Khoirul Azmi said...

Auto readmore dengan javascript secara otomatis membaca dan menuliskan semua tulisan yang dipersingkat secara plain. Apabila anda menuliskan lirik lagu dimana perbarisnya hanya diberi jarak spasi dengan enter, otomatis baris ke satu dan kedua sebenarnya tidak ada jarak, sehingga ketika diringkas, baris ke satu dan kedua nyambung alias tidak ada jarak. Solusinya adalah memberi spasi sebelum anda tekan enter untuk menuliskan baris berikutnya, sehingga tulisan per baris tidak nyambung, tapi ada jarak.

Itu sama sekali tidak ada hubungannya dengan desain, tapi format tulisan anda penyebabnya, karena dalam bentuk bait-bait lirik dan tidak dalam format paragraf biasa.

iklangratismalangraya said...

Om Ahmad
Om di template asli blogger yang saya pake kode ini
< data:post.body / >
ada 3 Om
yang mana kah yang harus saya pilih, Om ?

Ahmad Khoirul Azmi said...

Coba dulu yang pertama, yang kedua biasanya data post body untuk halaman statis, yang ketiga untuk mobile.

Henry Hutagalung said...

Mas, udah aku copas tapi hasilnya sbb:

Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4 ...
Read more >>
Mohon pencerahannya mas..
Makasih

Henry Hutagalung said...

Sekalian mw tanya lagi ni mas..
knp tiap posting baru ada tulisan ''
Terjadi kesalahan saat mencoba menyimpan atau memublikasikan pos Anda. Coba lagi. Abaikan peringatan ''
mohon pencerahannya mas
makasih

Ahmad Khoirul Azmi said...

@Henry: Hai. Jenis tulisan apa yang anda post? Karena readmore ini hanya akan me-retrieve tulisan normal. Silahkan detilkan problemnya lewat contact form di link bawah.

Itu problem bug Blogger yang sampai sekarang masih dihadapi banyak Blogger, termasuk saya. Ada banyak faktor, di antaranya faktor setting tanggal (sebaiknya diset automatic), faktor caching browser, setting permalink, label, deskripsi, dll yang belum disave, beberapa kode yang dimasukkan ke dalam mode HTML posting dan kemudian tidak dapat diparse oleh post editor, dan masih banyak lagi. Sebenarnya artikel sudah saved, tapi editor tidak mau menganggapnya sudah saved. Cek beberapa hal tersebut. Lalu coba keluar lagi dari post editor (close), jika tidak yakin isi post tersimpan, copy dulu ke notepad. Kemudian kembali lagi buka post editor dan coba save.

everyth1ng said...

gagal sob, saya coba pasang tetep gk bisa buka laman !

Cepy Hidayaturrahman said...

terima kasih pak.. sangat membantu, dan berhasil diterapkan pada blog sederhana saya :)

Fahrie Kurniadi said...

saya mau nanya nih kan saya udah masang readmore udah jadi yah kok pas hari ke3nya readmorenya ilang sendiri bingung nh tolong jelasin dong

Ahmad Khoirul Azmi said...

Ada banyak penyebab, misalnya: anda ganti template, anda mengedit template dan tidak sengaja ada kode yang terhapus atau terubah, ada script baru yang anda tambahkan dan kemudian terjadi crash javascript, dan kemungkinan terakhir ada bug pada blogger. Yang terakhir saya tidak yakin, jadi lihat 3 kemungkinan yang pertama dulu.

Fahrie Kurniadi said...

oke sudah jadi lagi,, kalo tulisan READ MORE nya diganti pke gambar bisa kan pkae kode
img src='URL GAMBAR' betul gg kodenya kaya gituu

Ahmad Khoirul Azmi said...

Ya, sebaiknya anda membaca artikel readmore version 2 yang jauh lebih detil:
http://buka-rahasia.blogspot.com/2011/03/cara-membuat-auto-readmore-thumbnails.html

Dith Jaya™ said...

gimana caranya buat related post yang di bawah posting ??

mohammad fadil said...

gan aku kan udah lakukan semua itu cara2 tapi kok pas di klik read more pada postingan ngga ada muncul lanjutan kata2nya sich ?
itu masalahnya apa yach ?
mohon bantuannya

Ahmad Khoirul Azmi said...

Sebaiknya pake script yang di sini saja, versi 2:
http://buka-rahasia.blogspot.com/2011/03/cara-membuat-auto-readmore-thumbnails.html

Indra Triya said...

thenkyu gan, cara ini sangat membantu buat blog ane... nice this blog :)
salam blogger... :D

siti syurifah said...

mksh ilmunya (^_^)

Rudy Hartono said...

makasih tutorialnya yang sangat bermanfaat bagi saya yang baru belajar blog

Datros Sumendong said...

Bang Bisa disejlasin ga yang ..js yang terdapat dalam google code? masih buram soalnya...!!! Makasih Sebelumnya...!!!

Wahyu Aribowo said...

sip om ... ijin minta scripnya yahh sekalian saya terapkan di blogspot baru saya :)

Abang Jimy said...

kerennnnn :-)

Little Butterfly said...

Masss, tak masukin di data post body 1 dan 2 ga ngefek apa2 skripnya, trus tak masukin ke data post body yg ketiga muncul tulisan readmore tiap bawah tulisan tanpa ada summarynya, jadi kaya cuman ketambahan link doang. Itu gimana mas?

Ahmad Khoirul Azmi said...

saya sudah menyempurnakannya melalui versi dua seperti yang sudah saya sampaikan di atas, http://buka-rahasia.blogspot.com/2011/03/cara-membuat-auto-readmore-thumbnails.html simak yang itu ya

sigit kuncoro said...

mas saya pengen nambah jumlah baris yang nampil di home page blog saya tapi di template q gak nemu properties kayak ini mas
summary_noimg = 230;
summary_img = 140;

solusinya gimana ya

Ahmad Khoirul Azmi said...

mungkin scriptnya beda, atau script di host di tempat lain, sehingga tidak ada. coba cek apakah script readmore nya di host di tempat lain. unduh, edit, dan unggah lagi.

Nadita Vani said...

kok di blog gue ga bisa bisa ya? padahal udah dicoba. gimana caranya ?? ><

Ahmad Khoirul Azmi said...

didetilkan problemnya gimana, jadi saya bisa tau cara bantunya

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap