Read More Berada Dalam Kolom Footer Area

            Istilah read more tidak asing lagi bagi kalian baik itu sabagai pemosting atau yang membaca postingan. read more merupakan kata yang yang tampil pada halaman depan postingan yang meminta si pembaca postingan untuk mengklik kata ini jika ingin menampilkan keseluruhan isi dari postingan. Kata read more sering kali biasanya disematkan di bawah postingan (masih dalam kolom post area). Hanya untuk memberikan suasana yang sedikit berbeda dari yang biasanya, bagaimana kalau kata read more ini berada di dalam kolom footer area.

            Sedikit memberi gambaran mengenai penjelasan di atas, kalian dapat lihat gambar di bawah ini :

Gambar diatas merupakan gambar tampilan halaman depan postingan ini. Terlihat dari gambar di atas, kata read more barada sejajar dengan kata "0kementar" yang berada di dalam kolom footer area tepatnya persis di bawah kolom post area.

            Mungkin diantara kalian telah ada yang memasang read more pada postingannya. Akan tetapi tidak ada salahnya kita mengulas kembali dari awal cara memasang read more pada postingan hingga menyematkannya ke dalam kolom footer area dan bagi yang belum silahkan simak penjelasan berikut ini.

            Pertama pastikan bahwa kalian telah "login" ke blog, kemudian masuklah ke bagian "pengaturan" dan pilih "format". Pada bagian bawah terdapat tulisan "template posting" berikut dengan kolom kosong yang disediakan. Masukkan kode dibawah ini ke dalam kolom tersebut kemudian simpan setelan.

<div class="fullpost">

</div>

CATATAN : Sedikit menjelaskan maksud dan tujuan memasukkan kode tersebut adalah bahwa kode diatas akan selalu tampil setiap kali kalian ingin memosting pada edit HTML postingan kalian. Supaya efek read more dapat berfungsi, tulislah postingan yang ingin kalian tampilkan di halaman depan sebelum kode <div class="fullpost"> dan tulislah sisahnya (postingan yang ingin kalian sembunyikan) setelah kode <div class="fullpost">

            Langkah selanjutnya adalah berpindah ke bagian "tata letak" dan pilih "edit HTML". Beri tanda centang pada "Expand Template Widget". Kemudian cari tulisan (kode) dibawah ini:

<div class='post-body entry-content'>

Untuk mempermudah pencarian gunakan Ctrl+F pada keyboard. Setelah kalian temukan tulisan (kode) di atas, maka akan tampak tampilan kodenya sebagai berikut:

<div class='post-body entry-content'>
     <data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->

Silahkan kalian hapus tulisan (kode) tersebut dan ganti dengan kode di bawah ini.

<div class='post-body entry-content'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>.fullpost{display:inline;}</style>
      <data:post.body/>
    <b:else/>
    <style>.fullpost{display:none;}</style>
      <data:post.body/>
  </b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->

Untuk menyematkan read more pada kolom footer area, kalian harus mencari lagi tulisan (kode) berikut ini:

<span class='post-comment-link'>

setelah kalian temukan kode di atas maka akan tampak tampilan kodenya seperti di bawah ini:

<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/><data:top.commentLabelPlural/></b:if></a>
          </b:if>
        </b:if>
      </span>

silahkan kalian hapus tulisan (kode) tersebut dan ganti dengan kode di bawah ini kemudian simpan template dan lihat blog kalian.

<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><style>.fullpost{display:none;}</style><data:post.numComments/><data:top.commentLabelPlural/></b:if></a> <a expr:href='data:post.url'>  Read More...</a>
          </b:if>
        </b:if>
      </span>