Petak Umpet Isi Posting Blog di Blogspot


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

28 tanggapan:

I know there is something in your head
Any type of comment will be accepted and published. Except spam!
Subscribe to my feed | Subscribe comment feed
I Ketut Riasmaja mengatakan...

Petromax....
Akhirnya......

I Ketut Riasmaja mengatakan...

Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar...

Gak bisa kang... ada ide gak.. Di langkah ke 6 HTML saya Gak sama... trus diapain ya...? Apa memang untuk template saya gak mendukung itu..? Hik..hik... (sedih).

firdaus.a] mengatakan...

@I Ketut Riasmaja : coba di ulang dari awal, kembalikan dulu seperti semula dengan backup-annya. Biasanya pesan itu keluar jika ada argument syntax yang tidak ditutup.

Anang mengatakan...

belum kepengen untuk melakukan read more gak tau kenapa yak...

firdaus.a] mengatakan...

@ mas anang : kenapa ya mas, tapi readmore yang ini kan beda ya kan mas..? readmore-nya bukan jaya readmore yang biasa itu... :) (ya kan mas..? ya? ya mas ya..? minta dukungan mas)

new_techno mengatakan...

cool bos. Cuman aku udah salah bikin blog pertamanya. jadi gak bisa diutak atik. hiks hiks T_T

NovalPutraBIMA mengatakan...

bagus sekali tuh tuh artikelnya dan sangat bermanfaat

manggIs... mengatakan...

Terima kasih infonya mas firdaus...klo aku pake versi 'readmore' yg mbuka window baru tuuuh..bisa diganti model gitu dgn cara yg praktis...?

Billah mengatakan...

Read more salah satu tools yg bisa memberikan abstraksi ke reader bisa jd pancingan awal utuk terus membaca lebih lanjut krn kalo tanpa read more biasanya begitu liat panjang artikel visitor dah males duluan. berjasa sekali suhu2 kita itu ya :)

kubukulupherz mengatakan...

hoho .
baik sekali udah mau bikinin tutorialnyah .

tapi saia tetep gagh bisa .
di langkah ke-6 saia bingung .
higs . higs .
gimana atuh ?

firdaus.a] mengatakan...

@NovalPutraBIMA : Terimakasih kang, Jadi malu.. KangNoval Juga tau ini re-post ajah kok.

@manggIs : Sama-sama, Tenang aja mas.. Masing2 versi ada lebih kurangnya kok. Versi lama juga punya kelebihan dibanding yang ini. Seperti, langsung menuju halaman sebenarnya, jadi bisa langsung komentar

@Billah : Bener mas... setuju!.

@kubukulupherz : Semangat.. coba lagi.. Ingat, patokannya kode yang saya tulis warna biru itu. Kode itu cuma ada satu, jadi search aja kode itu dulu.. kebawahnya ikutin aja.. perbaris. Kodenya memang belum tentu sama persis. Tapi ga masalah.

edisamsuri mengatakan...

petak umper...kirain apa ternyata Read More toh...waduj ndukkk ngga mudeg...awalnya

Antown mengatakan...

iya mas, saya juga mash bingung. Tapi ngomong2 banner di atas tuh buatan sendiri?? hmmm... seger bgt

salam kenal

JoVie mengatakan...

aku nyoba berkali2 gak kadi..hihi..

sampe aku ngungsi ke Blog Kang Rohman dan blog2 bhs Inggris, masih belom jadi, script nya salah mulu ketika publish....

gak papa deh..mo nyoba terus, moga aja gak pada bosen baca postingan ku yang puanjang...

ada 2 posting lagi tuh baru keluar ke permukaan,, mampir-mampir.......

firdaus.a] mengatakan...

@edisamsuri: kan awalnya ngumpet pa guru.. :)
@Antown: waduh mas anton, saya ga bisa gambar kaya mas anton he..he.., itu bawaan templates, saya juga tertarik begitu nglieat.. adem.
@Jovie: Semangat jov..

JoVie mengatakan...

Mo nyoba lagi akh...aku lebih suka yang versi ini daripada readmore yang kayak biasanya itu...

