Buat Read More Versi Baru

"klo mw nambahin pada hal. blog yang baca selengkapnya bgmn? jd hny intro textnya saja yg ada d hal."

Empat hari yang lalu, sobat saya Fareed menanyakan bagaimana cara buat read more seperti tercermin pada kutipan komentanya di atas. Karena templet yang dia pakai adalah templet klasik, maka saya sarankan agar membaca tutorial kang Rahman. Dan saya berjanji akan mengulas kembali masalah read more ini, karena bagaimanapun fungsi fasilitas ini sangat berguna, terutama bagi blog yang berisi artikel dan makalah yang notabene sangat panjang.

Pada postingan kali ini, akan mengulas bagaimana cara pasang read more atau baca selengkapnya versi baru (seperti yang ada di blog putih ini). Fasilitas read more ini dibuat oleh Ramani dan Hans. Di awal tutorialnya, Ramani menulis:
"Your blog's main page usually shows the entire content of each post. If your posts are usually more than 2 paragraphs, then your visitor will find it difficult to quickly find the topic of interest to him because he needs to scroll down a lot. This is where expandable post summaries helped in the old Blogger. This hack serves the same purpose for the new Blogger and more! That is, main page will show only post summaries and when you click "Read more", the full post appears in the main page itself (Peekaboo view)!!"

Ya, kelebihannya adalah pembaca tidak perlu me-loading ketika mengklik link Read more, karena keseluruhan artikel bisa terbuka sampai akhir. Selain itu untuk artikel yang pendek, tulisan readmore nya bisa di hapus sehingga tidak mengganggu pemandangan.

Oke, kita langsung saja ke "TKP", dan perlu diingat bahwa fasilitas ini hanya untuk templet new blogger (xml), bukan untuk templet kalsik. Langkah-langkhanya adalah sebagai berikut :

1. Sig in di blogger dengan id sobat.

2. Klik menu layout

3. Klik menu Edit HTML

4. Klik tulisan Download Template lengkap, silahkan save dulu template sobat, ini untuk mencegah resiko apabila terjadi kesalahan dalam melakukan kesalahan dalam proses editing template

5. Klik kotak kecil di samping tulisan Expand Template Widget, sekali lagi jangan lupa untuk memberi tanda centang dulu yah.


6. Tunggu beberapa saat sampai proses selesai

7. Copy kode berikut, lalu paste tepat di atas kode </head>

<script type='text/javascript'
src='http://bahauddin.fileave.com/kumpulanJavaScript/ReadmoreVersiBaru.js'/>


8. Tambahkan kode berikut pada kode template sobat, yang berwarna hitam adalah kode asli dari kode template dan yang berwarna merah adalah kode yang harus di tambahkan, sedangkan yang berwarna biru bisa anda rubah sesuai keinginan :

<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan saja...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

<div style='clear: both;'/> <!--clear for photos floats-->
</div>
</div>
.... rest of template code ....

9. Klik tombol SIMPAN TEMPLATE

Langkah selanjutnya :
1. Klik menu Pengaturan

2. Klik menu Format

3. Copy kode berikut lalu paste pada kotak kosong yang berada di samping tulisan Template posting.

<span id="fullpost">


</span>


4.Klik tombol Simpan Setting

5. Selesai.

CARA POSTING ARTIKEL
Pada saat berada pada menu posting, pilih tombol yang Edit HTML jangan pilih yang tombol Compose, maka akan secara otomatis terlihat kode tadi di atas yaitu :

artikel yang mau di tampilkan di muka (ringkasannya)

<span id="fullpost">

sisa keseluruhan artikel

</span>

Artikel yang akan ditampilkan di postingan harus berada di atas <span id="fullpost">, sedangkan artikel yang disembunyikan (sisanya) ditaruh di bawah kode barusan, dan jangan lupa ditutup dengan kode </span>. Selamat mencoba...

