Minggu, 24 Juli 2011

Membuat “Read More …” pada Blogspot

Tanda “Read More …” atau “Baca Selengkapnya …” biasa kita lihat pada web atau blog, tanda tersebut berguna untuk menghemat beranda supaya tidak terlalu panjang ke bawah (yang dapat menyebabkan pengunjung enggan membaca artikel di bawahnya). Selain itu juga untuk menciptakan 'kesan penasaran' pengunjung untuk membaca detail suatu artikel/posting dengan menyembunyikan dahulu tulisan yang lengkap. Keuntungan lain dari adanya tanda “Read More …” ini bagi pemilik blog tentunya dari segi traffic, karena pengunjung akan membuka lebih dari satu halaman (pertama halaman beranda, dan kedua halaman artikel itu sendiri).

Pada WordPress untuk memotong artikel dan memunculkan tanda tersebut sangat mudah, karena telah disediakan dalam Text Editor-nya, tapi di Blogspot memang tidak disediakan tools untuk membuatnya. Namun justru hal ini membuat kita tertantang untuk kita melakukan modifikasi dan kreasi untuk bisa membuatnya lewat kode script.

Berikut tata cara membuat tanda "Read More ..." :
  1. Seperti biasa kita login, kemudian masuk dasbor, lantas ke tab Rancangan dan Edit HTML dan tak lupa memberi centang pada "Expand Widget Templates".
  2. Cari kode seperti ini:
     <div class='post-header-line-1'
                atau
          <div class='post-body entry-header-line'>

     3.  Copy/ketik script berikut 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>

   4.  Kode tadi (no. 3) harus ditempatkan sebelum kode:

     <data:post.body/>
  
     5.  Lalu tambahkan script berikut dibawah kode <data:post.body/> 

          <b:if cond='data:blog.pageType != "item"'><br/>
     <a expr:href='data:post.url'>Read More ...</a>
     </b:if>
     </b:if>

      Catatan: kalimat "Read More ..." dapat diganti sesuai keinginan.

   6. Simpan Template.
      7. Masuk lagi ke dasbor lalu ke tab Setelan/Setting dan Format.


        8.  Kita menuju Templat Entri. Masukan kode:

            <div class="fullpost">

      </div>


       Catatan:
             * Kode tadi akan muncul (dalam mode Edit HTML bukan Compose) 
             setiap kita akan membuat Entri Baru.
             * Perintah <div class="fullpost"> </div> dapat diganti dengan 
             <span class="fullpost"> </span> dengan syarat tidak ada kode span
             lainnya diantara kode tersebut.
      


0 komentar:

Posting Komentar

Komentari walau dengan sedikit kata. Jika ingin menambahkan icon smiley, ketik karakter seperti yang tertera di samping kanan icon yang mewakili perasaan anda.

Artikel Popular

Arsip

detikcom

Peringkat Alexa