Wednesday, May 16, 2007

Cara Membuat Read More Atau Baca Selangkapnya Pada Blogger Versi Baru :-)

Untuk versi template classic aku udah pernah bikin tutorialnya, akhir-akhir ini banyak banget yang nanya, akhirnya aku nyari info, malah ketemu di helpnya blogger, How can I create expandable post summaries?.
Tapi jangan langsung di cobain, aku udah nyoba beberapa kali tapi gagal
kalo ngikutin yang dari helpnya blogger, terutama pada bagian style/css
nya.


Caranya:


  • Login ke blogger.com, pilih blog yang pengen kamu edit, klik link Layout kemudian masuk ke Edit HTML

  • Untuk bisa ngedit template secara keseluruhan, kamu harus centang/tandai/aktifkan Expand Widget Templates

  • Masukkan kode berikut sebelum tag </head> atau tepat sesudah kode } ]]></b:skin> seperti ini:
    <style>
    <b:if cond='data:blog.pageType == "item"'>
    span.fullpost {display:inline;}
    <b:else/>
    span.fullpost {display:none;}
    </b:if>
    </style>


  • Selanjutnya mengatur supaya postingan terpotong, cari kode <p><data:post.body/></p> dalam template kamu dan tambahkan kode dibawah ini:
    <b:if cond='data:blog.pageType != "item"'>
    <a expr:href='data:post.url'> Read More..</a>
    </b:if>


  • Nah supaya terpotong, setiap kali kamu posting, klik pada bagian posting dimana kamu pengen tulisan Read More.. muncul, dan ketik <span class="fullpost"> sisa postingan sampai selesai </span>. Untuk menmbahkan kode ini, ketika posting kamu harus dalam mode Edit HTML bukan Compose

    Contoh penulisan posting:


    Ini adalah awal berita yang ingin saya potong karena
    terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu
    memotong berita sampai disini saja. <span class="fullpost">
    Dan ini adalah sisa postingan saya yang akan saya sembunyikan dan hanya
    muncul pada saat post page atau link read more.. diklik </span>


    Hasilnya akhir posting:


    Ini adalah awal berita yang ingin saya potong karena
    terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu
    memotong berita sampai disini saja.Read more..



    Selamat Mencoba!

  • 2 comments:

    Wafa said...

    makasih infonya, aku udah coba tapi kenpa? pas di klik read morenya, tulisan sterusnya ada...

    Galang said...

    Mas saya mau tanya tentang pemasangan read more,, sudah saya coba pake caranya mas,, tp kenapa bacaan read more na ngk muncul,, tolong yach mas bantuin...please

    Post a Comment