Membuat read more atau baca seterusnya
dilakukan untuk meringkas isi artikel posting. Lebih menghemat isi posting yang
sangat panjang. Bisa dibayangkan bagaimana kalau kita memiliki artikel yang
panjangnya sampai 40 paragraf. Itu baru satu judul, jika di menu utama ada 20 artikel
maka akan sangat panjang dan mengganggu proses loading baca halaman utama blog.
Kalau misalnya ada yang datang ke blog kamu untuk baca, tentunya dia harus
menunggu lama agar semua isi postingan itu tampil. Postingan ini buat kawan Delis yang
sempat menyakan cara membuat read more, semoga bermanfaat ya. Setelah read more
dipasang maka yang ditampilkan pada posting hanya satu atau dua paragraf saja.
Setelah tulisan read more diklik, barulah tampak isi keseluruhan dari artikel
tersebut. Satu hal yang kusuka dari trik ini akan membuat tampilan posting
lebih manis dan cantik. Elok dipandang mata.
Untuk menambahkan readmore, yang perlu kita tambahkan adalah kode html pada html template blog kita. Readmore yang ini dikhususkan pad template blog baru. Agak sedikit susah memang, tapi dengan kesabaran apapun bisa dilakukan dan bisa diraihbergaya pahlawan
.
Tapi kalau terlalu sabar juga bakal kelamaan ya. Seperti yang sedang kamu baca
ini, terlalu lama dan kebanyakan pembukaan. Ikuti langkah cara membuat
readmore di bawah ini.
Langkah Pertama
Loggin ke blog dengan ID kamu » klik Pengaturan » klik Format. Perhatikan pada kolom paling bawah ada tulisan Template Posting. Isilah kotak isian dengan kode berikut:
Untuk menambahkan readmore, yang perlu kita tambahkan adalah kode html pada html template blog kita. Readmore yang ini dikhususkan pad template blog baru. Agak sedikit susah memang, tapi dengan kesabaran apapun bisa dilakukan dan bisa diraihbergaya pahlawan
.
Tapi kalau terlalu sabar juga bakal kelamaan ya. Seperti yang sedang kamu baca
ini, terlalu lama dan kebanyakan pembukaan. Ikuti langkah cara membuat
readmore di bawah ini.Langkah Pertama
Loggin ke blog dengan ID kamu » klik Pengaturan » klik Format. Perhatikan pada kolom paling bawah ada tulisan Template Posting. Isilah kotak isian dengan kode berikut:
<span class="fullpost">
</span>
Setelah itu klik Simpan Setelan.
Langkah Kedua
Klik menu Tata Letak selanjutnya Klik Edit HTML dan beri centang pada kotak kecil bertuliskan Expand Template widget. Satu lagi, sebelum mengedit HTML template blog maka ada baiknya template tersebut di backup dulu. Untuk membackup template silahkan klik tulisan Download template lengkap. Simpan template tersebut pada komputer kamu. Sekarang kita sudah bisa mulai bermain-main dengan html template blog.
Cari kode di bawah ini:
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<div class='post-body entry-content'>
Untuk memudahkan pencarian, pada kebor silahkan tekan F3 atau
Ctrl F. Akan muncul tool pencarian dan copy beberapa karakter kode yang mau
dicari dan paste di dalam kotak cari tadi. Maka kode yang dicari akan ketemu. Bila sudah, silahkan melanjutkan dengan copy dan paste
kode di bawah ini tepat di bawah kode yang di atas:
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
Bila sudah selesai, kamu perhatikan bahwa di bawah kode yang
kamu paste tadi adalah kode berikut:
<data:post.body/>
<div style="'clear:"> <!-clear for photos floats ->
</div>
<div style="'clear:"> <!-clear for photos floats ->
</div>
Kemudian di antara kode
<data:post.body/>
dan kode
<div style="'clear:"> <!- clear for photos
floats ->
</div>
</div>
masukkan kode berikut:
<a expr:href='data:post.url'>Read More »» </a>
</b:if>
</b:if>
Sehingga menjadi seperti ini:
<data:post.body/>
<a expr:href='data:post.url'>Read More »» </a>
</b:if>
<div style="'clear:"> <!-clear for photos floats ->
</div>
<a expr:href='data:post.url'>Read More »» </a>
</b:if>
<div style="'clear:"> <!-clear for photos floats ->
</div>
Keseluruhan hasil akhir adalah berikut:
<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>
<data:post.body/>
<a expr:href='data:post.url'>Read More »» </a>
</b:if>
<div style="'clear:"> <! -clear for photos floats ->
</div>
<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>
<data:post.body/>
<a expr:href='data:post.url'>Read More »» </a>
</b:if>
<div style="'clear:"> <! -clear for photos floats ->
</div>
Perhatikan kode yang berwarna biru adalah kode yang telah
ditambahkan. Da kamu bisa mengganti tulisan readmore dengan kalimat lain.
Misalnya baca seterusnya, baca selanjutnya, klik saya untuk kelanjutan artikel,
klik di sini, lanjutkan membaca, continue reading dan apa saja yang menjadi
kalimat kesukaanmu. Jika sudah selesai, maka klik simpan template.
Silahkan diuji dengan membuat artikel baru pada blog kamu dan lihat hasilnya. Untuk artikel posting yang sudah sempat dipublish, kamu tinggal mengedit artikel pada edit posting dan tuju edit html posting. Tinggal pilih berapa paragraf yang mau ditampilkan di awal posting. Kalau saya biasanya satu atau dua paragraf pertama saja yang ditampilkan. Pada saat mulai membuat tulisan di blog maka perhatikanlah Edit HTML. Urutan penulisan artikel adalah sebagai berikut:
Di sini adalah paragraf yang akan ditampilkan sebelum read more. Boleh satu atau dua paragraf.
<span class="fullpost">
Di sini adalah tempat kamu menuliskan kelanjutan dari artikel
setelah tulisan read more.
</span>
Oke,
selamat membuat read more di blogspot. Semoga berhasil dan tidak ada cacat.
Kalau ada, ya tinggal diulangi saja dengan mencoba lagi.
0 comments:
Post a Comment