Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Membuat Read More (1)

Wah judul yang aneh, “membuat Read More” maksudnya apa? Begini sobat, sebenarnya saya kurang setuju dengan judul tersebut, tadinya saya ingin memberi judul “Membuat menu Selengkapnya”, tapi berhubung kata “Read More” yang paling di kenal di jagad blog, ya saya pun ikut-ikutan (dasar tukang ngekor). Ya sudahlah kepanjangan ngobrolnya. Kita mulai pembahasannya. Bagi para sobat yang baru mulai membuat blog, mungkin belum mengetahui informasi ini dan mudah-mudahan dengan membaca artikel ini dapat menambah pengetahuan kita tentang yang namanya nge-blog.

Sobat mungkin melihat bahwa artikel-artikel saya terlihat hanya berupa judul-judul dengan satu atau dua buah paragrap saja, dan untuk melihat keseluruhan artikel harus meng klik link yang bertuliskan >> Selengkapnya…”, ini di sebut pengkaburan
atau pengkamuflasean postingan (ribet banget nyebutnya). Bagi sobat yang baru posting artikel hanya satu atau dua artikel saja mungkin menganggap tidak perlu menyingkat artikel sobat, namun jika nanti artikel sobat sudah banyak, maka mungkin saja ada terbersit ingin membuat menu ini.

Oke… kelamaan ngawurnya, mending langsung saja. Untuk membuat menu Read more kita harus menambahkan beberapa kode HTML ke dalam template blog kita. Tapi untuk postingan kali ini, saya khususkan untuk blogger yang memakai template klasik saja, untuk yang memakai template baru silahkan tunggu pada postingan yang akan datang.

Silahkan ikuti langkah-langkah berikut :

  • Login ke blogger.com dengan id sobat
  • Klik menu bertuliskan Template
  • Klik menu Edit HTML
  • jangan lupa Copy seluruh kode template milik sobat lalu paste pada notepad dan kemudian simpan, untuk membuat back up data. Ini dimaksudkan apabila terjadi kesalahan dalam template setelah kita otak-atik, kita masih punya cadangan data untuk mengembalikannya.
  • Copy kode HTML di bawah, kemudian paste persis di atas kode </style> :

  • <MainOrArchivePage>

    div.fullpost {display:none;}

    </MainOrArchivePage>

    <ItemPage>

    div.fullpost {display:inline;}

    </ItemPage>

    Untuk mempercepat pencarian kode </style>, silahkan sobat klik menu Edit yang ada pada bar menu browser, kemudian klik Find (on this page)…, lalu tulis </style>
    trus klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.

  • langkah selanjutnya adalah, silahkan copy kode berikut lalu paste setelah kode <$BlogItemBody$> :

  • <MainOrArchivePage><br/>

    <a href="<$BlogItemPermalinkURL$>">Read more!</a>

    </MainOrArchivePage>

    Lagi-lagi Untuk mempercepat pencarian kode <$BlogItemBody$>, silahkan sobat klik menu Edit yang ada pada bar menu browser, kemudian klik Find (on this page)…, lalu tulis <$BlogItemBody$>
    trus klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.

  • Klik tombol yang bertuliskan SAVE SETTINGS

  • Langkah selanjutnya adalah klik menu Setting
  • Klik menu Formatting
  • Dibagian bawah menu tersebut ada kotak di samping tulisan Post Template, nah isi kotak kosong tersebut dengan kode di bawah ini :

  • <div class="fullpost">

    </div>

    Sebenarnya langkah diatas tidak wajib dilakukan,akan tetapi ini di maksudkan agar ketika kita mau posting artikel, kode tersebut akan muncul secara otomatis tanpa harus di tulis dahulu, tentunya ini akan lebih mempermudah dan tidak harus selalu mengingat kode tersebut.

  • kemudian jangan lupa klik tombol Save Settings
  • Selesai

Cara Posting Artikel

