Membuat “Read more …” pada Blogspot
Oleh Victor | Jan. 17, 2009 | Blogging, Tutorial & Trik Blogspot
Tulisan “Read more …” atau “Baca lebih lanjut …” biasa kita lihat pada web atau blog, tanda tersebut biasanya untuk mengarahkan kita membaca artikel yang diberi tanda tersebut lebih detail. Pada WordPress untuk memotong artikel dan memunculkan tanda tersebut sangat mudah, karena telah disediakan dalam Text Editor-nya, tapi untuk Blogspot tidak ada, nah bagaimana cara kita memotong artikel sehingga pada tampilan Home blog kita tidak terlalu panjang kebawah, apalagi kalo di home ada banyak artikel yang ditampilkan (wah bakalan panjang jauh deh kita scroll ke bawahnya, dan kecenderungannya pengunjung enggan untuk melakukan itu, akibatnya tidak semua artikel terbaca).
Dalam Blogspot memang tidak disediakan tools untuk memotong artikel tersebut, jadi kita harus melakukan sedikit modifikasi dan sedikit usaha untuk bisa membuatnya. Keuntungan lain dari adanya tanda “Read more …” ini bagi kita pemilik blog tentunya pada traffic, mengapa traffic? Karena pengunjung sendiri akan membuka lebih dari satu halaman (pertama halaman home, dan kedua halaman artikel yang bersangkutan itu sendiri).
Bagaimana cara membuat tanda ini, akan coba saya jelaskan dengan bantuan gambar supaya lebih memudahkan (kaya Pak Guru nih, mana papan tulisnya???)
Pertama, kita masuk ke Control Panel blog kita, dan masuk pada tab Layout.
Kemudian masuk pada tab Edit HTML, jangan lupa untuk mencentang kotak Expand widget template.
Nah, pada bagian ini kita cari script di bawah ini. Secara prinsip sebenarnya kita menambahkan script Read More di antara script di bawah ini.
<div class='post-header-line-1'>
Atau
<div class='post-body entry-header-line'>
Sebelum script
<data:post.body/>
Untuk memudahkan gunakan fungsi pencarian pada browser (biasanya dengan menekan tombol CTRL + F), dan cari script tersebut di atas dengan kata kunci ‘post-header-line-1′ (tanpa tanda petik).
Setelah ketemu, masukan script berikut ini di bawah dari script yang kita cari tadi.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
Setelah kita masukan script pertama di antara script default tadi , berikutnya kita sisipkan script tambahan kedua di bawah script ini <data:post.body/>, nah di bawah script tersebut masukkan script kedua berikut ini,
<b:if cond='data:blog.pageType != &quot;item&quot;'><br/> <a expr:href='data:post.url'>Read more...</a> </b:if> </b:if>
Untuk kata kata “Read More……”, bisa kita ganti dengan kata lain sesuai keinginan kita.
Setelah itu kita simpan template yang baru kita rubah.
Langkah kedua, kita masuk ke tab Setting, dan kemudian masuk ke tab Formatting.
Kita menuju ke Post Template (ada di bagian bawah), dan masukkan script berikut ini dalam boks yang tersedia. Dengan memasukan script berikut pada Post Template, maka setiap kali kita akan membuat artikel baru, script berikut akan otomatis muncul (dalam mode Edit HTML), jadi kita tinggal memindahkan tempatnya saja.
<span class="fullpost"> </span>
Selesai, simpan setingan yang baru tersebut.
Sekarang kita masuk ke langkah ketiga, cara memotong artikel.
Pada saat kita membuat posting baru, coba untuk melihat pada tab Edit Html, di sini kita akan melihat script yang otomatis sudah ada (karena kita tadi sudah memasukkan di Post Template), nah fungsi dari dari script tersebut adalah sebagai pembatas antara artikel pendahuluan dan artikel lanjutan. Untuk artikel pendahuluan (yang nantinya muncul di home) berada di atas script <span class=”fullpost”> dan sisanya berada di bawahnya, dan pada akhir ditutup dengan </span>.
Untuk input kita bisa menggunakan tab Compose atau Edit Html, yang penting peletakkan 2 script tersebut.
Setelah itu bisa kita Publish artikel kita.
Sebagai contoh berikut contoh artikel yang belum ditambahkan “Read More…” dan yang sudah.
Tutorial ini menggunakan blog http://classy-car.blogspot.com sebagai contoh dan telah mendapatkan ijin dari pemilik blog (yaitu saya sendiri, hi hi hi).
Penting: Sebelum memasang script di dalam Blogspot, ada baiknya copy paste dulu di notepad, dan ganti tanda ” dan ‘ (petik ganda dan petik tunggal melalui notepad, setelah itu baru copy paste di Blogspot), ini untuk mengantisipasi perbedaan font type yang kadang bisa mengakibatkan error.
77 Responses to “Membuat “Read more …” pada Blogspot”
Leave a Reply
-
Media Informasi Internet & Komputer
Daftarkan email, untuk mendapat update terbaru:
January 23rd, 2009 at 11:25
hai q da cb bgimn cr bikin artikel terpotong
tp g mau disimpan,,,terus ktnya html nya da yg blm di tutup!!!!!gmn ya tolongin donk
pleazzzz…..
January 23rd, 2009 at 15:24
Mmmm, gini
pada source code (edit HTML), bisanya ada yang terlewatkan yaitu penempatan </span> di akhir tulisan. fungsi </span> itu untuk menutup perintah <span class=”fullpost”>.
Jadi silakan cek lagi, di bagian akhir tulisan.
Jika masih bermasalah, coba diulang dengan mengcopy paste artikel dari word ke blogspot pada mode ‘edit HTML’. trus pasang kode <span class=”fullpost”> ditengah artikel (atau dimana saja dimana kita akan memotong artikel tersebut), kemudian pada akhir artikel masukkan </span>, setelah itu coba dipublish.
January 26th, 2009 at 14:22
[...] | Jan. 26, 2009 | Blogging, Blogging Tutorial & Trick Setelah posting terdahulu membahas soal Read More, sekarang saya mau menjelaskan tentang Recent Post (daftar postingan terakhir) pada Blogspot. Masih [...]
January 28th, 2009 at 15:39
nice article and good blog…
trims atas arrticlenya..
selamat ngeblogg (salam kenal)
January 29th, 2009 at 14:07
dari langkah 1 disimpan keluar koment :Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: Open quote is expected for attribute “{1}” associated with an element type “cond”. bagamana?
January 30th, 2009 at 22:49
Maap mas Anto, baru bisa jawab sekarang,
Coba untuk dilihat lagi peletakan dari script tambahan tersebut, karena kemungkinan kasusnya sama dengan yang dialami r4sti, apakah script yang dimasukkan sudah lengkap. Karena dalam html setiap perintah ada pasangannya (pembuka dan penutup), nah kalo salah satu ada yang kurang atau salah dalam penulisan maka script tidak bisa berjalan, untuk khasus di blogspot, maka tidak bisa disimpan.
February 5th, 2009 at 00:48
Sudah ku coba berulang2, dan ku ceck tanda penutu ternyata sudah lengkap, tapi msih belum bisa mas,
February 5th, 2009 at 19:01
[...] Tutorial & Trick Masih posting mengenai Blogspot nih. Melanjutkan posting sebelumnya tentang Read More dan Recent Post, yaitu Recent Comment atau Komentar Pengunjung terakhir yang muncul di sidebar [...]
March 8th, 2009 at 21:33
ho ho ho ho ho.. ketemu dech nih artikel yang aku cari2 bozzzz… dr kmrin pingin buat yang ada read morenya lom kesampaian.. sekarang tak coba dulu..
Go To Blogger…
Ho ho ho
March 13th, 2009 at 09:31
tanya dong, kalau read more di Multiply bisa ngga?
Thx ya..
March 13th, 2009 at 19:39
@ Mangkum,
Kalo untuk Multiply, kok sepertinya tidak bisa, karena kita tidak punya akses untuk mengutak-atik, source code-nya (kalo di Blogspot ada edit html-nya jadi bisa diutak-atik sesuai keinginan. Tapi, saya coba cari informasi dulu ya, karena udah lama gak pernah buka Multiply.
March 20th, 2009 at 16:58
mas, nongol sih “read more” nya, tapi kagak kepotong postingannya. alias tetep panjang tapi paling akhir muncul ‘read more’, apa thu yg slh?
March 21st, 2009 at 00:00
@ Eka,, karena tak tersebut menetukan letak pemotongan dari artikel yang bersangkutan (letakkan di posisi mana kita ingin memotong tulisan kita)
Coba dilihat lagi artikelnya (dalam mode Edit Html), lihat penempatan tag
March 24th, 2009 at 15:18
saya udh cobain,tp knpa koq readmore nya muncul di akhir artikel y?
pdhal udh saya coba berkali2, msa slah dlm pnmpatan tag nya?
March 25th, 2009 at 23:59
@ Dew2,
Kasusnya sama seperti Eka Cynthia ya? tapi aku liat di blognya dew2 udah oke tuh, udah jadi, berarti udah ketemu solusinya kan.
April 7th, 2009 at 15:37
mas mohon maaf nih.. saya suda coba cuma ketika saya save ga bisa mas..
seperti ini yg keluar..
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “cond”.
mohon masukannya..
April 8th, 2009 at 23:07
@ Arma,
Error itu muncul, berarti ada tag html yang kelewatan atau kelebihan, coba dicek lagi baris demi baris yang berkaitan dengan script di atas.
May 2nd, 2009 at 05:35
mas, saya coba copy kode html untuk membuat read more ke blog saya knp tidak bisa ya???
padahal saya mengikuti petunjuk dari mas, saya bingung mas, tolong bantu saya mas, saya mau but read more untuk di blog saya, tolong dibantu ya mas, plis…
May 2nd, 2009 at 05:55
saya copy tag html dari mas, untuk membuat read more tp muncul tulisan ini
” Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: Open quote is expected for attribute “{1}” associated with an element type “cond”.
saya sudah cek lagi, ga ada yg salah pd script html yg saya copy, dri mas. trus penempatannya jg. tolong dibantu ya mas.
May 2nd, 2009 at 06:10
saya sudah cek berulang-ulang tp tetap ga bisa. mungkin ada script yg kurang kali mas. pada saat mas posting. mav ya mas, jangan tersinggung. saya ga bermaksud untuk menghina, or menjelek2an
May 2nd, 2009 at 06:47
@ Syaiful,
Gak masalah Syaiful, terima kasih koreksinya. Nanti coba saya cek lagi script yang saya tulis, bisa jadi memang ada yang hilang atau salah, waktu ganti template. Segera kalo sudah saya koreksi, nanti saya informasikan dalam komentar.
May 2nd, 2009 at 08:33
Artikel ini sudah saya update materinya, berdasarkan dari beberapa pengalaman temen-temen yang mencoba dan banyak yang gagal. Semoga dengan perbaikan ini bisa temen-temen bisa berhasil.
May 7th, 2009 at 04:27
mas saya copy scrip yang dari mas untuk read more tapi ko masih ga berubah ya?? saya kurang ngerti dilangkah yang ketiga mohon pencerahannya mas.
kalau teks yang sudah di post harus di edit or secara otomatis ada read more nya
thank`s
May 7th, 2009 at 07:13
@ Burhan,
Untuk penempatan tag dilakukan manual. Tempatkan di akhir paragraf dimana kita ingin memunculkan “Read more” tersebut. Dan tag diletakkan di akhir tulisan. Jangan lupa editing dilakukan di mode Edit HTML.
May 7th, 2009 at 11:08
Mas, aku juga ada masalah sama seperti eka cyhntia dan dew2, cuma kalau eka sudah selesai, gimana dengan dew2 yah ?
scripnya sih sudah oke semua kok, apa masih ada yg salah penempatan yah ? sudah berkali-kali dicek diuji tetap masih enggak mau yah ?
Mohon pencerahan lagi…
May 7th, 2009 at 16:47
Blog saya memakai template baru dan tidak ada script
atau
Terus solusinya bagaimana??
May 7th, 2009 at 16:50
Blog saya memakai template baru dan tidak ada script
div class=’post-header-line-1′
div class=’post-body entry-header-line’
Solusinya bagaimana?
Trims.
May 8th, 2009 at 01:44
@ Arif,
Aku lihat ada kok di template kamu, coba gunakan fungsi search pada Firefox dengan kata kunci post-header-line, jangan lupa dicentang dulu Expand widget template-nya.
May 8th, 2009 at 01:47
@ Biyang,
Kalo saya liat di blog kamu, itu ada kesalahan penempatan tag-nya, coba kamu pindahkan tag ‘span class=”fullpost”‘ setelah kata he…he…he… (pada artikel Opera Tokyo). Untuk tag ‘/span’ tetap pada posisi akhir tulisan.
May 8th, 2009 at 01:52
kok tutorial g bisa digunain yach, padahal saya sudah terapkan apa yang ada di tutorial diatas …
malahan ada tulisan seperti ini :
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: Open quote is expected for attribute “{1}” associated with an element type “cond”.
gimana mas…. mohon bantuanya?
May 8th, 2009 at 13:37
@ Doni,
Sepertinya ada yang hilang waktu aku masukkan script di postingan, sudah saya perbaharui lagi, silakan copy script yang ada dengan memilih ikon View Source (ikon ketiga dari kanan pada script yang bersangkutan).
May 15th, 2009 at 12:32
Mas boleh usul gak?
Kalo temen-temen yang pada gak berhasil itu percaya sama mas guru Victor, coppy aja HTML sourcenya n kirim by emailke mas Victor sehingga mas guru bisa lihat dimana salahnya gemana? setujuuuuu???
May 16th, 2009 at 01:39
@ Smartnbeauty,
Usul menarik juga nih, nah kalo temen2 gak keberatan boleh aja kirim html sourcenya pake notepad aja jangan pake word (untuk menghindari perubahan font yang berakibat perubahan symbol), atau bisa aja dengan cara dibackup jadi .xml, trus kirim file .xml tersebut ke aku, nanti coba saya lihat kira2 permasalahannya dimana.
May 19th, 2009 at 03:52
kok tulisan read more… nya di bawah?
gimana solusinya?
May 19th, 2009 at 04:20
udah bisaaaaaaaaaaaaaaaa
May 19th, 2009 at 07:53
@ Santo,
Wah, aku belum sempet jawab udah bisa ya….
He he he, selamat nih…, aku liat istilahnya bagus, kaya Rommy baru menghipnotis… (lebih dalam… lebih dalam…)
May 28th, 2009 at 09:29
makasehh…mas mo coba artikel yang laen aahh..
May 31st, 2009 at 14:11
mas anto yang sangat guanteng di edit html saya ga ada
semua artikel yang saya temui semua nya pada basi……… itu2 aja pada ngjiplak tolong kalo ada cara yg bener2 baru bukan baru 2009 kebawah
June 2nd, 2009 at 17:25
lha gimana klo misalnya di html ga ada post-header-line nya bro…
June 2nd, 2009 at 17:56
@ Indomie,
Coba kalo cari script ini < data:post.body/ >, letakkan script pertama di atasnya dan script kedua di bawahnya.
June 3rd, 2009 at 08:56
SEEP SEEP SEEP AKHIRNYA JADI JUGA…..OKE2 BOS…MANTAFF
June 3rd, 2009 at 14:03
Allah menciptakan bumi dan isinya dalam waktu enam hari. Emang semua kudu sabar. thanks buat arianwijaya atas ilmunya. mudah2an berkah. amin.
June 10th, 2009 at 10:04
Berhasil dengan baik, terima kasih mas
June 17th, 2009 at 22:42
[...] di sini dengan cara Ariawijaya.com untuk melengkapi trik-trik Blogspot sebelumnya yaitu Read More, Related Articles, Recent Post, Recent Comment, Mengganti Favicon, dan menyembunyikan [...]
July 9th, 2009 at 22:03
[...] oleh Blogspot). Trik ini sekaligus untuk melengkapi trik-trik Blogspot sebelumnya, seperti Read More, Recent Comment, Favicon, Recent Post, Related Articles, dan trik [...]
July 12th, 2009 at 00:01
[...] seperti Artikel terkait, yang membantu mengarahkan pengunjung menuju artikel lain yang sejenis. Read more, yang membantu pengunjung membaca artikel yang bersangkutan lebih detil. Recent post, mengarahkan [...]
July 16th, 2009 at 13:35
Makasih banyak bro…
berhasil akhirnya…hehehe
July 16th, 2009 at 18:33
mas setiap kode dari mas saya parsekan..trus setelah itu read morenya gak bisa di klik.kenapa ya?soalnya kalo kodenya gak saya parsekan gak bisa disimpan..tolong pencerahannya.
July 16th, 2009 at 22:18
@ Reza
Sip, sama-sama, aku udah mampir ke blognya, bagus tuh, keep blogging…..
@ Tri
Sepertinya itu ada kesalahan dalam penempatan -nya, letakkan di tengah2 artikel atau dimana saja di tempat kamu mau memotong paragarafnya, jangan di atas, trus pada akhir tulisan baru dipasang < /span >.
July 20th, 2009 at 03:41
Matur nuwun mas..
walaupun saya orang awam dan baru belajar buat Blog ternyata udah berhasil….
August 4th, 2009 at 00:54
makasih banyak mas ,..
dari sekian banyak artikel tentang READ MORE , punya mas yang paling ampuh (berhasil) di blog saya ..
:D
August 9th, 2009 at 13:32
dah ku coba membuat read more nya… oke.. thnx u…
August 16th, 2009 at 02:40
Thanks mas..Tutorialnya sangat membantu sekali. InsyaAllah semua ada balasannya.
August 20th, 2009 at 08:35
Thanks infonya, akan saya coba dulu…
Mudah-mudahan bisa untuk readmore-nya.
September 11th, 2009 at 19:41
Alhamdulillah BERHASIL,..terima kasih pak guru atas informasinya,..berguna untuk blog saya,..dan tampak lebih enak dilihat,..
October 14th, 2009 at 20:22
makasih taz info’a..
bermanfaat bgt nieh buat yg pemula..
salam kenal
Si bontot
November 24th, 2009 at 15:10
oke deh thank’s atas infonya
November 24th, 2009 at 15:13
thank’s bro
November 24th, 2009 at 15:27
ko tulisan read morenya ga keluar ya ? apa yang salah nih boss?
November 24th, 2009 at 17:56
@ Nightelf,
Aku sarankan pake cara baru aja, lebih mudah dan tidak perlu pasang kode seperti cara di atas, infonya bisa lihat di tulisan tentang cara mudah bikin read more.
November 27th, 2009 at 11:32
mas masih gagal, mencari div class … kmdn meletakkan
.fullpost{display:inline;}
.fullpost{display:none;}
dst
kok susah ya?
help me please
November 28th, 2009 at 08:25
@ Joko,
Memang relatif rumit cara di atas, apalagi kalo kita menggunakan template yang bukan standar seperti yang disediakan Blogspot, saranku lebih baik menggunakan cara lain dalam membuat read more…, yaitu dengan mengupdate editor Blogspot, dijamin dengan cara baru tersebut jauh lebih mudah.
December 5th, 2009 at 18:21
mas saya masih gagal…. kunjung balik ya.. please
December 6th, 2009 at 07:30
@ Farhan,
Udah coba dengan cara mengupdate editor blogspot belum, seperti yang aku usulkan ke mas Joko di atas, cara itu lebih mudah kok dibandingkan cara yang ada di tulisan ini.
January 31st, 2010 at 14:22
Juragan…trimakasih ya buat rutorial nya…
keep bloging!
February 3rd, 2010 at 13:19
Trima kasih buat tutorialnya gan..
Ijin ngambil buat ditaruh di Blog ya gan..
Keep Blogging! ^_^
February 19th, 2010 at 14:08
Assalamu alaikum..wr. wb.
Ka’ mau tanya..
kok posting yang ada di blog saya hilang setelah mengikuti langkah2 pembuatan read more di atas…
February 20th, 2010 at 12:06
numpang simpen tutorialnya, bukan diturunkan ke yang lain…
May 15th, 2010 at 15:19
klo gagal : kodenya coba diperhatikan lg harus mengnulis “item” setelah =
Yang pertama:
.fullpost{display:inline;}
.fullpost{display:none;}
yang kedua:
2.Read more…
3.
4.
July 19th, 2010 at 11:08
Thanks ka’, artikelnya.
berhasil juga ngikuti langah-langkahnya..
*_*
September 17th, 2010 at 06:27
good.. bagus juga ya mas, lengkap tutorialnya. terimakasih mas………………
October 7th, 2010 at 21:08
hehhe….iya rumit bgt. Sampe2 semua postinganku gak nampak sama sekali. Coba cara lain aja deh
November 12th, 2010 at 23:49
saya coba malah postingan ga keliatan semua….
gimana ya
January 23rd, 2011 at 04:02
om, nanya dong om. udah saya praktekin tapi kok malah gak muncul sama sekali ya postingannya? kira2 salah dimananya ya?
makasih om
February 26th, 2011 at 10:52
huhhhhh, bisa juga akhirnya…sampai rontok nich rambut…
tq bos
March 31st, 2011 at 10:15
Tolong bos..kok keluar tulisan gini ya
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type “div” must be terminated by the matching end-tag “
April 2nd, 2011 at 14:57
Busyett,,,
Blog ane sma sklai gk nampak postingannya satupun..
huhfffttt…
tpi gua hargain tutorial mu..
gua aa mngikin yg salah.. T_T