Petak Umpet Isi Posting Blog di Blogspot

. Rabu, 13 November 2013
Jelas, saya bukan orang pertama yang menulis ini. Toh saya juga mendapatkannya dari banyak tempat yang tentu sudah kita kenal sebelumnya. Siapa tidak kenal o-om, kang rohman, mas anang, abah iwan, mas fatih dan tentu banyak lagi yang lain yang bisa-bisa penuh blog saya dengan nama guru-guru kita ini. Saran saya sebelum tulisan ini dibaca.. coba tengok dulu tulisan mereka. Saya jamin, tanpa harus kembali kesini, pasti kawan-kawan sudah berhasil. Itu sebabnya judul postingan ini saya buat "renyah" saja, supaya mereka yang terburu-buru butuh tulisan tentang ini, tidak tersangkut disini, dan malah tambah pusing membaca tulisan saya yang "puputeran" alias "mubeng-mubeng".

Sebenarnya istilah yang akan lebih familiar adalah "Cara Membuat Read more di Blogspot/Blogger". Bahasa yang salah tapi apa mau dikata, itu sudah jadi kaprah. Jadi saya juga ikut menerima. Sebenarnya kata "read more" digunakan oleh Wordpress untuk dijadikan hyperlink menuju tulisan secara utuh. Karena pada dasarnya Wordpress membagi tulisan menjadi dua bagian. Anggap "Awal saja" dan "Semuanya". Sayangnya, Blogspot tidak menyediakannya. Jadilah, guru2 kita ini berfikir keras untuk "mengakali" supaya blog kita di blogspot, bisa melakukan hal yang sama dengan wordpress.

Walhasil, muncullah jenis-jenis "readmore" yang bisa kita gunakan. Ada yang sama sekali mirip (dengan wordpress), tapi ada juga yang memanfaatkan model lain. Salah satunya yang sedang saya pergunakan. Yang ditulis di hackosphere.blogspot.com

Saya pilih jenis ini, karena pembaca akan langsung melihat keseluruhan isi posting, tanpa lagi harus me-load halaman baru. Pun, kelemahannya juga ada, yaitu.. tulisan ini tidak benar-benar dibagi dua, tapi hanya disembunyikan sementara, sampai ada yang membukanya. Dan cara ini hanya untuk yang menggunakan templates versi baru. (untuk semuasayangeko, mungkin cara ini tidak terlalu efektif untuk menyembunyikan tulisan dari saya :) )

Jika ingin jenis lain (misalnya yang serupa dengan wordpress) saya anjurkan untuk merujuk ke tulisan kang rohman.

Kita langsung saja...

Langkah Pertama :
  1. Sign in ke blogger (tentu dengan id kita sendiri :) )
  2. Klik Layout
  3. Klik Edit HTML
  4. Ada baiknya (atau malah harus) backup terlebih dahulu dengan men-download template kita, dengan meng-klik Download Full Template jangan lupa beri tanda centang Expand Widget Templates. Simpan baik-baik (Yakinlah.. itu berguna)
  5. Copy-paste kode berikut , tepat sebelum/diatas kode </head> :
    <!-- script readmore -->
    <script src=http://eosscript.googlepages.com/Readmore.js type=text/javascript></script>
    <!-- script readmore ends -->

  6. Berikutnya, coba cari kode berikut (warna biru adalah kode asli templates kita):
    <b:includable id=post var=post>
    <div class=post uncustomized-post-template expr:id="post-" + data:post.id>
    <a expr:name=data:post.id/>
    <b:if cond=data:post.title>
    <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>

    <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 href=javascript:void(0); expr:onclick="javascript:showFull("post-" + data:post.id + "");">[+/-] Selengkapnya...</a></p>
    </span>
    <span id=hidelink style=display:none>
    <p><a href=javascript:void(0); expr:onclick="javascript:hideFull("post-" + data:post.id + "");">[+/-] 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>
    (perhatikan) setiap templates, bisa jadi berbeda-beda. Jadi tolong konsentrasi pada warna MERAHnya saja. Misalnya jika kode "post uncustomized-post-template" tidak muncul, itu tidak masalah. Yang penting adalah tambahkan saja kode warna MERAH terhadap kode asli templates anda yang berwarna hitam. Jadi tidak perlu bingung. Patokannya kode HTML yang sedang kita edit ini ada dibawah hirarki
    <b:includable id=post var=post>
  7. Kemudian SAVE TEMPLATE
Selesai..?? Belum. Sekarang kita lanjut ke Langkah Kedua :
  1. Klik menu Pengaturan atau Setting (tergantung bahasa yang digunakan)
  2. Klik menu Format/Formatting
  3. Copy-Paste kode berikut pada kolom isian Template posting/Post Template
    <span id="fullpost">


    </span>
  4. Klik Simpan Setting/Save Setting
Terakhir adalah Langkah Ketiga yaitu cara posting.
Jadi setiap kali akan menulis, pilih menulis di Edit HTML bukan di Compose, maka akan muncul kode :
<span id="fullpost">


</span>

Tulisan yang ingin dimunculkan sejak awal/ringkasan, ditulis sebelum/diatas kode <span id="fullpost">. Sisa tulisan keseluruhan.. ketik setelah kode <span id="fullpost">dan sebelum </span>.

Lalu bagaimana jika postingan kita pendek saja? Ya, kita hapus saja kode :
<span id="fullpost">


</span>

Maka tulisan akan muncul tanpa disertai kode [+/-] Selengkapnya… dan [+/-] Ringkasan Saja…. Kata-kata "selengkapnya" dan "ringkasan saja", bisa kita ganti dengan kata yang lain, dengan meng-edit kode pada Langkah Pertama Poin Ke-6. Cari saja saja kata "Selengkapnya..." dan ganti dengan yang kata lain yang kita suka. Begitu pula untuk kata "Ringkasan Saja...".


#PS:
  • Panjang sekali rupanya... tapi, begitulah sebuah proses belajar. Selamat mencoba (bagi yang belum mencoba)
  • Kejadian lucu dengan om I Ketut Riasmaja mengingatkan saya untuk harus mengoreksi script diatas, tapi sekarang semoga tidak lagi terjadi masalah. Dan supaya tidak kebakaran jenggot. Ingat, Backup itu penting.



Hak cipta gambar "abbey peeking" ada pada kmwithmissbeth.wordpress.com

0 komentar: