“Read more” untuk New Templates pada Blogger

Setiap artikel yang Anda masukkan ke dalam blog, selalu akan ditampilkan seluruhnya di dalam content secara berurutan. Mulai dari artikel terbaru sampai dengan artikel-artikel sebelumnya. Jika setiap artikel yang Anda masukkan hanya beberapa kalimat pendek saja, maka tidak ada masalah. Nah, bagaimana kalau artikel yang Anda masukkan sangat panjang sampai ada beberapa halaman? Tentunya akan memenuhi content blog Anda.

Untuk mengatasi masalah tersebut, sebaiknya Anda membuat penggalan di dalam artikel yang Anda kirim dengan cara memberi link Read more seperti yang ada di beberapa website. Artikel yang ditampilkan di content hanyalah sebagian dari artikel saja sedangkan artikel secara keseluruhan akan ditampilkan jika sudah di klik pada Read more.

Sebenarnya sudah ada banyak panduan tentang pembuatan Read more ini dan banyak juga yang sudah mencobanya tapi banyak juga yang gagal. Beberapa orang yang gagal mengusulkan agar memuat artikel Read more di blog saya. Jika Anda tertarik dengan artikel ini silakan mengikuti panduan berikut.

(1) Login di blogger.com

Langkah pertama adalah buka www.blogger.com melalui browser Anda. Setelah tampil halaman depan blogger.com, isi e-mail dan password Anda kemudian klik Sign In.

(2) Membuka template

Jika proses login berhasil, Anda akan memasuki halaman Panel Kontrol pada blogger.com. Di sini ada beberapa informasi tentang blog Anda mulai dari judul blog Anda, jumlah posting, dan ada beberapa link yang berguna untuk mengatur konfigurasi blog. Pada bagian ini kita klik pada Layout. Tunggu beberapa saat, setelah masuk ke halaman Template, klik Edit HTML.

(3) Mengaktifkan Expand Widget

Beri tanda cek pada Expand Widget Templates. Langkah ke-3 ini hanya berlaku jika template yang Anda gunakan di Blogger adalah New Templates. Jika Expand Widget Templates tidak ada, berarti template yang Anda gunakan adalah Classic Templates. Baca artikel “Read More” untuk Classic Templates pada Blogger.

(4) Mencari kode

Sekarang cari kode di bawah ini pada template blogger.

}
]]></b:skin>
</head>

(5) Menyisipkan kode

Kalau sudah ketemu, di bawah kode ]]></b:skin> sisipkan kode html sebagai berikut :

<style>
<b:if cond=’data:blog.pageType == “item”‘>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

(6) Susunan kode

Akhirnya susunan kode menjadi seperti berikut. Kode yang berwarna biru adalah kode asli dari blogger, sedangkan yang berwarna merah adalah kode tambahan.

}
]]></b:skin>

<style>
<b:if cond=’data:blog.pageType == “item”‘>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
</head>

(7) Menyisipkan kode

Nah, sekarang cari kode <p><data:post.body/></p>. Kalau sudah ketemu, Anda sisipkan kode bawah ini diantara <p><data:post.body/> dan </p>.

<b:if cond=’data:blog.pageType != “item”‘>
<a expr:href=’data:post.url’> Read More..</a>
</b:if>

(8) Susunan html

Jadi, susunan kode html di template setelah akan menjadi seperti ini. Yang berwarna biru adalah kode asli template sedangkan yang berwarna merah adalah kode tambahan.

<p><data:post.body/>
<b:if cond=’data:blog.pageType != “item”‘>
<a expr:href=’data:post.url’> Read More..</a>
</b:if>
</p>

(9) Menyimpan template

Jika proses penyisipan kode selesai, klik SIMPAN TEMPLATE untuk menyimpan perubahan yang Anda lakukan.

(10) Mengatur setting

Setelah proses penyisipan kode selesai, Klik PENGATURAN, kemudian klik FORMAT. Di bagian paling bawah ada kotak kosong pada TEMPLATE POSTING. Isi kotak kosong tersebut dengan kode berikut:

<span class=”fullpost”>

</span>

(11) Menyimpan setting

Setelah pengetikan kode selesai, klik SAVE PENGATURAN untuk menyimpan setting. Proses pembuatan READ MORE telah selesai.

(12) Cara memposting
Sekarang bagaimana cara memposting? Ada sedikit perbedaan cara memposting menggunakan READ MORE ini. Pada saat memposting, klik EDIT HTML. Maka, secara otomatis akan tampak kode sebagai berikut :

<span class=”fullpost”>

</span>

(13) Mengedit posting

Letakkan posting yang akan ditampilkan di halaman muka di atas kode <span class=”fullpost”> sedangkan sisanya letakkan di antara kode <span class=”fullpost”> dan </span>.

(14) Mempublish posting

Klik MEMPUBLIKASIKAN POSTING untuk mempublish posting Anda. Jika sudah selesai, buka blog Anda atau jika sudah terbuka klik Refresh dan lihat hasilnya.


Posted

in

by

Tags:

