Monday, July 16, 2012

Membuat Read More Hanya di Halaman Depan

Tutorial khusus pemula.
Tutorial memasang readmore dapat dengan mudah kita temukan melalui search engine, termasuk cara memodifikasinya (costumize read more). Read more adalah sebuah link untuk melihat sisa tulisan yang tidak ditampilkan. Link ini dapat berupa tombol atau tulisan seperti "Baca selengkapnya", Baca lebih lanjut", "Selengkapnya", atau "Full Post". Kata-kata tersebut dapat diganti sesuai selera, bahkan dapat juga diganti dengan gambar sebagai tombol.

Read more dapat dipasang manual yaitu ketika menulis artikel dengan cara mengklik icon "Insert jump break" pada mode Compose atau dengan menyisipkan  kode <!--more--> pada mode HTML. Jika sobat menggunakan tampilan Blogger lama, tutorialnya dapat dilihat pada posting "Cara membuat readmore pada Blogspot.

readmore

Tulisan yang berada di bagian atas atau di atas kode <!--more--> akan ditampilkan di halaman depan, sedangkan tulisan yang berada di bawahnya akan ditampilkan setelah tombol read more diklik.

Tanda Readmore

Auto Readmore

Selain cara manual, read more juga dapat dipasang otomatis tanpa perlu mengklik icon "Insert jump break" atau dengan menyisipkan kode <!--more-->, caranya dengan meyisipkan kode JavaScript seperti yang banyak dibahas para blogger. Kali ini saya tidak akan mejelaskan cara pasang read more otomatis (Auto read more) tetapi sekedar ingin sharing mengenai pengaruh auto read more pada page (halaman statik) karena beberapa script auto read more yang dipasang akan menyebabkan halaman statik memiliki read more juga, padahal untuk beberapa blogger tidak menginginkan read more tampil pada halaman itu.

Jika sobat sudah memasang script auto read more dan sudah berjalan normal, tetapi masih tampil di halaman statik cara mengatasinya adalah sebagai berikut:
  1. Login ke Blogger
  2. Pada Dashboard, pilih Template, pilih Edit HTML, kemudian pilih Proceed

    Edit Blogger Template

    Edit Template

  3. Centang "Expand Widget Template"

    Expand Widget

  4. Sebelum langkah berikutnya sebaiknya template di back-up dulu
  5. Cari kode  <data:post.body/> atau <p><data:post.body/></p>. Gunakan Ctrl+F untuk pencarian cepat
  6. Setelah ketemu, ganti kode tersebut dengan kode berikut:
    <b:if cond="data:blog.pageType == &quot;item&quot;">
    <data:post.body>
    <b:else>
    <b:if cond="data:blog.pageType == &quot;static_page&quot;">
    <data:post.body>
    <b:else>
    <div expr:id="&quot;summary&quot; + data:post.id">
    <data:post.body>
    </data:post.body></div>
    <script type="text/javascript">
    createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
    </script>
    <div style="clear: both;">
    <span class="rmlink" style="float: right; font-weight: bold; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; text-align: right;"><a expr:href="data:post.url" href="">Baca selengkapnya ... </a></span>
    </div>
    </b:else></data:post.body></b:if></b:else></data:post.body></b:if>

    Atau dengan kode berikut:
    <!-- Auto read more Start -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    <b:else/>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
    </script>
    <a class='more' expr:href='data:post.url'>Full post...</a>
    </b:if>
    </b:if>
    <!-- Auto read more End -->

  7. Lakukan pratinjau (Preview) terlebih dahulu setelah itu simpan template (Save template)
Kode berwarna merah dapat diganti dengan kata-kata sendiri atau dengan URL gambar caranya menulisnya seperti ini:
<img src="URL Gambar" />

Ganti URL Gambar dengan alamat gambar yang akan dipakai sebagai penggati tulisan read more.
Selamat mencoba, semoga bermanfaat.

Referensi :
  1. Spice up your blog
  2. Blogger Sentral