Membuat "read more"

Membuat sebuah blog agar terlihat rapih memang banyak caranya. Selain mengatur tata letak widget, penempatan blogroll, link, dsb harus diatur sedemikian rupa agar blog terlihat rapih dan enak dilihat. Ketika kita menulis sebuah artikel yg panjang tentunya kita tidak ingin artikel tersebut memakan banyak tempat di halaman utama karena akan membuat halaman utama blog menjadi terlalu panjang ke bawah hanya oleh satu artikel saja. Untuk menghindari hal itu kita bisa menggunakan tag "read more" yg memotong artikel di tempat yg kita inginkan. Lalu bagaimana caranya membuat "read more" tsb? Kita harus mengedit dahulu kode html pada blog kita, karena secara default, di blogspot tidak ada fasilitas untuk memotong sebuah artikel. Berikut kita lihat cara membuatnya :



  • Sign in di blogger dengan id anda
  • Klik pengaturan
  • Klik format
Pada layar bagian bawah ada teks area kosong di samping tulisan template posting, isi area kosong tsb dengan kode di bawah ini:

<span class="fullpost">


</span>
  • Klik tombol simpan pengaturan

Pemasangan kode ini di maksudkan agar pada saat posting artikel, kode tersebut langsung muncul tanpa harus menuliskan terlebih dahulu, jadi membantu kita agar tidak harus selalu mengingat kode tersebut. Lanjut....

  • Klik menu dashboard
  • Klik tata letak
  • Klik tab edit html
  • Klik tulisan download template lengkap
  • Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.
  • Beri tanda centang pada kotak di samping tulisan Expand Template Widget
  • Tunggu beberapa saat ketika proses berlangsung
  • Silakan cari kode berikut ini pada template anda



<data:post.body/>

atau kode di bawah ini



<p><data:post.body/></p>
  • Hapus kode diatas, lalu 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>read more...</strong></a></p>
</b:if>

  • Klik tombol simpan template
  • selesai
Cara posting artikel
  • Klik menu posting
  • Klik menu edit html maka otomatis akan akan tampak kode yg telah kita setting tadi
<span class="fullpost">




</span>
  • Tulis artikel yang ingin tampak pada halaman depan blog anda sebelum kode ini



<span class="fullpost">
  • Tulis keseluruhan sisa artikel setelah kode di atas tadi dan sebelum kode dibawah ini



</span>
  • Klik tombol mempublikasikan posting
  • Klik tulisan Lihat Blog (di jendela baru) untuk melihat hasil dari postingan kita, kemudian lihat apakah hasilnya sukses atau tidak. Jika tidak, mungkin ada bagian yang terlewatkan. Coba lihat kembali langkah diatas

Selamat mencoba semoga berhasil...Terima kasih buat Kang Rohman
atas tutorialnya yang jelas dan sangat membantu para newbie seperti saya.

0 komentar:

Posting Komentar

Silakan kalau mau memberi komentar dan saran, tapi jgn spam ya.. :)

top