Comments

  1. diono Avatar

    coba cek lagi Pak, no.4 ama no.7 ya
    saya tunggu

    Makasih atas koreksinya mas. Blog saya ini sebenarnya hasil import dari blog saya yang satunya. Saya belum sempat ngecek semua postingan di WP, dan saya nggak nyangka jika ternyata kode html di WP tidak bisa tampil. Sekarang sudah saya betulkan, mas. Sekali lagi saya mengucapkan terima kasih.

  2. diono Avatar

    MA KASIH SEKARANG SAYA AKAN MENCOBANYA. TRIMS BANGET YA,..

    Sama-sama, Mas

  3. spypark.reborn Avatar

    saya juga nemu tutor ini di blog help, blm dicoba c … tp dari susunan sintaks kayaknya read more-nya ga bakal jalan klo di import (ke wp misal). betul ga ya … ?!@##@!~@? tak cba ah …

  4. spypark.reborn Avatar

    btw thx ya … nice blog … 😉

  5. Ralonsomago Avatar
    Ralonsomago

    Aduh paaaak
    saya tidak dapat menemukannya padahal ada Widgetnya
    (saya menggunakan template colibre dari blogger template, xml

  6. Ralonsomago Avatar
    Ralonsomago

    style nya ga bisa saya temuin

  7. adamlf Avatar

    Salam kenal mas edi..

    Maaf saya sudah coba tapi errornya seperti ini ;

    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: Open quote is expected for attribute “{1}” associated with an element type “cond”.

    dan yang perlu di perhatikan juga.. di Blog Template yang baru itu tidak ada

    Bisa kasih solusi ??

    Salam,
    Adam LF

    Salam kenal juga mas…

    Kode HTML di dalam artikel ini memang tidak bisa digunakan dalam template blogger yang menggunakan XML. Kalau dipaksakan memang akan muncul keterangan bahwa formatnya tidak sesuai dengan format XML.

    Solosinya, kita harus mengganti template blog kita dengan template lain yang bukan XML, misalnya template klasik, dll.
    Terima kasih.

  8. adamlf Avatar

    🙂 klo bisa kasih jawaban di Shout Box saya juga

  9. charly Avatar

    assalamualaikum pak kalau boleh saya tanya .saya agk bingung dengan penjelasan bapak.tepatnya pada penjelasan Langkah berikutnya setelah Anda mengganti kode html-nya, kini giliran menyisipkan kode CSS pada template. Di bagian paling atas terdapat kode-kode yang diawali dengan dan ditutup dengan . Sisipkan kode berikut persis di atasnya kode .
    NAH ITU BAGIAN PALING ATAS YG BAGIAN MANA KAN KODENYA BANYAK PAK MOHON JAWABANYA YA PAK !!ASS….

    Kode pada langkah ke-9 tsb disisipkan pada CSS yaitu diantara tag <style> dan </style>. Jika mengunakan template XML biasanya tidak ada tag tersebut. Dan menurut pengalaman teman-teman yang pernah mencoba, ternyata tutorial ini tidak bisa diterapkan pada template XML.

    Jalan keluarnya adalah harus mengganti dengan template yang lain, jika masih ingin menggunakan readmore ini.

  10. charly Avatar

    MAKSUDNYA KODE SAMA BAGIAN MANA ??

  11. charly Avatar

    KODE STYLE DAN /STYLE ITU PAK YG BAGIAN MANA???

  12. dr9587 Avatar
    dr9587

    mas edi makasih sekali atas info read more nya,, udah lama saya nyari,, sulit banget..

    Sama-sama, mas. Memang saya berharap agar artikel yang saya tulis ini bermanfaat bagi teman-teman yang membutuhkan. Makasih atas kunjungannya di blog saya.

  13. siti asma Avatar

    mas makasih ya atas info read more nya

  14. ifa Avatar
    ifa

    Mas..yang ini malah aneh kan? saya malah ga bisa publish semua posting saya nih..tapi mau saya coba dulu yah, ntar ta kasi kabar lagi..suwun mas..hehehehe..salam kenalnya kelupaan

  15. jecxz Avatar
    jecxz

    semua petunjuk saya lakuakn, tapi setelah selesai dan save yg gak bisa dan muncul >>>Kami tidak dapat menyimpan template Anda.
    Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: Open quote is expected for attribute “{1}” associated with an element type “cond”.

  16. agus_mu Avatar

    all,

    problemnya itu di cara penulisan kode yang digunakan mas edi. kalo pengen liat artikel aslinya, baca di sini:

    Blogger Help

    Tapi kalo pake trik standar ini, “Read More” akan muncul di semua tempat, supaya bisa selektif seperti wordpress, bisa dicoba trik di sini:

    Blogger Magz

    Makasih atas infonya mas. Memang ada beberapa perubahan script di artikel ini. Sudah saya coba dan sukses. Sekali lagi terima kasih.

  17. visitor Avatar

    tengkyu kang triknya, udah tak jalanken ke salah satu blognya saya. kLO ada trik laen, kasih tau ya kang makasih…
    http://www.feeseetour.blogspot.com
    JUst CAll me a VISITOR!!

  18. Gudang Freeware Avatar

    mas aku bingung nih udah beberapa kali nyoba belum juga berhasil… artikelnya masih tetep aja full dan tulisan readmore nya muncul juga. pls cek ya blogku di http://only-freewares.blogspot.com gimana nih please help me…

    Gudang Freewares last blog post..RapGet 1.41 – Free Rapidshare Downloader

  19. wirobrojo Avatar

    Wah tambah informasi nih soalnya baru belajar bikin blog di http://supernova-planing.blogspot.com ….makasih infonya ya….

  20. Edward Said Avatar

    oo Pantesan skrng susah bikin related post

    Tehcno Radar

Leave a Reply

Your email address will not be published. Required fields are marked *