Oke, sesudah beberapa tahap kita lalui, sekarang kita masuk ke tahap bagaimana cara memposting suatu artikel agar ada menu Readmore nya.

  • Klik menu Posting
  • klik menu Edit HTML, nah di sana secara otomatis akan tampak kode yang kita simpan tadi, yakni :
  • <div class="fullpost">

    </div>

    simpan artikel sobat yang ingin di tampilkan sebelum kode <div class="fullpost">, kemudian
    simpan sisa keseluruhan artikel setelah kode <div class="fullpost"> dan sebelum kode </div>

    Agar lebih jelas, saya beri contoh, misal artikelnya begini :

    Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada blog kita,
    sedangkan tulisan yang lainnya tidak akan muncul.
    <div class="fullpost">

    dan tulisan yang ini adalah tulisan yang akan muncul ketika para pengunjung meng klik link yang bertuliskan Read more.

    </div>

    Hasilnya yang akan tampak pada blog kita adalah seperti ini :

    Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada blog kita,
    sedangkan tulisan yang lainnya tidak akan muncul.

    Read more!

Bagaimana sobat, sudah jelaskan. bila belum jelas silahkan di tanyakan kembali pada komentar.

Sedikit clue, kata Read more! sebenarnya bisa kita ganti sesuai dengan
keinginan kita, misalkan kita rubah menjadi Baca selengkapnya…, Selengkapnya.., Lanjutannya… atau apa saja
yang penting kata tersebut bisa memberi tahu kepada para pengunjung bahwa artikel kita ada kelanjutannya.

Kode di atas sebenarnya ada alternatif lain, yakni memakai kode Span, jika berminat, ganti semua kode div menjadi Span.
Hasilnya akan sama, cuma bagi para sobat yang suka posting pada menu compose, kode ini sering ada masalah di karenakan bertabrakan
dengan perintah lain yang memakai kode Span.

Akhirul kata selamat mencoba !

20 April 2007 - Posted by | blog tutorial

