Translate this page from Indonesian to the following language!
English French German Spain Italian Dutch Russian Portuguese Japanese Korean Chinese Simplified Arabic

Friday, December 18, 2009

Cara Membuat Readmore Terbaru pada Blogger

Sebenarnya sudah lama sekali saya ingin posting mengenai artikel ini. Akan tetapi, untuk memposting artikel ini, saya harus mengerti terlebih dahulu mengenai kode HTML-nya. Takutnya, saat anda mempraktekan postingan ini, terdapat kesalahan dan anda tidak mengerti untuk memperbaikinya. Saya mendapatkan inspirasi untuk memposting artikel ini saat saya mengunjungi blog teman sekelas saya, yaitu kang Irvan Setiawan. Di blog tersebut terdapat tulisan [+/-] keep reading... dan [+/-] stay short... yang jika kita klik akan memunculkan lanjutan dari postingan sebelumnya dan dapat menyingkat kembali postingan tersebut tanpa harus me-reloading untuk memunculkan lanjutan dari postingan tersebut. Kita ambil contoh saat kita mengunjungi situs jejaring sosial Facebook. Disitu juga terdapat tulisan See More pada bagian comment yang berfungsi untuk menampilkan lanjutan dari comment tersebut.



Sejak saat itu, saya sangat ingin sekali membuat Readmore seperti itu di blog saya. Saya mencoba mempelajari kode HTML-nya dan mencari-cari artikel yang membahas tentang Readmore di Google. Saat itu, teman sekelas saya yang bernama Yusrizal memberi tahukan suatu link yang membahas mengenai Tutorial Blogger. Saya mencoba mengunjungi situs tersebut dan akhirnya saya menemukannya. Saya langsung saja mencoba tutorial tersebut, akan tetapi selalu gagal dan tidak menemukan kode HTML yang pas dengan template pada blog saya. Lalu saya mencoba membaca lagi tutorial tersebut, ternyata untuk kode HTML Readmore yang seperti ini tidak dapat digunakan pada template lama, hanya bisa digunakan dengan menggunakan template yang baru. Setelah saya membaca itu, saya sangat kecewa karena tidak dapat membuat Readmore pada blog saya. Tapi tidak apa-apa, saya akan mempostingkan artikel ini sebagai tutorial untuk anda semua yang mengunjungi blog saya.

Untuk membuat Readmore terbaru, ikutilah langkah-langkah dibawah ini :

  1. Login pada Blogger anda
  2. Pilih Tata Letak ==> Edit HTML
  3. Beri tanda checklist pada Expand Widget Template
  4. Cari kode berikut </head> (untuk mempermudah pencarian, ketik CTRL + F)
  5. Copy kode di bawah ini dan letakkan tepat diatas kode </head>

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

  6. Cari kode berikut <div class='post-body'>
  7. Ganti kode tersebut dengan kode di bawah ini

    <div class='post-body' expr:id='"post-" + data:post.id'>
    <b:if cond='data:blog.pageType == "item"'>

  8. Cari kode berikut <p><data:post.body/></p>
  9. Tambahkan kode di bawah ini tepat di bawah kode tersebut

    <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);'>Readmore</a></p>
    </span>
    <span id='hidelink' style='display:none'>
    <p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Stay Short</a></p>
    </span>
    <script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
    </b:if>

  10. Klik tombol Simpan Template
  11. Setelah langkah 1 - 10 telah dilakukan, lalu kita pilih menu Pengaturan
  12. Pilih menu Format dan cari kolom bagian Template Posting
  13. Tambahkan kode dibawah ini kedalam kolom Template Posting




    <span id="fullpost">


    </span>

  14. Klik tombol Simpan Setting
  15. Selesai
Cara memposting artikel :
Pada saat kita akan membuat artikel / posting, jangan memilih tombol Compose. Pilihlah Edit HTML dan nanti akan tertampil tulisan seperti dibawah ini pada postingan.

(ketikkan bagian artikel yang akan ditampilkan di awal sebelum dilanjutkan ke artikel yang selanjutnya sebelum tanda <span id="fullpost">)

<span id="fullpost">

(ketikkan bagian artikel selanjutnya yang akan ditampilkan jika kita klik Readmore dan letakkan artikel tersebut diantara kode <span id="fullpost"> dan </span>)

</span>


Klik disini jika anda ingin melihat contoh dari pembuatan Readmore seperti ini.

Selamat mencoba...

Catatan :
Kata Readmore dan Stay Short pada kode HTML diatas dapat anda ganti dengan kata-kata yang sesuai dengan keinginan anda.


Posted by aditoy at 10:03 PM
Labels:
 

Copyright © 2011 @aditoy. All rights reserved.

Blogger template created by Templates Block
Wordpress design by Design Disease