Rabu, 28 April 2010

Membuat 'Read More' Pada Postingan Blog

    Awal mula saya membuat tutorial ini karena saya merasa blog saya ini 'kepanjangan', belum lagi dengan banyaknya foto-foto yang ikut saya posting membuat loading awal blog ini jadi terasa semakin lambat, khususnya bagi saya yang fakir bandwidth ini.
    Sebenarnya gampang saja sih kalau tidak mau panjang-panjang, atur saja di menu pengaturan lalu kurangi jumlah postingan yang ingin ditampilkan di laman muka. Beres kan. Mungkin itu salah satu cara mengatasinya, tapi kali ini saya akan coba berikan alternatif lain untuk mengatasi masalah 'kepanjangan' tadi dengan fungsi read more(baca selengkapnya) sehingga kita tidak perlu mengurangi jumlah postingan yang ingin ditampilkan di laman utama.

    Oke langsung saja ikuti petunjuk di bawah ini:
    • sign in ke blogger Anda.
    • masuk ke menu Pengaturan lalu klik Format.
    • geser layar hingga paling bawah, ada text area kosong disamping tulisan Templat Entri, isi area kosong  tersebut dengan kode di bawah ini : 
              <span class="fullpost">

              </span>
    • klik tombol Simpan Setelan. 

    Langkah persiapan ini dimaksudkan agar saat posting baru kita tidak perlu lagi menuliskan kode itu lagi karena akan secara default muncul diawal saat kita akan menulis postingan.

    Selanjutnya,
    • klik tab Tata Letak  
    • klik tab Edit HTML.
    • klik tulisan Download Template Lengkap, langkah ini dimaksudkan agar kita masih memiliki back up kode template blog kita jika sewaktu-waktu terjadi kesalahan sehingga kita bisa mengembalikannya seperti semula.
    • beri tanda contreng pada kotak Expand Template Widget.
    • cari kode <data:post.body/> atau  <p><data:post.body/></p>, biar lebih gampang tekan saja ctrl+f lalu ketikkan kode tadi.
    • hapus kode diatas, ganti dengan kode di bawah ini :
      <b:if cond='data:blog.pageType == "item"'> <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'><strong>Selengkapnya...</strong></a></p> </b:if>        
    • kata 'Selengkapnya' pada kode di atas bisa diganti dengan 'read more' atau apalah terserah Anda
    • klik tombol Pratinjau, kalau dirasa sudah pas posisinya maka klik tombol Simpan Template.

    Oke semua setting sudah siap, sekarang tinggal bagaimana cara postingnya :

    • klik tab Posting lalu klik tab Entri Baru.
    • klik tab Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi.
    • tuliskan artikel yang ingin ditampilkan pada blog sebelum kode
      <span class="fullpost">
    • tulis sisa artikel (yang ingin ditampilkan setelah kita klik kata read more) dibawah kode di atas dan sebelum kode :
      </span>
    • klik tab Pratinjau, kalau sudah sesuai yang diinginkan klik tombol Terbitkan Entri.
    • lihat blog Anda,lalu lihat hasilnya. 

    Good luck, semoga bermanfaat:)

    Ads Inside Post