Wah setelah berjam jam akhirnya berhasil juga membuat postingan saya punya 'read more' nya hehehe. oops apa sih read more itu? ini adalah cara untuk memotong isi postingan kita sehingga tidak semua kontent terlihat pada halaman utama.contohnya seperti postingan saya ini ni.Namun biasanya saat kita mengklik link read more atau baca selanjutnya, halaman akan memuat dari awal lagi. nah versi yang terbaru ini tidak demikian. saat kita klik link read more, artikel akan langsung nambah dibawahnya.menyenangkan bukan?
Berikut ini langkah-langkahnya:
1. Login ke Blogger
2. Pilih Layout --> Edit HTML
3. silahkan memback-up template anda dulu ,klik tulisan Download Template lalu simpan.
4. Beri tanda centang pada kotak yang bertuliskan Expand Template Widget
5. Kopi kode berikut ini dan taruh tepat diatas kode <jhead>
<script src='http://kendhin.890m.com/Readmore.js'
type='text/javascript'/>
6. Sudah???
7. Kalo sudah cari kode dibawah ini
<div class='post-header-line-1'/>
(letaknya kira-kira di bagian tengah kebawah. yak terus..terus..Nah disitu ketemu kan kodenya?)
8. lihat dibawahnya ada kode seperti ini <div class='post-body entry-content'> Nha 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"'>
9.Lihat dibawahnya ada kode seperti ini
<p><data:post.body/></p>
10. Tembahkan 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 anda suka.
13. Lalu simpan template.
14. Pilih menu Setting -->> Formatting
15. Di bagian bawah cari kotak yang disampingnya ada tulisan "Post Template", dan isikan kode dibawah ini ke dalamnya lalu simpan setting.
<span id="fullpost">
</span>
selesai....
oh ya pada saat memposting pilih menu "Edit Html", letakkan abstraksi posting yg akan ditampilkan di halaman muka di atas kode <span id="fullpost">sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span id="fullpost"> dan </span>
Trus bagaimana bagi yang sudah pakai 'read more' versilama dan pingin ganti dengan 'read more' versi baru ini?
Berikut ini caranya:
'Read more' versi lama kan 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.
oh ya jangan lupa 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>
Apa yah bedanya dengan read more versi lalu? perhatikan text yang berwarna merah, kalo versi lama kan tulisannya "class" sekarang ganti menjadi "id".
Gimana? Sudah berhasil belum??
yupp! Tentunya sudah donk ya.
well, semoga harimu menyenangkan.
Tampilkan postingan dengan label tips bikin blog. Tampilkan semua postingan
Tampilkan postingan dengan label tips bikin blog. Tampilkan semua postingan
MEMBUAT READ MORE VERSI TERBARU
Seninsitus template untuk blogger/blogspot yang lain
Rabu sebelumnya membahas mengenai template yang saya pakai untuk blog ini yang saya dapatkan dari bloggerstyles.com . berikut ini juga merupakan situs penyedia template gratisan.. Situs ini bertajuk blogspottemplate.com yang berisi kurang lebih 80 buah template blogspot.
Ini merupakan situs buatan rekan di indonesia cukup banyak tema blogger templates, mulai dari anime, sport, nature, dan sebagainya. Baik template yang berupa XML Blogger Templates dan HTML Blogger Templates. Selain itu mendukung juga Adsense.(apa itu adsense? tunggu penjelasan di artikel lain ya)
Salah satu yang cukup menarik yaitu New Chocolate karena headernya lumayan menarik, perpaduan cokelat dan etnik.
Nah setelah ketemu situsnya baik yang bloggerstyles.com maupun yg blogspottemplate.com mungkin masih kebingungan bagaimana cara menggunakannya sehingga template tsb bisa diupload di blog rekan rekan. berikut ini merupakan petunjuk mengenai cara penggunaan:
yawes disimak baik baik yo......
Menurut saya kebanyakan template masih seadanya,belum banyak variasi baik dari sisi tema gambar, warna maupun jumlah kolom, terutama yang xml templates. Namun seiring lajunya waktu dan bertambahnya masukan dan juga kreativitas, semoga perkembangan desain templatenya bisa lebih dinamis, variatif dan menarik seperti di btemplates atau Design Disease.
Akan tetapi secara keseluruhan template yang dihadirkan bisa sebagai alternatif untuk merubah tampilan Blogspot Anda menjadi lebih cantik dan menarik.
Semoga Bermanfaat
Memulai blogging dengan template blog
Untuk memulai bisnis internet alias cari duit melalui internet, pertama kali saya menyiapkan sebuah website yang berbentuk blog/weblog.Saat ini karena saya sambil belajar dan juga belajar menerapkan ilmu yg saya pelajari, saya memilih membuat sebuah blog dilayanan hosting gratisan yaitu blogger.Com. Kenapa pilih blogger? Ssst akan saya jelaskan lain kali ya. Yang jelas kita bisa bikin sebuah blog dengan gratis di blogger.Com ini dan kita bisa leluasa memasang iklan iklan yang bisa mendatangkan uang ke kantong kita.
Okey, selanjutnya setelah blognya jadi, saya melakukan personalisasi alias berusaha membuat blog ini menjadi "blog gue banget" ato dengan kata lain sesuai dengan yang kita mau.Saya memulai personalisasi dengan memilih template ato tema u blog baru saya. Sebenarnya Blogger com menyediakan pilihan template namun saya tidak puas. Karena itu saya berburu di rimbanya simbah gugel (google search), website website yang menyediakan template template gratis khusus blog di blogger.Com.
Akhirnya saya terdampar di situs bloggerstyles.Com yang memiliki banyak skali template yg humm ck ck ck, alamak bagus bagus bow. Beneran. Salah satu contohnya adalah template wooden fence seperti dibawah ini.
Sebelumnya saya juga pernah terdampar disitus finalsense.Com yang juga memiliki template template jenis html yang jg cgus bagus. Dan template dari finalsense saya terapkan di dua blog saya yang lain yaitu blog setangkai bunga mawar saja dan blog kaliandraflora. Silahkan berkunjung untuk melihat temanya.
Namun pilihan template di bloggerstyles.Com yang merupakan jenis xml template ternyata lebih memuaskan keinginan saya.
Wuih senaangnya bisa dapat template gratis model gini. Na na na na. Kepingin?? Yawes buruan ke tkp. Www.Bloggerstyles.Com well, selamat punya template baru. Buatlah blogmu menjadi lebih menyenangkan. Salam.
Langganan:
Postingan (Atom)
