20 Membuat Read More Atau Baca Selengkapnya

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Postingan kali ini tutorial membuat read more atau baca selengkapnya, Karena ada ade yang nanya tuh di kolom shoutmix,

dien: Kak, gimana sih caranya biar postingan tidak tampil seluruhnya? Yang ada "baca selengkapnya..." gitu...

Dari pada dijawab personal aja mendingan dibuat postingan biar bisa juga jadi referensi bagi yang lain paling tidak untuk jagoan-jagoan kecil saya nanti toh? InsyaAllah. Apalagi awal ngeblog saya juga bingung, mau tampilin postingan tiga aja dihalaman depan dah panjaaaang banget, pusing khan liatnya? Fatalnya gara-gara masalah sepele itu saya sempat mandek nulis, setelah dapat caranya template saya malah rusak karena salah memahami. Belajar dari pengalaman saya tuliskan tutorial ini, pengalaman guru paling berharga bukan?

Oke gak panjang lebar lagi, langsung pada tahapan-tahapannya...

*** Membuat Read More atau Baca Selengkapnya Pada Template Blogger baru...

1. Sig in dulu ke blogger

2. Masuk pada menu setting atau pengaturan

3. Klik formatting/ format

4. Pada bagian post Template, isi kotak kosong tersebut dengan kode seperti ini:

<span class="fullpost">

</span>

5. Save setting

Guna setting kode ini agar pada saat postingan kode tersebut muncul secara otomatis pada bagian edit HTML untuk membantu kita agar tidak lupa dengan kode tersebut.

langkah selanjutnya...

6. Kembali ke dasboard

7. Masuk pada menu Layout atau Tata Letak

8. Klik menu Edit HTML

9. Untuk mengantisipsi hal yang tidak kita inginkan terjadi pada template kita baiknya klik tombol Download Full Template dulu, kemudian save di folder, jadi bisa back up data kembali kalau tak berhasil.

10. Jangan lupa centang kotak kecil disamping tulisan Expand Widget Template Tunggu beberapa saat sampai proses selesai.

11.  Cari kode berikut ]]></b:skin> kemudian letakkan tepat dibawahnya kode warna merah berikut:

<style>
<b:if cond='data:blog.pageType == "item"'>
   span.fullpost {display:inline;}
<b:else/>
   span.fullpost {display:none;}
</b:if>
</style>

Jadi kodenya berada antara kode ]]></b:skin> dan </head>

12. Selanjutnya cari kode <p><data:post.body/></p>

letakkan kode warna merah berikut tepat dibawahnya

<b:if cond='data:blog.pagetype != "item"'>
<a expr:href='data:post.url'> Read More...</a>
</b:if>


Read more...bisa anda ganti dengan baca selengkapnya atau kalimat lain yang anda sukai

13. Jangan lupa save/ simpan template.

14. Terakhir, setiap kali membuat postingan, pada tempat yang anda inginkan diletakkan Read More letakkan kode ini <span class="fullpost"> dan diakhir postingan letakkan kode </span> yang perlu diingat anda meletakkan kode tersebut pada bagian edit HTML bukan bagian compose/ Tulis.

*** Memasang read more pada template yang disediakan blogger sama dengan langkah-langkah diatas dari point 1 sampai 10. Untuk selanjutnya cari kode:

<p><data:post.body/></p> atau <data:post.body/> karena kode itu sama saja, p hanya kode spasi

Kalau sudah dapat ganti kode tersebut dengan kode berikut:

<!-- Start Readmore -->
<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>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore.....</a>
</b:if>
<!-- End Readmore -->

Langkah selanjutnya sama dengan point 13 dan 14 diatas

Selamat mencoba! Semoga bermanfaat! Jangan lupa komentarnya ! Alhamdulillah selesai.


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

20 komentar :

  1. Syukran Katsir untuk Tipsnya... ini yang saya cari2...

    BalasHapus
  2. Afwan... alhamdulillah yang sedikit ini bisa membantu...

    BalasHapus
  3. Syukran Katsir
    semua tips mba banyak membantu saya..
    saya juga sudah berlangganan via email dan follow blog mba. izin terapkan..

    BalasHapus
  4. apa ada kode lain selain ini
    kok gk ada ya?

    BalasHapus
  5. @ gadis: jangan lupa centang expand template widget biar kodenya kelihatan

    BalasHapus
  6. makasih ya mba, kurang satu lagi.
    wkwkwkwk maklum agak lambat ne prosesornya bekerja, wkwkwkwk...

    tu yg poin 13... kasih contoh dong, soalnya udah ada tulisan read more tp selalu diakhir postingan aja...bukan di tengah

    BalasHapus
  7. ups salah... ponit 14 mba =))

    BalasHapus
  8. kk gimna sih buat menampilkan postingan lebih dari satu soal nya saya klu buat postingan yg terlihat cuma satu trus cuma judul nya yg kelihatan ...Maklum kk pemula soal nya saya cuma coba coba.

    Makasih

    BalasHapus
  9. kakak..... kalau icon nya cara bikinnya gimana kak?

    BalasHapus
  10. kk... kok tulisan baca selengkapnya ada di sepenggal artikrl dan di artikel yang full.

    sama-sama ada readmorenya

    gimana dunk??

    BalasHapus
  11. Duh mba, qo aku gak bisa ya????
    bingung juga....
    dah di coba berapa kali, 'Read more'nya malah ada di akhir postingan... sama aja boong.. hehe... tlong di bantu mba..

    BalasHapus
  12. huahaaa... postinganku ga ada perubahannya sama sekali..

    BalasHapus
  13. maaf,, kog masih gak mau ya???
    padahal sudah saya coba, dan gak ada yg salah,,,
    mohon bantuannya,,,,

    BalasHapus
  14. mksh bgt yaa infonyaaa :) berguna bgt!cm pas dicoba read morenyaa ada di akhir posting,jd gmn?

    BalasHapus
  15. pusing gak bisa bisa mau nangis :'(

    BalasHapus
  16. ada kode untuk aoutoreadmorex....?????

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!