Membuat Read More di blogger ( 2 )

pada tanggal

Read more atau baca selengkapnya adalah fasilitas untuk menyembunyikan tulisan yang panjang dan hanya menampilkan bagian abstrak dari artikel tersebut. Dan keseluruhan posting akan tampil ketika link read more diklik. Tips cara membuat readmore berikut ini adalah versi baru, sebenarnya sudah lama. Maksudnya bila kita klik tulisan Baca selengkapnya tidak perlu memanggil seluruh halaman, namun cukup bagian bawah saja dan tentunya akan menjadi lebih ringan.


langsung saja kita ikuti langkah demi langkah pembuatan read more.


  1. Silakan login ke halaman dashboard Anda di Blogspot.
  2. Klik menu layout/tata letak.
  3. Pilih Edit HTML.
  4. Sebelumnya backup terlebih dahulu template yang Anda gunakan dengan memilih Download Template Lengkap. Tunggu sampai penyimpanan template Anda selesai.
  5. Beri tanda centang pada tulisan Expand Template Widget, tujuannya agar keseluruhan template Anda ditampilkan.
  6. Salin kode di bawah, kemudian letakkan di atas kode </head>.

  7. Selanjutnya, tambahkan kode berikut ini pada kode template Anda, yang berwarna putih adalah kode asli dari kode template dan berwarna merah adalah kdoe yang harus ditambahkan.






    <h3 class=’post-title’>

    <b:if

    cond=’data:post.url’>


    <a expr:href=’data:post.url’><data:post.title/>&lt/a>

    <b:else/>

    <data:post.title/>

    </b:if>

    <div class=’post-header-line-1′ />

    <div class=’post-body’


    expr:id=’”post-” + data:post.id’>

    <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 expr:onclick=’”javascript.showFull (\”post-” + data:post.id + “\”);”‘href=”javascript:void(0);’>[+/-} Selengkapnya...</a></p>


    </span>

    <span id='hidelink' style='display:none'>

    <p><a expr:onclick='"javascript:hideFull (\"post-" + data:post.id + "\");"'href='javascript:void(0);'>[+/-] Ringkasan saja…<a></p>

    </span>

    <script type=’text/javascript’>checkFull (”post-” + “<data:post.id/>”)</script>


    </b:if>

    <div style=’clear:both;’/> &lt!–clear for photos floats–>

    </div>
    </div>
    …. rest of template code ….



Langkah selanjutnya adalah:

  1. Klik menu Pengaturan.
  2. Klik menu Format.
  3. Salin kode berikut ini, kemudian letakkan pada kolom kosong yang disediakan.






    <span id=”fullpost”>


    </span>




  4. Klik tombol Simpan Setting, dan selesai.


Selanjutnya, cara posting artikel:
Ketika kita sedang menulis artikel, buka menu Edit HTML, jangan pilih yang menu Compose, tujuannya agar kode tadi bisa terlihat, yaitu kode:







    <span id=”fullpost”>
    </span>


Untuk artikel yang akan ditampilkan di atas tulisan Read More, maka letakkan tulisan di atas kode <span id=”fullpost”>, dan artikel sisanya agar tidak terlihat letakkan di bawah kode tadi dan sebelum kode </span>.

Jika Anda memiliki artikel yang pendek, sebaiknya dihilangkan saja tulisan Baca selangkapnya dengan menghapus kode tadi:






    <span id=”fullpost”>
    </span>



Selamat mencoba, semoga berhasil!

Komentar

Posting Komentar