Secara defaultnya penampilan posting pada blogger tidak sebagai wordpress. Contohnya jika kita menulis posting yang panjang, blogger tidak bisa memenggal teks yang kita masukkan. Tentu saja tampilan blog terkesan memiliki scroll yang panjang.
Tetapi dengan sedikit triks yang nantinya akan kita bahas, hal ini bisa dibuat menjadi lebih indah.
Apa keunggulan menggunakan menu readmore seperti ini ? Jika kita menggunakan readmore standar, jika di klik akan meloading kembali halaman tersebut. Nah tentu saja akan memakan waktu yang banyak. Dengan menggunakan readmore seperti dibawah ini, kita tidak lama lagi untuk melihat kelanjutan dari isi blog tersebut. Makin penasarankan ? Kalo gitu kita cobain dulu deh.
Ikuti langkah-langkah berikut ini :
1. Login ke Blogger
1. Login ke Blogger
2. Pilih Layout –> Edit HTML
3. Jika takut template akan rusak, silahkan memback-up template kamu dulu. Dengan cara kilik tulisan Download Template lalu simpan.
4. Kemudian beri tanda centang pada kotak yang bertuliskan Expand Template Widget
5. Kopi kode berikut ini dan taruh tepat didalam kode <head>…</head>
-
<script src='http://kendhin.890m.com/Readmore.js' type='text/javascript'/>
Note : Biar mudah Copy Paste semua kode ke Notepad atau teks editor lainnya.
6. Berikutnya cari kode dibawah ini (gunakan fasilitas find pada notepad)
-
<div class='post-header-line-1'/>
7. Dibawah kode tersebut anda akan menemukan kode
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"'>
-
</b></div>
8. Terus lihat dibawahnya. Anda akan menemukan kode <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 href="javascript:void(0);" ?\?);?? + data:post.id javascript:showFull(\?post-? expr:onclick="">[+/-] Selengkapnya…</a></p>
-
</span>
-
<span id="hidelink" style="display: none">
-
<p><a href="javascript:void(0);" ?\?);?? + data:post.id expr:onclick="" javascript:hideFull(\?post-?>[+/-] Ringkasan…</a></p>
-
</span>
-
<script type='text/javascript'>checkFull("post-" + "<data :post.id/>")</script>
Teks yang bertuliskan Selengkapnya dan Ringkasan dapat diganti dengan tulisan lain, seperti [+/-] Selengkapnya… diganti menjadi [+] Selengkapnya… atau [+/-] Ringkasan… menjadi [-] Ringkasan…
10. 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>
-
</div>
11. Lalu simpan template.
12. Langkah berikutnya Pilih menu Setting –> Formatting
12. Langkah berikutnya Pilih menu Setting –> Formatting
13. 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>
14. Selesai Deh …..
Untuk memulai posting, kita harus pilih dari pilihan "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>
