Photobucket

24 Apr 2009

TUTORIAL 6 (Membuat ReadMore di Blogspot)

Untuk blogger pemula mungkin anda kadang berpikir kalau “halaman blog saya panjang sekali, apa saya harus mengurangi jumlah posting artikel yang saya terbitkan? Padahal saya ingin halaman blog saya bisa diisi lebih banyak lagi artikel”. Bagaimana Solusinya?
Pada artikel kali ini, saya ingin membahas masalah ini yang mungkin bisa bermanfaat bagi teman-teman blogger pemula (walaupun saya sendiri juga pemula). Sebenarnya topik ini banyak terdapat di berbagai situs atau blog yang membahas masalah tutorial blog dengan berbagai macam versi, namun saya hanya berkeinginan membantu teman-teman blogger pemula (khususnya) yang mampir di blog saya dan semoga bisa bermanfaat.



Solusi untuk memperpendek artikel pada halaman blog kita adalah dengan menggunakan fasilitas ‘Read More’ yang saya ambil dari blognya Ramani dan Hans. Fungsi dari fasilitas ‘Read More’ ini adalah untuk memperpendek artikel yang anda terbitkan di blog. Kelebihan dari Read More versi Ramani dan Hans adalah ketika anda klik pada ‘Read More’, maka seluruh artikel bisa langsung terbuka tanpa harus loading lagi.
Kadang untuk versi “Read More’ yang terdahulu kita harus menunggu untuk loading kembali ketika kita klik “Read More’ nya. Kelebihan lainnya tentu untuk mengurangi lambatnya koneksi internet (bayangkan yang mempunyai koneksi internet lambat, setiap membuka artikel harus menunggu loading). Kekuranganya, versi ini hanya untuk blog template terbaru. Jadi bagi anda yang masih menggunakan template klasik mohon maaf versi ini tidak bisa digunakan.

Berikut langkah-langkah yang harus kita jalankan :
1. Silahkan Login terlebih dahulu di blog anda
2. Pilih menu Tata Letak (Layout)
3. Pilih menu Edit HTML
4. Silahkan anda backup dulu template anda pada pilihan Download Template Lengkap, untuk mengurangi resiko apabila terjadi kesalahan dalam proses editing template.
5. Berikan tanda pada kotak kecil di samping tulisan Expand Template Widget
6. Tunggu proses loading sampai selesai
7. Copy kode dibawah ini, kemudian paste tepat di atas kode </head>

<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />

8. Cari kode berikut sebagai patokan, gunakan tombol Ctrl F atau Shift F3 untuk memunculkan toolbar pencarian kode HTML :

<div class='post-body'

9. Tambahkan kode dibawah ini pada template anda. Tulisan warna hitam adalah kode asli dari template dan warna merah adalah kode yang harus di tambahkan :

<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body' 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 saja... </a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "data:post.id/>")</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
.... rest of template code ....

10. Pilih tombol SIMPAN TEMPLATE

Langkah Berikutnya :
1. Pilih menu Pengaturan
2. Pilih menu Format

3. Copy dan paste kode dibawah inipada kotak Template posting

<span id="fullpost">


</span>

4. Pilih tombol Simpan Setting

Mulailah anda biasakan dengan cara posting artikel berikut ini :
1. Pilih menu Posting, kemudian pilih Edit HTML, jangan memilih menu Tulis atau Compose
2. Pada kotak posting Edit HTML, secara otomatis terlihat kode berikut :

<span id="fullpost">


</span>

3. Cara posting artikel, ketik atau copy paste paragraf pertama atau ringkasan artikel anda, sebelum atau di depan kode :

<span id="fullpost">

4. Kemudian ketik atau copy paste artikel selanjutnya, sebelum atau di depan kode :

</span>

5. Selanjutnya pilih tombol Simpan Entry atau Terbitkan Entry untuk langsung menerbitkan artkel ke dalam blog anda

Untuk artikel yang pendek, sebaiknya anda tidak menggunakan fasilitas ini, tentunya untuk kenyamanan pembaca blog anda. Caranya anda tinggal menghapus kode yang ada dalam kotak posting Edit HTML tadi.
Selamat Belajar.

Tidak ada komentar:

Posting Komentar

Give Me Your Comment, No SPAM No JUNK: