Menambah link “Read More” pada postingan di Blogger

Karena menurutku petunjuk ini penting, maka aku nyoba menjelaskannya dalam bahasa Indonesia. Karena baru pertama kali bikin petunjuk seperti ini, harap dimaklum kalo ada yang membingungkan. just tell me in your comment here, jadi bisa ditindaklanjuti..=)

update 20 Febuari 2006 : ralat koding untuk bagian style sheet. sebelumnya tertulis: “…<ItemPage>…<ItemPage>” yang seharusnya tertulis “…<ItemPage>…</ItemPage>”

update 14 Febuari 2006 : nyoba lagi pake Internet Explorer (IE) 7 The Beta 2 Preview link read morenya bisa terlihat.pengguna IE, kalau mau, upgrade IEnya jadi IE7 =)

update 12 Febuari 2006 : untuk sementara (insyaAllah) tips ini baru bisa berjalan kalo menggunakan browser Firefox. baru ketahuan hari ini (12 Febuari 2006) setelah 3 minggu “mengudara” ^_^; mudah2an bisa ditemukan solusinya insyaAllah, ditunggu jg ya sarannya.

Petunjuk menambah link “Read More” pada artikel di blog Anda [untuk Blogger user]:

    1. pastikan bahwa option “Enable Post Pages” untuk blog Anda sudah aktif [caranya liat bagian Settings-->Archiving-->Enable Post Pages? jika dalam kondisi "No", rubah menjadi "Yes"]
    2. Kemudian lihat bagian Template–>Edit Current. Kita akan melakukan sedikit modifikasi pada kode template blog Anda. Untuk mengantisipasi kesalahan yang mengakibatkan kerusakan pada layout, jangan lupa untuk membackup kode template Anda! [copy paste kode template awal Anda ke Notepad dan simpan di tempat yang mudah Anda temukan].
      Kita akan menambah beberapa baris kode CSS pada style sheet template Anda. Selanjutnya copy-pastekan kode CSS berikut:

      a.more{display:none;}<MainOrArchivepage>span.fullpost {display:none;}span.fullpost + a.more{display:inline;}span.fullpost + div + a.more{display:inline;}</MainOrArchivePage><ItemPage>span.fullpost {display:inline;}</ItemPage>

      style sheet dapat ditemukan pada bagian atas template Anda dan terletak diantara tag html <style> dan </style>. pastikan bahwa Anda meletakkannya di antara kedua tag tersebut.

    3. langkah selanjutnya adalah menambahkan link “Read More” pada main page blog Anda. masih pada kode template blog Anda, kita akan memodifikasi area sekitar <$BlogItemBody$> sehingga menjadi seperti berikut:
      <div><$BlogItemBody$></span><a class="more" href="<$BlogItemPermalinkUrl$>"title="read the full article...">Read more...</a></div>

      lalu simpan dengan menekan tombol “Save Template Changes” lalu Republish blog Anda.

    4. Saat Anda akan membuat post baru, tambahkan kode ini di post Anda: <span class=�fullpost�>
      contoh penggunaannya:

      Ini adalah bagian awal dari post ini <span class=”fullpost”>Dan ini adalah lanjutannya.

hasilnya setelah di-publish adalah sebagai berikut:

Ini adalah bagian awal dari post ini Read more…

Kalau link “Read More” di klik maka akan menuju halaman yang menampilkan keseluruhan teks:

Ini adalah bagian awal dari post ini. Dan ini adalah lanjutannya.

  • jika Anda tidak ingin repot-repot menuliskan tag <span class=�fullpost�> setiap akan membuat post baru, Anda bisa memanfaatkan fungsi “Post Template” yang disediakan Blogger, sehingga ketika Anda membuat post baru, tag tersebut sudah tersedia otomatis. caranya lihat bagian Setting–>Formatting–>Post Template. Isi text box di samping tulisan “Post Template” dengan tag tersebut. Kemudian klik tombol Save Settings lalu Republish blog Anda. Karena tag tersebut adalah kode HTML, Anda baru akan bisa melihatnya di area “Edit HTML”.
  • selamat mencoba.

    58 Responses so far »

    1. 1

      dhika said,

      nice tips ukh…:)

    2. 2

      defathya said,

      aslmsmoga bermanfaat tips-nyatrus coba deh nambah Shoutmix di blog-mu spy qt2 bisa kirim pesen.Tanxwslm

    3. 3

      echo said,

      bagus banget gmn klo rutin kasih tips n trick perbloggingan di muslim blog? mau yaaaa :D

    4. 4

      su91 said,

      Assalamu alaikum….Ciamikkk, new bloger tapi dah jago??? koq bisa yaa??:-?

    5. 5

      mela said,

      bikin shoutmix? wah boleh juga tuh..=D insyaAllah ntar deh dibikin =)

    6. 6

      MelaSayang said,

      Salam kenal dari MelaSayang

    7. 7

      hanum said,

      wahh…ini dia tips yang saya cari2 dr dulu :) jazakillah ukh. Taihen doumo arigatou :)

    8. 8

      awan said,

      waaaa, gw ko nggak bisa yah….gak bisa kepotong, ada sih tulisan read more-nya, tapi tetep aja full satu thread, gak kepotong setengahnya, kenapa yah…?

    9. 9

      rozi said,

      Salam kenal dari negeri gandhi,napa blog yg ngasi tips blom di pasang read more ya :)

    10. 10

      mela said,

      salam kenal jg bwt rozi,maksudnya “blog yang ngasi tips blom di pasang read more” itu apaya? blognya siapa? tips yang mana? =)

    11. 11

      mela said,

      bwt awan,masih blum bisa jg link read morenya?

    12. 12

      dhika said,

      saya coba pake IE, dah gak msl…

    13. 13

      hanum said,

      Mela (gak pake ‘mbak’ lagi ah ^_^)..aku belum berhasil masang read more. Tp setelah baca penjelasan di atas…baru ngeh deh. Aku kan pake IE…pantes aja gak bisa ya. Ok..ditunggu solusinya :) Jazakillah

    14. 14

      hanum said,

      Mela (gak pake ‘mbak’ lagi ah ^_^)..aku belum berhasil masang read more. Tp setelah baca penjelasan di atas…baru ngeh deh. Aku kan pake IE…pantes aja gak bisa ya. Ok..ditunggu solusinya :) Jazakillah

    15. 15

      mela said,

      menanggapi commentnya akh dhika, kalo pake Internet Explorer (IE) 7 yang beta, alhamdulillah kelihatan link read morenya (baru dicoba semalam =) ), tapi pernah buka blog ini pake IE 6, link read morenya nda kelihatan. jadi ya solusinya insyaAllah, either using Firefox atau upgrade IE nya jadi IE 7 beta =)

    16. 16

      nanda said,

      Mbak, aku coba seperti yg mbak ajarkan. Koq nggak berhasil yah. Malah page nya jadi blank. Nggak ada apa-2. Sempat panik juga, untungnya source awal masih di save…plz…help me donk, salahny adi mana ???

    17. 17

      mela said,

      mba nanda jangan panggil aku mba, kayaknya lebih cocok ke adek =) aku bisa liat source yang udah mba tambahin koding di atas?kirim ke emailku mba mela(dot)sari(at)yahoo(dot)com

    18. 18

      za said,

      mbak, aku gak bisa ngedit redmore-nya. kl aku pake sintak yang diatas postingannya jadi ilang trus yang laen jadi ngaco gmn ya? ada yang salah kali ya?? Mohon bantuannya ^_^v

    19. 19

      CatatanRevolusi said,

      Aslm, apakah cara ini juga berlaku di layanan blog lainnya, seperti misalnya blogsome?

    20. 20

      mela said,

      #CatatanRevolusiuntuk blogsome, aku udah nyoba liat koding templatenya. sepertinya susah diutak-atik (dalam kemampuan seorang mela), dan aku belum nemuin penjelasan yang detil mengenai tag2 content yang digunakan untuk template blogsome. blogsome menggunakan smarty engine..which..i dont’t have any knowledge of it..=(

    21. 21

      mela said,

      #Mba’ zaudah bisa kan ya, alhamdulillah =) maaf yah, melanya salah nulis kodingnya untuk bagian style sheet ^_^;; kurang tanda slashnya (‘/’). insyaAllah udah aku perbaiki di artikelnya =)

    22. 22

      CatatanRevolusi said,

      terima kasih yah infonya, ilmunya :d

    23. 23

      CatatanRevolusi said,

      terima kasih yah infonya, ilmunya :d

    24. 24

      denden said,

      wah dicoba dulu nih…he he he…makasih infonya..

    25. 25

      x2nie said,

      hay! sip! sip!it’s work! it’s work!thanks ya. thanks berat.

    26. 26

      mela said,

      to all, thank you yah udah ngisi commentnya :) don’t hesitate to tell me kalo ada problem, insyaAllah ditindak lanjuti..=D

    27. 27

      santi said,

      Wah, saya dah lama nyari tips ini. Blum berhasil nih, body text-nya kepotong sih, tapi tulisan “Read more”-nya gak muncul. Kira2 kenapa ya?Jazakillah.

    28. 28

      santi said,

      iya, nggak ada tulisan “read more….”-nya. Btw, blognya boleh saya link ya…biar yang lain dapat info juga…

    29. 29

      mela said,

      @mba santimm,wah ga bisa muncul yah link read morenya?tapi kayaknya dulu mela pernah nengok ke blognya mba, pernah muncul itu link read morenya..kayaknya ^_^;; boleh koq mba ngelink ke blog mela, tafadhol atuh..=)

    30. 30

      Febry said,

      Ass. Mba MeLa, beberapa waktu yg lalu aku mau coba pake read more, dan berhasil tapi ada kendala baru, kok sisi sebelah kanan yang berisi profile, chat box archieve dll jadi turun ke bawah? mohon bantuannya ya mba buat kembali ke asal biar profile bisa naik keatas lagi. Syukron mbaWassalamu’alaikum wr wb

    31. 31

      ARS said,

      Kalo mau lebih simple, pindah ke Blogdrive aja :D

    32. 32

      dajal007 said,

      bisa tolong check blog saya ga?? kok bisa begitu sih?? T_T

    33. 33

      Fianti said,

      Aku udah nyobain tips ini, tapi kok ga kepotong di tengah2 ya, link read more nya malah ada dibwah, gmana tuh mbak, mohon bantuannya.. jazakumullah mbak..

    34. 34

      Hass said,

      Salam Kenal mbak Mela. Aku baru temuin blog mbak. Informasinya cukup bagus. Aku jadi pengen buat blog, tp belum faham, maklum aku msh awam bhanget ama IT.Aku baru baca2 perihal istilah2 di blog.O yaaa mbak, mo tanya nich.Aku pengen buat blog yang MENU UTAMA nya terdiri dari beberapa kategori ( kategori produk A, B, C, dstnya ),lalu bagaimana membuat linknya? Apakah untuk setiap kategori yg akan di buat harus membuat blog baru dengan alamat url baru? MOHON pencerahan, sekaligus langkah

    35. 35

      dajal007 said,

      di blog saya mah masalahnya adalah, kenapa tetep ada readmorenya di halaman postingan yang fullnya. kan seharusnya ga ada (ngerti ga :D ). biar ngerti coba deh kunjungin blog saya, binun niiih T_T

    36. 36

      mela said,

      hiks..hiks, maaf comment2nya ditelantarkan..ga dijawab..=(@dajalboleh lihat contoh script yang dipakai ga ya?@hassmm, setauku ada berbagai cara untuk bikin kategori kayak gitu..http://oldcola.blogspot.com/goodies/BloggerCategories.htmlhttp://blogger-tricks.blogspot.com/2006/04/blogger-categories-simple-method.htmlhttp://blogger-tricks.blogspot.com/2006/05/blogger-categories-easy-method.htmlhttp://netcf2.blogspot.com/2005/11/blogging-generate-categories-for-your.htmlbelum pernah nyoba, but i hope that’ll help insyaAllah =)@fiantiwah,ga bisa berkunjung ke blognya.url erro =( pindah blog yah?

    37. 37

      djiELz said,

      Makasih tipsnya. Tips ini saya cari udah lama baru dapet yang ini. Kebetulan sip udah berubah blog saya:-)

    38. 38

      dajal007 said,

      silakan liat di birama.net/script.txt

    39. 39

      MyIdeasofLifes said,

      hallo..fyi, utk temlplate blogger biasa, cara ini langsung bisa..entah knapa, sejak ganti skin dari template ini, ditemapatin kek apa juga, tetep gak berhasil :( aku kirim templateq ke email yah..CU at email..

    40. 40

      MyIdeasofLifes said,

      Alooww k2..sudah kirim email berisi templateQ..emailQ gmail..Waiting 4 ur respons soonly..Jazakallah..

    41. 41

      Anonymous said,

      assalamu’alaikum wah bagus…saya udah nyari nyari tutorialnya yang gamblang dan udah diterapkan tetapi gak jalan. baru setelah baca blognya mba … [sapa ya namanya..?] baru bisa. jazaakillah khoir…coba deh ini punya saya http://buku-islam.blogspot.comthanks ya

    42. 42

      chandraleka said,

      assalamu’alaikum ….wah, tapi ternyata ada errornya tuh … gimana ya?

    43. 43

      Joe Dirt said,

      wadooh pusing juga udah dipraktekin, tetep aja hasilnya nihil (read more) nya ga muncul2. tapi gpp aku coba lg. btw TY tipsnya

    44. 44

      Joe Dirt Luv Brandy said,

      Wah ini tuan rumahnya mana ya, koq ga di bls2 seh.saya udah bisa pake tambahan read more, cuman koq read morenya ga berfungsi dengan baik ya.1. Ketika di klik read more, tampilannya udah full tapi koq masih ada kata read morenya juga2. fungsi read more kan salh satunya buat ngependekin baris posting, di blog saya baris postingnya tetep full pdhl blum di klik read more.apa ada yg salah ya?Mohon Untuk dijawab!!!ato kiranya sudi untuk mampir ke rumah saya buat ngecek, ditunggu! ga pake lama!! — terima kasih—

    45. 45

      Aqien-Uwiek said,

      slam kenalkok diblog saya ga bisa yah?jadi penasaran nih?please help me,

    46. 46

      mela said,

      @aqien-uwiek, joe dirt luv brandy, chandraleka, and muslifaplease check your email. really sorry for very late reply@dajalmaaf replya teramat sangat telat, scriptnya sudah ga bisa diakses lagi ya?

    47. 47

      Keluarga Gunawan - Rani said,

      Wah mbak…bagus banget tips nya…hehehhe makasih banget mbak…aku pake ya tipsnya..:)

    48. 48

      PVT-Reservoir-Lemigas said,

      Assalamu’alaikum, mo nanya nich mela, kalo bikin spt about blogging bgm scriptnya, sorry nich baru belajar.jazakillah

    49. 49

      buyamin said,

      Bak, kenalin ya, aku bloger baru…
      Skalian mo nanya, aku pakai tamplate BLOGCROWDS karya ED MERRITT.
      Setelah aku mo edit/tambahin link read more di atas, aku gak nemuin tulisan RSS seperti yang Embak bilang. Aku bingung jadinya, padahal aku pingin posting yang panjang-panjang.
      Kutunggu ya
      TQ

    50. 50

      buyay said,

      Numpang gabung. Maaf, aku mo pasang read more, tapi aku pelototin HTML – ku kok belum nemuin tag : dan
      Ato mungkin ada yang sejenis itu?

    51. 51

      hendrypiran said,

      tips yang bagus, semoga semakin jaya

    52. 52

      antony said,

      Thanks tips nya ya…

    53. 53

      agrie_putra said,

      tak coba deh mudah2an berhasil…. thank tips nya

    54. 54

      Yuz said,

      susah bgt..

    55. 55

      zHanz said,

      Thanx bwt infonya!!!

      ini yg saya cari!

      saya cobalah ya!!thanx ya mas!

      jgn lupa ya main kesini!

    56. 56

      wisnoe said,

      klo bisa,tol dong diksh cnth gambarnya,soalnya masih bingung nich,maklum pemula…

    57. 57

      Thank you bro atas infonya,,,sangat membantu gue..

    58. 58

      fian said,

      bisa kasih info and tips buat tmbahin menu and submenu d blog gag??
      ako agag bingung nih karena aku coba berkali – kali tapi gag bisa..
      please iah…


    Comment RSS

    Say your words