31/03/09

Trik Membuat Read More..

Salah satu Sobat saya ada yang bertanya bagaimana sich caranya menggunakan selengkapnya dalam posting blog kita.. lebih lengkapnya seperti berikut “ Mas Andy, gimana cara bikin tulisan “selanjutnya” , tapi ga pake loading page….kayak di posting blog ini …?

Bagi para sobat yang gemar menyingkat artikel dengan fasilitas Read more atau Baca selengkapnya terutama sobat Nanang. Walaupun para master sudah banyak yang tau dan saya juga orang yang masih baru sekali dalam dunia Blog tetapi tidak ada salahnya saya coba posting jawaban dari pertanyaan sobat Nanang..

Read more kali ini punya beberapa kelebihan lho..Kelebihannya yaitu ketika pembaca mengklik link Read more, maka keseluruhan artikel bisa terbuka tanpa harus me-loading ulang yang terkadang membuat lelah pembaca yang koneksi internetnya amat sangat lambat sekali, hehe.., selain itu read morenya juga sakti lho..untuk artikel yang pendek, tulisan read more juga bisa hilang. Sakti mandraguna kan..!

Tutorial ini saya dapat dari Kang Rohman..Tapi kode ini hanya diperuntukkan untuk template baru, jadi buat yang memakai template klasik maaf ya..

Langsung saja ah..kelamaan..untuk membuat read more versi baru ini silahkan ikuti langkah-langkah berikut ini :

1. Sig in di blogger dengan id Anda

2. Klik menu layout

3. Klik menu Edit HTML

4. Klik Download Template lengkap, silahkan save dulu templatenya untuk mencegah resiko apabila terjadi kesalahan dalam proses editing template.

5. Klik kotak mini di samping tulisan Expand Template Widget.

6. Copy kode berikut, lalu paste tepat di atas kode </head>

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

7. Tambahkan kode berikut, yang berwarna putih adalah kode asli dari kode template dan yang berwarna 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/>
<stylev#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 ....

8. Klik tombol SIMPAN TEMPLATE



Langkah selanjutnya :
1. Klik menu Pengaturan

2. Klik Format

3. Copy kode berikut lalu paste pada kotak kosong yang berada di samping tulisan Template posting



<span id="fullpost">


</span>


4. Klik tombol Simpan Setting

5. Finish.



Cara posting artikel :

Pada saat berada pada menu posting, pilih yang Edit HTML jangan yang tombol Compose, maka otomatis terlihat kode tadi di atas yaitu :


<span id="fullpost">



</span>


Tulis artikel yang mau keliatan dihalaman depan di atas kode <span id="fullpost">, dan sisanya di tulis sesudah kode <span id="fullpost"> dan sebelum kode </span>


Untuk artikel yang pendek, sobat tinggal menghapus kode tadi dan nanti artikel muncul tanpa ada kode [+/-] Selengkapnya... dan [+/-] Ringkasan saja....

Untuk contoh nya bisa dilihat di postingan ini, coba klik tulisan [+/-] Selengkapnya... untuk membuka keseluruhan artikel, dan klik tulisan [+/-] Ringkasan saja... Untuk melihat ringkasan artikel.
Jika masih tidak bisa..silahkan hubungi ahlinya atau ke SINI saja..

Tetapi tidak ada salahnya saya ucapkan..

Semoga Berhasil !




10 komentar:

  1. Ta' praktekin, begitu dapet koneksi yang cepet. Thanx yaa..

    BalasHapus
  2. Wah, thanks my friend andy...:-). tutorial yang bagus nih...

    BalasHapus
  3. Vicky Laurentina langsung diparaktekin ya.., langsung berhasil atau terdapat kesulitan?

    BalasHapus
  4. Untuk Mas Nanang..bagaimana?berhasilkah?selamat mencoba ya..terima kasih kembali for my friend..

    BalasHapus
  5. Gagal di point 7. Lha nggak nemu kode aslinya.. Sebal!

    BalasHapus
  6. da berhasil. ne thank
    from:
    http://komputer-tulungagung.blogspot.com/

    BalasHapus
  7. Buat Vicky Laurentina, kalo tidak ada cari kode yang mendekati. sebenarnya kode template saya juga tidak sama persis dengan kode asli dari tutorial diatas. tetapi secara umum memang kodenya seperti itu walaupun tidak sedikit yang berbeda. pada intinya sama,setelah saya pelajari dan saya coba lagi..Alhamdulillah saya berhasil.. ayo dicoba lagi..dicari dengan seksama..good luck ya..

    BalasHapus
  8. Selamat menggunakan read morenya ya KOMPUTER TULUNGAGUNG..

    BalasHapus
  9. Assalamu'alaikum
    Andi, maaf ni saya belum bisa untuk posting huruf awal yang diperbesar dengan huruf warna, matur nuwun.
    wasalam

    BalasHapus
  10. Sebenarnya itu cuman format standar bu..nanti Insya Allah saya coba postingkan..bagaimana..?

    BalasHapus