Skip to main content

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...

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

Kepada Sobat-Sobat sekalian silahkan komen Disini, Semuanya boleh komen, yang tua sampai muda bebas berkomen ria di bawah ini.

Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.

Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).

Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.

Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia. Jika anda tidak punya blog/website, kolom URL boleh dikosongi.

Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan)

Makacih ya atas komennya ...

Popular posts from this blog

HUMAN RELATION ; Perspektif Psikologi Humanistik, Fungsionalisme dan Behaviorisme (Sebuah Kajian Analitis-Interkonektif)*

Pendahuluan
Human Relation, merupakan hubungan atau kerjasama antara dua individu atau lebih, khususnya dalam status hubungan atau interaksi social. Buruk atau baiknya human relation dapat diukur dari adanya kepercayaan yang bersifat timbal balik antara satu orang dengan orang lain serta dari adanya sebuah penghormatan atau penghargaan dan rasa tolong menolong yang kokoh. Bukan menjadi keraguan lagi bahwasanya human relation menjadi suatu keinginan yang sangat primordial bagi setiap yayasan atau sebuah organisasi, bahkan menjadi syarat utama dari terealisasinya tujuan-tujuan serta pencapaian visi dan misi sebagai kunci kesuksesan organisasi pada umumnya.

Human relation sering disebut juga dengan “interpersonal relation”, yaitu kerjasama sekelompok individu dari masyarakat social yang tumbuh dari adanya hubungan antara satu individu dengan individu yang lain. Interpersonal relation merupakan sebuah deskripsi yang jelas tentang tata pergaulan atau tingkah laku manusia dan karakteristik pr…

Kumpulan Novel Jar (untuk HP Aplikasi Java)

Bagi para novel mania, membaca novel tentunya adalah kesenangan tersendiri. Semacam interaksi personal dengan dunia imaji yang kerap menghentak-hentak ambisi. Di dunia maya, kita banyak menjumpai situs-situs yang menyediakan novel dengan berbagai format dan ekstensinya. Ada format PDF (portable document format), yang dapat dibuka dengan program Acrobat Reader atau sejenisnya. Ada juga yang dengan bentuk format htm, yang dapat dibuka dengan browsing atau internet eksplorer secara offline. Ada juga yang berbentuk format exe. Ada juga yang menggunakan windjvu-viewer (untuk membuka file extensi *.djv / *.djvu). Ada format "lit Viewer"(untuk membuka file extensi *.lit). Dan banyak "ada juga-ada juga" yang lain...

Tapi, pada postingan kali ini, saya akan berbagi lagi dengan sobat sekalian tentang Novel HP (aplikasi java). So, bagi sobat yang punya hobbi ngoleksi novel, tetapi jarang online dan tidak punya komputer, jangan khawatir. Berkat kecerdasan teknologi, kita yang …

Download Alfiyah MP3

Di kalangan pondok pesantren, nama Ibnu Malik dan Kitab Alfiyah adalah dua entitas yang sudah tidak asing lagi, terlebih bagi pondok pesantren salaf yang setiap harinya bergumul dengan kitab kuning dan tata gramatika bahasa Arab (Nahwu & sharrof). Di pondok saya sendiri, Mambaul Ulum Bata-bata, Pamekasan, Madura, kitab Alfiyah Ibnu Malik menjadi Kitab standart acuan dalam pembelajaran Kaidah bahasa Arab, dan menjadi syarat pelulusan ke tingkat Aliyah B, yang orientasinya memang menitik beratkan pada kajian kitan klasik.

Pada malam-malam tertentu, para santri diwajibakan membaca nadham (bait-bait) Alfiyah dengan bersama-sama, dengan lagu dan irama yang bermacam-macam. diharapkan, dengan tradisi pembacaan Alfiyah secara rutin dan intens, santri mamapu menhafal dan memahami isi kandungan kitab Alfiyah ini dengan baik dan mudah.

Di era teknologi dan informasi yang serba canggih ini, kitab Alfiyah dan kitab-kitab kuning lainnya sudah tidak dipelajari secara manual dan klasikal, tetapi …