KATALOG PRODUK
Star Wars
Death Buck
SW1
Rp 85.000
In Stock
Nintendo Wii
Nintendo Wii
NW1
Rp 85.000
In Stock
Star Wars
Star Wars
SW1
Rp 85.000
In Stock
PRODUK TERBARU :

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

BERLANGGANAN VIA EMAIL

Ingin artikel seperti ini langsung dikirim ke Email anda? Silahkan masukan alamat email anda untuk berlangganan.:

Delivered by FeedBurner