B
iasanya postingan terbaru akan ditampilkan dihalaman utama blog. Namun
jika postingan terlalu panjang maka hal tersebut akan membuat penuh
halaman utama. Jika ingin supaya postingan yang ditampilkan dihalaman
utama cuma abstraksinya saja kemudian ada sebuah link Read More / Baca
Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-langkah
berikut :
1. Buka menu Layout kemudian pilih Edit HTML.
2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian bawah kode hmtl) :
kotak "expand widget templateny" dicentang dulu.
<div class='post-body entry-content'>
kalo ketemu maka dibawahnya ada kode ini :
<p><data:post.body/></p>
4. Kalau sudah ketemu,
Ganti kode yang ini
<p><data:post.body/></p> menjadi seperti ini :
<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>
Tulisan "Read More....." itu bisa diubah, misalnya jadi "Baca Selengkapnya".
5. Simpan hasil pengeditan.
6. Kemudian pilih menu
Setting lalu pilih
Formatting
7. Pada kotak
Post Template isikan kode berikut:
<span class="fullpost">
</span>
8. Kemudian Simpan.
9. Ketika memposting, disana ada 2 tab pilihan, yang "Compose" dan "Edit
Html", pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode
seperti berikut :
<span class="fullpost">
</span>
10. Letakkan abstraksi posting atau artikel
yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas
kode ini : <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>
11. Selesai
B. Teknik Read More yang lain
Kalau read more yang sebelumnya, kalau kita klik tulisan
read more atau
Baca Selengkapnya
itu kita akan membuka halaman baru sehingga akan meloading lagi
halaman web kita. Di trik Read more yang baru ini, kita akan membuat
link
Read more yang jika kita meng-klik link tersebut, maka
keseluruhan artikel akan terpampang dibawahnya, jadi tidak perlu meload
ke halaman yang lai.
Berikut ini langkah-langkahnya:
1. Login ke Blogger
2. Pilih Layout --> Edit HTML
3. Kalau mau memback-up template kamu dulu klik tulisan Download Template lalu simpan.
4. JBeri tanda centang pada kotak yang bertuliskan Expand Template Widget
5. Kopi kode berikut ini dan taruh tepat diatas kode </head>
<script src='http://kendhin.890m.com/Readmore.js'
type='text/javascript'/>
6. Kalo sudah cari kode dibawah ini
<div class='post-header-line-1'/>
(letaknya kira-kira di bagian tengah kebawah)
7. D ibawahnya ada kode
<div class='post-body entry-content'> ganti kode tersebut menjadi seperti ini:
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
8.Terus dibawahnya ada kode gini
<p><data:post.body/></p>
9. Tambahkan kode ini dibawahnya.
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
11. jadi seluruh kodenya akan menjadi seperti ini :
<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
12. Tulisan 'Selengkapnya' dan 'Ringkasan' bisa diganti dengan apa aja kata yang kamu suka.
13. Lalu simpan template.
14. Pilih menu
Setting -->> Formatting
15. Di bagian bawah ada kotak yang disampingnya ada tulisan
"Post Template", dan isikan kode dibawah ini ke dalamnya lalu simpan setting.
<span id="fullpost">
</span>selesai....
Kalau memposting pilih yang "Edit Html", letakkan abstraksi posting yg akan ditampilkan di halaman muka di atas kode
<span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode
<span id="fullpost"> dan
</span>
Trus bagaimana bagi yang sudah pakai 'read more' yang lama dan pingin ganti dengan 'read more' yang baru ini? caranya :
'Read more' yang lama kodenya seperti ini :
<div class='post-header-line-1'/>
<div class='post-body entry-conten'>
<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>
hapus text yang berwarna biru, lalu ikuti langkah-langkah diatas, lalu ikuti langkah berikut ini :
1. Pilih menu Setting -->> Formatting
2. Di bagian bawah ada kotak yang disampingnya ada tulisan "Post Template", dan isikan kode dibawah ini ke dalamnya lalu simpan setting.
<span id="fullpost">
</span>
bedanya apa sama read more yang dulu? perhatikan text yang berwarna merah, kalo dulu kan tulisannya "class" sekarang ganti menjadi "id".
