Membuat “Read More…” atau “Baca Selengkapnya..” di Blogger 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 berikut tepat dibawahnya:
    <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>

    Hasil akhir postingan akan seperti ini:

    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!



Tulisan yang berhubungan

188 Responses to “Membuat “Read More…” atau “Baca Selengkapnya..” di Blogger Baru”

Pages: [19] 18 17 16 15 14 13 12 11 10 91 » Show All

  1. 188
    rusyad Says:

    Salam kenal…sebagai newbie saya masih belum ngerti trus nyari-nyari…eee ketemu disini. thanks buat tutorialnya…ijin ngelink ya!!
    keep your good work!!

  2. 187
    Web Link Center Says:

    makasih infonya,bro. Infonya sangat berguna deh..Keep posting..

  3. 186
    brant Says:

    oke mas langsung saya coba, hasil oke banget. trim’s mas

  4. 185
    Ibnu Says:

    Woke……., berhasil 100% mas, sebagai tanda terimakasih, saya posting tutorial ini ke blog saya. Tapi tetep saya cantumkan alamat asalnya kok mas, tenang aja. Thnks

  5. 184
    Andi Says:

    KOK nggak ketemu mas.
    saya cari nggak ada lalu bagaimana?

  6. 183
    Buyay Says:

    Om, aku dah coba berulang-ulang, hasilnya postingan gak mutus. tapi tulisan Selanjutnya….., udah kelihatan. salah dimana ya om….
    trims.

  7. 182
    regga Says:

    Ass.kang bisa tukeran baner ngak? kang Is saya sangat berterima kasih ats tutorial yang kang is berikan,,,tutorial kang is sangat membantu saya..salam sukses kang!!!!!!!!

  8. 181
    Di Says:

    Setelah bersusah payah nyari kode akhirnya berhasil nambah readmore,,terimakasih

Pages: [19] 18 17 16 15 14 13 12 11 10 91 » Show All

Leave a Reply