Jumat, 19 Februari 2010

Cara Membuat Read More

Ini adalah salah satu contoh dalam pembahasan mempelajari bahasa XML template Blogger. Walaupun sekarang Blogger telah menyediakan fasilitas readmore, tetapi tidak ada salahnya apabila anda ingin mencoba atau mempelajari bagaimana cara memasang readmore versi lama ini. Begini caranya.

1. Login dulu ke Blogger, lalu klik menu Tata Letak > Edit HTML.

2. Backup dulu yah templatenya...

3. Centang checkbox Expand Template Widget.

4. Cari kode:
<p><data:post.body/></p>
5. Lalu hapus dan ganti dengan:
<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/>
<a expr:href='data:post.url'>KLIK DISINI UNTUK BACA SELENGKAPNYA</a></p>
</b:if>
6. Simpan template anda.

7. Beralih ke tab Posting, klik menu Edit Entri, lalu edit setiap entri anda. Editlah dengan format:
(bagian artikel yang akan ditampilkan)
<span class="fullpost">
(bagian artikel yang akan disembunyikan)
</span>
8. Terbitkan entri anda.

9. Lihat homepage blog anda. Akan tampil sebagian artikel, lalu bagian lainnya akan terbuka setelah anda mengeklik link dibawah artikel pada homepage. Mau tahu kenapa?

Penjelasan:

Lihat lagi perintahnya.
<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/>
<a expr:href='data:post.url'>KLIK DISINI UNTUK BACA SELENGKAPNYA</a></p>
</b:if>
Artinya: Pada halaman postingan, bagian yang termasuk dalam kelas (class) fullpost, akan ditampilkan. Sedangkan pada halaman selain halaman postingan, bagian yang termasuk dalam kelas (class) fullpost akan disembunyikan (tidak ditampilkan). Lalu dibawah postingan akan tampil link yang menuju ke postingan anda. Mengerti?

Terima kasih, dan semoga bermanfaat.

12 komentar:

  1. Itu kan cuma contoh dari pembahasan mempelajari bahasa XML template blogspot. Dari yang dasar, kita bisa melanjutkan ke yang lebih tinggi. (anak sekolah aja dari SD dulu kan? nggak langsung ke SMP?)

    BalasHapus
  2. saya lbh suka autoreadmore, krn gak ribet.. Keep posting sob :D

    BalasHapus
  3. thx nih gan infonya, tp sekarang aku dah make auto readmore...
    Lifestyle Inspiration

    BalasHapus
  4. mas saya kan membuat menu dropdown pake cara mas yang di blog mas doyok. sebelumnya juga saya membuat menu dropdown dengan javascript sumber nya di sini nih ==> http://tutorial-website.blogspot.com/2009/03/membuat-menu-drop-down-horizontal.html. nah jadi skrng saya punya 2 menu navigasi,tapi yang saya buat pk javascript ada nya di atas header sedangkan yang punya mas tepat di atas judul postingan. jadi kalo di liat agak ganjil. gimana ya nurunin menu yg sy buat pake javascript tersebut agar sejajar tepatnya di atas menu navigasi yang saya buat dgn cara mas? tolong beritahu saya bagian css mana yang harus di edit agar menu tersebut turun. lihat saja kodenya di sumber yang saya sebutkn tadi. kalo mau liat kondisinya liat aja ke blog saya. tolong ya mas

    BalasHapus
  5. Bukan bagian CSS-nya mas, tapi kode HTML dari dropdown javascript tersebut yg diganti.

    Pindahin kode HTML dropdown javascriptnya dibawah kode:

    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='(Judul Blog Anda) (Header)' type='Header'/>
    </b:section>
    </div>

    Terus, pratinjau dulu kalau belum yakin. Kalo udah ya simpan.

    Oh,ya. Ganti juga tuh linknya sama tulisannya yang navigasi dari saya. hehehe...

    BalasHapus
  6. sharing dikit mas, kalau saya biasanya memakai kode <!-- more --> sebagai pengganti <span class="fullpost">

    Trik ini saya dapatkan dengan melihat kode html untuk fitur editor yang baru. Jadi tidak perlu lagi merubah kode template.

    cukup dengan menempatkan <!-- more --> sebagai readmorenya.

    Salam kenal ya

    BalasHapus
  7. mas makasih ya....saya coba dul.sangat membantu...^^

    BalasHapus
  8. ia saya belum saya ganti tulisannya sob,soalna saya belum kepikiran mau naro topik apa lagi

    BalasHapus
  9. ohhhh di jadinya lebih ke atas yahhh....seppp sepp...thanx berat atas ilmunya.ntar di postingan saya saya beri sedikit credit buat blog mas.^^

    BalasHapus
  10. ehh mas saya ada masalah lagi nih,kayaknya struktur HTML..coba buka salah satu postingan saya,terus liat di atas header nya pasti ada tulisan template error.bisa solusinya gag?

    BalasHapus
  11. Nggak tau deh, kayaknya itu kesalahannya di meta tag. Coba periksa dulu.

    BalasHapus

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.