15 Comments

  1. thanks, infonya sangat berguna...

    ReplyDelete
  2. @ Hanif ;

    Ya, terima kasih kembali..Jangan lupa mampir lagi. Salam sukses selalu..

    ReplyDelete
  3. thx bro atas jawaban dr pertanyaan saya...

    ReplyDelete
  4. @ fareedh ;

    Thank's juga, sang filsuf Cinta...
    Apalagi "The Power of Love"-nya itu lho..:X

    Salam akrab...

    ReplyDelete
  5. lam kenal yah... n trims atas info2 nya.. kapan2 tour ke blog ku...

    ReplyDelete
  6. Maksi juragan, saya Berhasil menyembunyikan sebagian artikel.
    Saya mau tanya, apakah bisa kita rubah tulisan 'Selanjutnya' itu berbeda untuk tiap postingan?
    Terima kasih atas jawabannya...

    ReplyDelete
  7. Tambahkan kode berikut pada kode template sobat <<---- Di Mana Maksud Nya Ini Di Taruh Mas Baharudin

    ReplyDelete
  8. @ Pioneer ;

    Sejauh ini, saya belum mencoba trik untuk merubah tulisan berbeda secara otomatis, dengan kode tertentu, misalnya. Akan tetapi, kemungkinan saja bisa jika kita melakukannya secara manual.

    @ LansuNe ;

    untuk kode yang berwarna hitam, itu memang asli dan ada pada templete milik Anda. sedangkan yang berwarna merah adalah kode yang harus anda tambahkan.

    Untuk mempermudah, kita bisa saja cari salah satu kode yang berwarna hitam dengan menekan Control F lalu masukkan kode yang akan dicari, misalnya :
    <div class='post-header-line-1'/> lalu tambahkan kode-kode yang berwarna merah sesuai dengan trik di atas...

    Thank's semuanya..
    Salam akrab...

    ReplyDelete
  9. Makasih mas....
    banyak yang udah ku prektekin dan alhamdulillah nambah-nambah ilmu..

    ReplyDelete
  10. Assalamu'alaikum,
    Trims atas Tips "Read More". Sudikah BlogRoll?
    Wassalam

    ReplyDelete
  11. Sdr. Bahaudin, Trims Read More,langsung saya praktekkan. Tetapi mengapa postingan saya paling atas selalu tertulis expr:id='"post-" + data:post.id'>. Dan tidak ada kalimat yang disembunyikan (Tulisan Read More selalu tampil pada akhir artikel/posting). Jadi saya masih belum berhasil. Bisa bantu lagi, kalau mau bisa tengok di http://nabilasamha.blogspot.com tempat saya mempraktekkan "Read More", Trims sebelumnya.

    ReplyDelete
  12. @ Ninil ;

    Setelah saya lihat source blog-nya, kemungkinan besar ada kode yang tidak terpasang. Kemungkinan yang lain, bisa saja karena tag <span> sering berbenturan dengan <span> yang lain. So, kodenya tidak berfungsi.

    Saran saya, ukhti bisa memakai Read MOre LIberal (tapi bukan ISlam Liberal lho ya:-D), seperti ditulis oleh Kang Jaloe. Untuk mengintipnya, silahkan klik disini.

    Untuk Blogroll, sebenarnya kita bisa membuatnya dengan kode HTML dan bisa juga dengan BLog List yang memang tersedia di Widget Blogspot ini. Terserah ukhti pilih yang mana....

    Salam ....

    ReplyDelete
  13. makasih banyak atas info nya ya pa......
    Saya Dika, Saya mau nanya.
    gimana caranya pasang foto di Posting Blogspot??

    dika_nazi@yahoo.co.id
    http://berliandpalace.blogspot.com

    ReplyDelete
  14. @ Berliand Blog ;

    Untuk memasukkan gambar di postingan blog, kita tinggal klik ikon gambar yang ada di bagian atas kolom posting.
    Ketika mouse tersorot ke ikon tersebut, maka akan muncul tulisan "Tambah Gambar atau Add Picture". Lalu ikuti langkah selanjutnya.

    Thank's atas kommennya yo...

    ReplyDelete
  15. trims tipsnya, pas lg nyari jd lgs sy pasang. cuma klo saya klik 'Baca Selengkapnya', gak mau jln. Bisanya klik judul posting baru kebuka smua postingnya. Gmn ya cara biar bisa kebuka dgn klik 'Baca Selengkapnya'? Salam

    ReplyDelete

Post a Comment

Previous Post Next Post