Cara membuat read more di blogspot ( 1 )

Sebelum membahas bagaimana cara membuat read more di blogspot, terlebih dahulu saya akan sedikit berbicara tentang read more itu sendiri. Read more adalah suatu fungsi yang dapat meringkas suatu artikel / postingan pada blog. Intinya dengan menggunakan cara read more ini, suatu postingan tidak akan tampil seutuhnya pada halaman utama blog (Home). Melainkan hanya berupa ringkasan saja. Setelah kata / tulisan read more itu di klik, barulah seluruh postingan akan tampil.

Cara Membuat Read More

Tahap Kesatu

  • Login di Blogger, kemudian masuk ke halaman edit html


  • Beri tanda checklist pada kolom expand template widget


  • Cari kode html seperti ini :


  • <div class='post-header-line-1'/>
    <div class='post-body entry-content'>

  • Kemudian simpan kode berikut di bawah kode yang anda cari barusan:


  • <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>.fullpost{display:none;}</style>

  • Selanjutnya, dibawah kode yang baru anda simpan barusan, terdapat kode seperti ini :

    <data:post.body/>
    <div style="'clear:"> <!- clear for photos floats ->
    </div>

    lalu diantara kode

    <data:post.body/>

    dan

    <div style="'clear:"> <!- clear for photos floats ->
    </div>

    Simpan kode yang ini :

    <a expr:href='data:post.url'>Read More .. </a>
    </b:if>

    Sehingga hasil dari perubahan kode html selengkapnya menjadi seperti ini :

    <div class='post-header-line-1'/>
    <div class='post-body entry-content'>

    <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/></p>
    <a expr:href='data:post.url'>Read More .. </a>
    </b:if>

    <div style="'clear:"> <!- clear for photos floats ->
    </div>


Tahap Kedua

Setelah selesai melakukan edit kode html-nya, sekarang kita beranjak ke bagaimana cara melakukan posting artikel supaya fungsi read more tersebut bisa kita aplikasikan. Berikut petunjuknya :

  • Silahkan buat postingan sampai selesai (jg dulu di publish)


  • Tentukan bagian postingan yang akan di tampilkan (ringkasan), kemudian masukan kode berikut pada akhir bagian postingan tersebut :


  • <span class="fullpost">

  • Pada akhir postingan, masukan kode ini :


  • </span>

  • Selesai


Jika temen2 masih bingung, berikut ilustrasi dari cara posting artikel dengan menggunakan read more :
ini adalah text ringkasan
<span class="fullpost">
ini adalah text lanjutannya
</span>

Postingan Terkait Lainnya :


2 comments:

rancid said...

Thx gan :)

Dhanis said...

kalau ingin menampilkan garis penghubung panjang (dash) pada tulisan, gimana caranya..? thanks..! :)

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Post a Comment