Jovie coba yah kang....weleh3x

JoVie mengatakan...

iya bener Sob..pada langkah ke 6 yang salah mulu tuh..

firdaus.a mengatakan...

@JoVie : tapi justru banyak yang begitu suka sis.. soalnya jadi tidak "memancing orang untuk komentar, karena posting bisa langsung dibaca habis, tanpa harus membuka halaman posting. tapi kalau suka.. ya ambil aja. :)
Lankah ke-6 udah bener kok sis.. ane aplikasikan di blog ini. Dan jalan.. ayo sis semangat, pelan-pelan aja.. udah bener kok.. sumpeh deh.. :)

JoVie mengatakan...

Dari tadi aku disini...
Udah tahu "kesalahannya" sekarang....
ternyata dibawah kode ini :
<div class='post-header-line-1'/>
tiap template beda-beda..dan kode :

<b:if cond='data:blog.pageType == "item"'> emang harus pas di atas kode :
<p><data:post.body/></p>

padahal selama ini aku taruh pas di bawah kode "in line-1" itu karena templatenya beda jadi bingung..

Duh, bego banget, tapi sekarang udah jadi deh...
=========================================
Btw, memang "read more" yang lain2 itu memancing orang berkomentar, tapi ada sisi negatifnya juga lhoo...karena ada beberapa orang (termasuk Jovie) hanya baca bagian diatas readmore, males nunggu "reload",

Bukankah lebih baik posting kita terbaca habis daripada "hanya nunggu orang berkomentar?" Iya gak Sob..??Jawab "IYA"..ayo dukung Gw...

Kunto Aji mengatakan...

Template ku ga bisa / ga sama urutannya dengan script tersebut ma firdaus. Kalau boleh tahu, inti/konsep dari script read more itu gimana yach ??? please :)

firdaus.a mengatakan...

@Jovie : sekarang udah bisa kaann... hayo ngaku!

@Kunto Aji : Mungkin templatesnya sudah custom bro.. PM aja bro.. Intinya.. supaya pembaca diberi semacam "abstraksi" terlebih dulu tentang tulisan yang dimaksud. Semacam excerpt/pendahuluan bro. gimana?

Ahmad Sheva mengatakan...

wah , , beneran nih . saya udh try and error berulang kali . tp hasilnya sama kayak kang ketut . edit template sih sukses , tp g bs ke detect di blognya . itu apa yg salah ya mas ?

Rie Rie mengatakan...

kok aq ga bisa seh,hiks...kode2nya kok ga sama...mirip juga kagak..hiks hiks....heleeeeeepppp

fauzi mengatakan...

mas.. saya mau bertanya sepatah 2 katah pata..

Bikin button "berikan komentar" seperti di tempat mas itu gmn mas? adaka tutorialnya disini..

maklum mas newbie. terimaasih..

Lembaga Pelatihan mengatakan...

Trims informasinya saya dah pasang petak umpet.. cuman untu javawscript ... gimana caranya klo hosting sendiri ..?

Admin Habajum mengatakan...

makasih atas infonya ... ni kemarin anggota kami (ulumuddin) telah menanyakannya kepada mas .. dan mas merujuk ke hal ini .. makasih

rams mengatakan...

trims infonya kang, dicoba nih

Anonim mengatakan...

Hi to you all!

It seemed necessary to make an introduction to all of you. I hope that that we all will have great conversations together!

So Greetings!

-Jon

Beri Komentar

Silahkan tanggapi tulisan ini. Blognya firdaus mendukung "DO FOLLOW". Artinya, Setiap komentar yang diberikan, akan dibalas dengan backlink dari sini.
(Jangan buang-buang waktu dengan melakukan SPAMMING. Komentar yang ber'bau' SPAM akan dihapus.)

(Atau bila rindu menggunakan Form Komentar Lama Terima Kasih Yang Sebesar-besarnya)


 
Terima Kasih Dunia Atas Segala Inspirasi dan Warna Suara . DuaRibuDuaBelas. MMXII . Firdaus™
Subscribe with Bloglines Blog