49 Komentar »

  1. kalo yang memakai template baru, kodenya gimana mas?

    blog ini sangat informatif…tq
    benni
    http://www.belajargagal.blogspot.com

    Komentar oleh admin | 29 Mei 2007 | Balas

  2. Bos..klau postingannya udah banyak baru kepikir pasang ‘read more’, harus satu2 dirubah bos…ribet banget.

    Komentar oleh Sekarindo Bakti group | 31 Mei 2007 | Balas

  3. cuman nambahin… read more tempelate baru mas rohman, aku msh blm dapet ato aku yg telat ya?

    Komentar oleh teruNe sasaQ | 12 Juni 2007 | Balas

  4. Ass. Pak Rohman saya mau tanya. Sebelumnya saya sudah baca tulisan bapak mengenai read more versi baru yang tampilannya: [+/-] Name Title.

    Nah yg hendak saya tanyakan, gimana caranya kalau sistem read more versi tsb hanya digunakan untuk kategori label dan arsip saja. Jadi yg bikin saya penasaran, adalah saya ingin agar blog:
    -Halaman utama ==> sistem read more nya biasa.
    -Halaman arsip, dan label ==> sistem read more nya baru. spt [+/-] Name Title

    Contoh blog yg menggunakan sistem tsb adalah http://betabloggerfordummies.blogspot.com/.

    Bisa Pak Rohman lihat di Blog bahasa Inggris tsb. Gimana ya pak caranya. Maaf saya soalnya gak terlalu ngerti java script. Mohon cepat dibalas ya pak, maklum gak sabar nih.

    Thanks🙂

    Komentar oleh Alun-alun | 25 Juli 2007 | Balas

  5. sobat Alun-alun, mohon maaf kelupaan ga di jawabin. Untuk arsip seperti itu harus membubuhkan javascript di dalam templatenya. Template minima yang saya berikan pada blog Template unik sudah mengadopsi arsip seperti itu. Kalau untuk menerangkannya saya masih agak bingung nernginnya, sedikit sulit. Sama halnya membuat template jadi 3 kolom itupun belum saya buatkan tutorialnya. kalo mau, download saja template minimanya trus pelajari deh

    Komentar oleh rohman | 30 Juli 2007 | Balas

  6. Kok punya sRiE ga bisa yaa??😦
    apa sRiEnya yg salah😕
    udh 2x coba tetep ga bisa, weleh…..

    Komentar oleh sRiE | 21 Agustus 2007 | Balas

  7. yg punya sRie kan template baru, coba baca yang di sini ! atau yang di sini !

    Komentar oleh rohman | 21 Agustus 2007 | Balas

  8. mas, punya V ajg kok g bisa ya? cari stilenya yg g ktemu. knp ya?

    Komentar oleh ED-an | 24 November 2007 | Balas

  9. Thanks mas, Our Blog leader! ciyyeeee!!

    Komentar oleh andre|scriptzone | 25 November 2007 | Balas

  10. pak saya ingin menampilkan read more di akhir tulisan yang terpenggal,
    bagaimana caranya?

    misal:
    asdlkjlkj asdasdasdkaj lks akjdaljkdalj adsk read more

    saya ingin seperti contoh diatas soalnyas elama ini yg muncul

    adkljlk ji ksdoa ahdoaido kajsdlakndn lasjdjasd ajsdn ajshdka ajshdkajs ajsdhasj

    read more

    terimaksaih!
    mail saya
    luqman@nutrifood.co.id

    Komentar oleh muhammad luqman baehaqi | 30 November 2007 | Balas

  11. menu setting dan formatting gak ada nih…

    Komentar oleh nrLnrL | 21 Desember 2007 | Balas

  12. Hi Pak Rohman…
    Thx banget artikelnya yah..
    saya pendatang baru di blogger.. tukisannya banyak membantu nihhh…

    roni

    Komentar oleh roni | 18 Januari 2008 | Balas

  13. Mas rohman, saya mau minta tolong dibikinin “read more” bisa gak? Saya kan baru buat blog. Blog saya ini masih “perawan” loh. Dalam artian masih polos belum diapa-apain. Yang comment aja masih belum ada. Hehehe jadi maju nih.
    Gini ceritanya. Saya mengikuti 2 cara membuat “read more” di blog anda. Tapi dua2-nya gagal.
    1. Read more klasik :
    saya tidak menemukan kode (style).
    2. Read more template baru : (head) nya ketemu tapi langkah yang kedua saya tidak menemukan. Yaitu yang menambahkan kode merah ke kode hitam.
    Perlu diketahui saya tidak punya pc jadi kalau mau buka internet ya di warnet. Jadi gak bisa maksimal.
    Nanti saya kasih user name dan password terus tolong dibikinin read more nya ya. Oh ya. Kata-kata read more tolong diganti dengan : baca selanjutnya (gak pakai titik).
    Tolong dijawab lewat email. Sebelumnya trims banget.

    Komentar oleh blacxx125 | 18 Januari 2008 | Balas

  14. @blacxx125 : untuk membuat read more, saya sudah posting yang caranya lebih simpel dan mudah untuk di praktekan, coba silahkan baca dulu postingan yang ini

    Komentar oleh rohman | 18 Januari 2008 | Balas

  15. Nyerah deh mas rohman. Saya sudah coba buat sesuai yg dipostingan baru. Yang lebih simpel. Tapi saya nyari kode “data:post.body/” nya kok ya gak ketemu2. Apakah setiap template itu kodenya berbeda-beda. Bagaimana kalau saya kirimkan kode template saya agar bisa mas periksa mana yang salah. Syukur2 kode yang baru ditulis sekalian jadi bisa langsung saya upload.

    Komentar oleh blacxx125 | 19 Januari 2008 | Balas

  16. Nyerah deh mas rohman. Saya sudah coba buat sesuai yg dipostingan baru. Yang lebih simpel. Tapi saya nyari kode data:post.body kok ya gak ketemu2. Apakah setiap template itu kodenya berbeda-beda. Bagaimana kalau saya kirimkan kode template saya agar bisa mas periksa mana yang salah. Syukur2 kode yang baru ditulis sekalian jadi bisa langsung saya upload.

    Komentar oleh blacxx125 | 19 Januari 2008 | Balas

  17. Nyerah deh mas rohman. Saya sudah coba buat sesuai yg dipostingan baru. Yang lebih simpel. Tapi saya nyari kode data:post.body kok ya gak ketemu2. Apakah setiap template itu kodenya berbeda-beda. Bagaimana kalau saya kirimkan kode template saya agar bisa mas periksa mana yang salah. Syukur2 kode yang baru ditulis sekalian jadi bisa langsung saya upload.

    Komentar oleh blacxx125 | 19 Januari 2008 | Balas

  18. DAhsyat Kang! saya pikir cuman orang luar negri yang bisa bikin kayak gini! Orang indonesia juga bisa! Allahuakbar! Jadi semangat belajar nih! makasih kang! sangat berguna!

    Komentar oleh media-itsar | 29 Januari 2008 | Balas

  19. jelas kang…. sangat jelas sekali.. jazakallah atas infonya. moga jadi amal jariyah…

    Komentar oleh media-itsar | 29 Januari 2008 | Balas

  20. Template Blogspot Gratis Template Gratis

    Download template gratis

    Komentar oleh Templates Gallery | 12 Februari 2008 | Balas

  21. apa kabar semuanya, mas minta bantuan, nanya yaaa, untuk membuat coment seperti ini bisa tampil dibawah, ini baguss sekali, bisa ga masss ajarin aku, trimakasih
    kirin email ke anisau_cntk@yahoo.co.id

    Komentar oleh Tika | 20 Maret 2008 | Balas

  22. apa kabar semuanya, mas minta bantuan, nanya yaaa, untuk membuat coment seperti ini bisa tampil dibawah, ini baguss sekali, bisa ga masss ajarin aku, trimakasih
    kirin email ke anisau_cntk@yahoo.co.id

    Komentar oleh Minta Toloooong masss | 20 Maret 2008 | Balas

  23. @tika : padahal pertanyaan ini sudah saya tulis pada sesi tanya jawab lho, di tab menu bagian atas.
    coba baca di sini

    Komentar oleh Rohman | 20 Maret 2008 | Balas

  24. kang rohman, thanx tipsnya
    tapi ko tulisan readmore saya adanya diatas giman tu
    ??
    http://faisalabdulkhair.blogspot.com

    Komentar oleh Faisal Anwar | 21 April 2008 | Balas

  25. kang minta tips nya donk gimana caranya ningkatin Page ranking. Ths ya….
    http://www.chaison84@gmail.com

    Komentar oleh Kristoforus | 21 April 2008 | Balas

  26. Aduh Blog gua versi baru mas, trus gimana nih?

    http://www.b43_net.blogspot.com/

    Komentar oleh __::viRus (dot)bAt | 18 Mei 2008 | Balas

  27. wew ………… dah ketemu ada di sini http://kolom-tutorial.blogspot.com/2007/05/membuat-read-more-2.html
    dan di sini http://kolom-tutorial.blogspot.com/2007/06/read-more-versi-baru.html

    thanks brow, lagi nyoba nih…. nice posting? salam kenal

    http://www.b43net.blogspot.com/

    Komentar oleh __::viRus (dot)bAt | 18 Mei 2008 | Balas

  28. mas, blog saya kok ga bisa yaa?
    tulisan readmore nya muncul… tapii.. postingannya tetep panjang… ga kepotong. padahal pas nulis, udah ngikutin semua cara yang ada…

    Komentar oleh ajengSapiChubby putri | 18 Juni 2008 | Balas

  29. saya newbie, mohon bantuan untuk menyempurnakan blog saya


    GenalMadep

    Makasih semuanya….

    Komentar oleh PASTI BISA | 20 Juni 2008 | Balas

  30. nice blog.. sukses selalu, artikel diatas n beberapa artikel lain sangat berguna bagi pemula seperti saya..

    Komentar oleh KaDe's | 21 Juni 2008 | Balas

  31. Kang Mau Tanya nih, Klo button Login dari forum di tampilinya di blog gmna ya caranya?? jadi nanti yg mau masuk forum mesti buka blog ku dulu dan loginya dari sana…. Mohon Pencerahannya Kang… HAtur Nuhun… Pisan….:-*

    Komentar oleh dewa | 4 Juli 2008 | Balas

  32. kang maksi infonya…tadinya aku pake kode span n sering eror…ada space antara batas potongan posting sampe link read more nya…sekarang uda dibenerin…hatur nuhun kang….

    Komentar oleh Gigi Sehat Badan Sehat | 9 Juli 2008 | Balas

  33. thank atas tipsnya….sukses terus kang rohman

    Komentar oleh make money online | 14 Juli 2008 | Balas

  34. < $BlogItemBody$> nya ga ada di template kang

    Komentar oleh Ayiek | 15 Juli 2008 | Balas

  35. ramah.. sederhana.. dan selalu mau berbagi.. itulah kang rohman.. semoga menjadi amal yang sholih..

    amin

    Komentar oleh culture | 15 Juli 2008 | Balas

  36. wah sederhana banget tapi asli tetep gw gak bakal ngerti kl gak nyobaen tulisan kamu,

    thx mate😀 segera dipraktekkan neh

    Komentar oleh denny | 29 Juli 2008 | Balas

  37. makasih mas

    Komentar oleh kampuskeadilan | 1 Agustus 2008 | Balas

  38. tx bgt….. sgt bagus n membantu q tuk phm blog n m-design blog-ku……
    tx bgt….

    Komentar oleh Adhe Septian Putra Hunga | 9 Agustus 2008 | Balas

  39. Akhirnya dapat juga… (informasi membuat read more) Makasih!

    Komentar oleh adhi | 11 Agustus 2008 | Balas

  40. kang cara membuat kotak comen seperti yang kang punyai ini gimana?tolong kang aku di bantu!!! thank’s

    Komentar oleh Qin | 13 Agustus 2008 | Balas

  41. mas saya bagaimana caranya kalo di klik readmorenya, tapi ganti windows baru atau tab baru di browsernya??
    thanx 4 d tips

    Komentar oleh Faisal Malmsteen | 17 Agustus 2008 | Balas

  42. bung lam kenal, emm mo nanya publishing blog yang paling efektif bagaimana?
    makasih
    perimata.blogspot.com

    Komentar oleh Anonymous | 17 Agustus 2008 | Balas

  43. Thks bgt bosss…

    Komentar oleh firman_sjah99@yahoo.co.id | 20 Agustus 2008 | Balas

  44. kok gak ada ya kode < /style> di template aku?

    Komentar oleh Ceritanya Yuyun | 21 Agustus 2008 | Balas

  45. thanks ya mas tutorialnya
    nice tutor =GBU=

    Komentar oleh realreds | 30 Agustus 2008 | Balas

  46. Thanks bosss
    tak coba dulu ya, kalo gagal tak balik lagi

    Komentar oleh Ahmadplace.blogspot.com | 1 September 2008 | Balas

  47. Kang…………
    cara mengubah “read more” menjadi ” baca selengkapnya’ bagaimana?
    Tolong jawab segera, Kang…..

    Komentar oleh lilisindrawati.blogger.com | 2 September 2008 | Balas

  48. Maaf Kang…
    Aku sudah menemukannya. Aku senang sekali sudah bisa mengubah:read more menjadi baca selengkapnya.
    Matur suwun…..

    Komentar oleh lilisindrawati.blogger.com | 2 September 2008 | Balas

  49. Kang belum bisa juga tuh, mungkin saya harus coba lagi nih biar bisa mengubah read more

    Komentar oleh THE GREEN TEAM | 4 September 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: