Pages

Subscribe:
Showing posts with label membuat readmore. Show all posts
Showing posts with label membuat readmore. Show all posts

Monday, September 24, 2007

Membuat Readmore (3)

Melihat dari banyaknya komentar yang di ajukan pada artikel tentang
cara memotong artikel atau lebih di kenal dengan Read more...,
maka sayapun tertarik untuk membahasnya kembali. Bagi sobat yang belum pernah
membacanya, silahkan baca di sini, karena jika sobat belum membacanya
maka ketika membaca artikel ini terasa tidak ada kaitannya.




Memang ada sebagian orang merasa puas karena telah menemukan artikel tentang
cara membuat menu Read more... yang saya tulis karena setelah di praktekan hasilnya
sangat memuaskan alias berhasil mulus, tapi ada juga yang merasa sedikit jengkel karena
menurut perasaan mereka telah mengikuti seluruh langkah-langkah yang saya tulis tapi
hasilnya nihil alias tidak berhasil. Dan ada juga sebagian yang merasa jengkel karena
telah mengikuti apa yang saya tulis, ini di akibatkan katanya setelah mengikuti apa-apa yang saya
saya tulis seluruh postingannya menjadi hilang entah kemana.



Fenomena yang cukup menarik, satu sumber tulisan akan tetapi hasilnya bisa bervariasi.
Tapi jangan terburu berkecil hati, saya pun di dalam belajar nge-blog tidak sekonyong-konyong
berhasil dan tidak sekonyong-konyong menjadi pintar, semua ada prosesnya. Dan satu lagi kabar
gembira bagi sobat yang belum berhasil membuat menu Read more... dulu sayapun pernah
mengalaminya dan sayapun pernah juga mengalami kehilangan seluruh postingan saya setelah
membuat menu Read more..., akan tetapi justru karena kegagalan-kegagalan tersebutlah
yang membuat saya lebih bersemangat untuk terus belajar, saya mempunyai prinsip yaitu apabila
orang lain bisa kenapa saya tidak bisa, dan itulah yang menjadi cambuk untuk terus belajar dan belajar,
dan sampai detik inipun saya masih tetap belajar.



Kembali kepada masalah Read more.., walaupun masih banyak yang belum berhasil alias gagal
ketika membuat menu Read more.. pada postingan, saya masih tetap yakin apabila sobat
mengikuti secara benar maka hasilnya akan sukses, ini pernah terbukti ada seorang sobat ketika
Chatting melalui Yahoo ! Messenger bersikeras tidak berhasil walaupun telah mengikuti apa yang
saya tulis. Weks... saya juga bingung atuh kalau sudah mengikuti sesuai yang di tulis tapi tetap
tidak berhasil. Akhirnya jalan terakhir saya gunakan yaitu sobat tersebut saya suruh mengganti password
untuk login ke blogger lalu kemudian password baru tersebut di berikan kepada saya dengan perjanjian
bahwa sobat saya harus percaya bahwa saya tidak akan mengacak-acak isi blog nya. Setelah saya login
ke blog teman saya tersebut ternyata benar saja bahwa beliau ini tidak mengikuti seluruh yang saya
tulis, kemudian saya tambahkan kode Read more.. nya dan berhasil dengan waktu yang relatif singkat.
Setelah itu saya beritahukan bahwa sudah berhasil dan password yang baru untuk login di minta untuk
di ubah kembali agar saya pun tidak mengetahuinya. Jadi kesimpulan sementara yaitu sobat yang belum berhasil,
kemungkinan ada kode yang telewatkan.



Baiklah... kembali ke topik awal yaitu tentang menu Read more..., agar sedikit mengerti akan saya
tuliskan kode dasar dari posting, yaitu :







<div class='post-body'>

<p><data:post.body/></p>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>








Perhatikan baik-baik kode di atas, itu merupakan kode asli dari template sobat sebelum di otak-atik.
Jika sobat mengikuti langkah-langkah yang pernah saya tulis, maka kode nya akan berubah seperti ini:







<div class='post-body'>


<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p> <!-- satu -->

<b:else/>

<style>.fullpost{display:none;}</style>


<p><data:post.body/></p> <!-- dua -->


<a expr:href='data:post.url'>Read more.....</a>

</b:if>


<div style='clear: both;'/> <!-- clear for photos floats -->

</div>








Kode di atas sengaja di bedakan warnanya, warna biru merupakan kode asli dari template,
warna merah merupakan kode yang harus di tambahkan. Yang perlu sobat hati-hati adalah kode ini :





<p><data:post.body/></p>







Kode di atas harus di pastikan ada dua tidak boleh ada satu karena jika ada satu maka postingan
sobat bisa hilang semuanya, akan tetapi sebenarnya seluruh postingan tidak hilang, akan tetapi
tidak di perlihatkan alias di sembunyikan. Postingan di perlihatkan dan di sembunyikan karena
kode :





<style>.fullpost{display:inline;}</style>




<style>.fullpost{display:none;}</style>








{display:inline;}
artinya di tampilkan, dan

{display:none;}
artinya jangan di tampilkan alias sembunyikan dan kode inilah apabila
salah pemasangan mengakibatkan semua postingan menjadi tidak di tampilkan, jadi apabila di satukan
dari seluruh kode, maka kira-kira seperti ini :



Tampilkan postingan



Jangan tampilkan postingan



Tampilkan postingan apabila di klik link Read more...





Langkah yang tak kalah pentingnya yaitu sobat harus memasang kode Readmorenya pada tab Edit HTML
jangan pada tab Compose, serta kode Read more... harus selalu di tutup. Contoh pemasangan
kode read more... pada artikel seperti ini :



Ini adalah tulisan pada paragrap pertama yang akan muncul di halaman muka blog, paragrap - paragrap
lainnya akan muncul apabila pengunjung blog meng klik link untuk membuka keluruhan artikel.



<div class="fullpost">




Paragrap yang kedua, ketiga dan seterusnya harus di tempatkan di sini, jangan di tempatkan
sebelum kode readmore, jangan lupa untuk menutup kodenya ya..




</div>






Maka nanti yang akan muncul hanyalah paragrap atasnya saja yakni seperti ini :



Ini adalah tulisan pada paragrap pertama yang akan muncul di halaman muka blog, paragrap - paragrap
lainnya akan muncul apabila pengunjung blog meng klik link untuk membuka keluruhan artikel.


Read more...





Sudah lebih fahamkah? bagi sobat yang belum berhasil ada baiknya untuk mencobanya kembali.
Satu hal yang harus sobat ingat yaitu selalu membuat backup data template sebelum mencoba otak-atik kode
template, karena jika terjadi kesalahan semisal seluruh postingan menghilang maka jangan bingung
dan merasa panik, sobat tinggal Upload kembali backup data template yang sudah di simpan
pada komputer kita sebelum melakukan otak-atik, dan hasilnya nanti akan sedia kala seperti sebelum
sobat melakukan edit kode template. Jadi jangan pernah jera untuk mencobanya. Mau mencoba kembali?
silahkan baca langkahnya di sini !


Sunday, June 24, 2007

Read More Versi baru

Bagi para sobat yang gemar menyingkat artikel dengan fasilitas Read more
atau Baca selengkapnya seperti yang telah saya terangkan pada artikel terdahulu, Sekarang ada cara membuat menu Read more yang saya sebut dengan Read more versi baru. Kenapa demikian? karena menu Read more kali ini sedikit berbeda dengan yang saya terangkan pada artikel yang telah lalu.



Fasilitas Read more kali ini di buat oleh Ramani dan Hans. Kelebihannya
yaitu ketika pembaca mengklik link Read more, maka keseluruhan artikel
bisa terbuka tanpa harus me-loading ulang yang terkadang membuat BT pembaca yang
koneksi internetnya rada lelet ( jadi malu, padahal blog saya berat banget untuk di loading), selain itu untuk artikel yang pendek, tulisan readmore nya bisa di hapus sehingga tidak mengganggu pemandangan seperti yang di keluhkan sobat yuki beberapa waktu lalu yang merasa terganggu karena tulisan readmore selalu muncul walaupun pada artikel yang pendek.



Tapi sayang kode-kode berikut ini hanya berlaku bagi sobat yang memakai template baru saja dan untuk yang memakai template klasik saya ucapkan Kaciaaaaaan deeeeehhh (padahal blog ini pun pake template klasik jadi ga bisa pake ini).



Untuk menyingkat tulisan agar tidak terlalu dipenuhi dengan intermezo yang
sedikit membuat bete and ngeselin, langsung saja untuk membuat read more versi baru ini silahkan ikuti langkah-langkah berikut ini :




  1. Sig in di blogger dengan id sobat




  2. Klik menu layout




  3. Klik menu Edit HTML




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




  5. Klik kotak kecil di samping tulisan Expand Template Widget, sekali lagi jangan lupa untuk memberi tanda centang dulu yah




  6. Tunggu beberapa saat sampai proses selesai




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






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





  9. Tambahkan kode berikut pada kode template sobat, yang berwarna hitam adalah kode asli dari kode template dan yang berwarna merah adalah kode yang harus di tambahkan :





  10. <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 ....





  11. Klik tombol SIMPAN TEMPLATE






Langkah selanjutnya :

  1. Klik menu Pengaturan




  2. Klik menu Format




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










  4. <span id="fullpost">




    </span>







  5. Klik tombol Simpan Setting




  6. Selesai.






Cara posting artikel :



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





<span id="fullpost">






</span>





Simpan artikel yang mau di tampilkan di muka (ringkasannya) di atas kode <span id="fullpost">, dan sisa keseluruhan artikel di simpan 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 nyata saya sudah membuat blog yang sudah memakai sistem ini, silahkan sobat klik tulisan [+/-] Readmore... untuk membuka keseluruhan artikel, dan klik tulisan [+/-] Summary only... Untuk melihat ringkasan artikel. Silahkan sobat klik di sini !.




Selamat mencoba !



Tuesday, May 22, 2007

Membuat Read More (2)


Update : saya telah membuat artikel yang lebih mudah untuk di praktekan dalam membuat read more, silahkan baca di sini!

Bagi para sobat yang menggunakan template baru tentu saja akan mengalami kebingungan ketika membaca tutorial terdahulu yang membahas tentang membuat menu Read more.. atau menu Baca selengkapnya.., karena tutorial tersebut memang di peruntukan bagi para sobat yang menggunakan template klasik. Nah bagi sobat yang menggunakan template baru dan ingin menggunakan menu Read more.. juga silahkan ikuti langkah-langkah berikut :





  • Sign in seperti biasa di blogger dengan id milik sobat




  • Klik Setting




  • Klik Formatting




  • Pada layar paling bawah, ada text area kosong disamping tulisan Post Template, isi tesxt area kosong tersebut dengan kode di bawah ini :






  • <div class="fullpost">




    </div>






  • Klik tombol yang bertuliskan Save Settings




  • Pemasangan kode ini di maksudkan agar pada saat posting artikel, kode tersebut langsung muncul tanpa harus menuliskan terlebih dahulu, jadi membantu kita agar tidak harus selalu mengingat kode tersebut.




Langkah selanjutnya yaitu menambahkan kode pada template, silahkan ikuti langkah berikut :




  • Klik menu Dasboard




  • Klik menu Layout




  • Klik menu Edit HTML




  • Klik tulisan Download Full Template




  • Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template,
    kita masih punya back up data untuk mengembalikannya seperti semula




  • Beri tanda centang pada kotak di samping tulisan Expand Widget Template, sekali lagi jangan lupa beri tanda centang dulu yah,
    sebab kalau tidak, nanti akan tidak sesuai dengan langkah selanjutnya




  • Tunggu beberapa saat ketika proses sedang berlangsung




  • Silahkan Sobat cari kode berikut pada kode template milik sobat :






  • <div class='post-body'>






  • Copy kode HTML di bawah ini kemudian paste di bawah kode tadi







  • <b:if cond='data:blog.pageType == "item"'>



    <style>.fullpost{display:inline;}</style>



    <p><data:post.body/></p>



    <b:else/>



    <style>.fullpost{display:none;}</style>






  • Kemudian lihat kebagian bawah sehingga terlihat kode berikut ini :






  • <p><data:post.body/></p>





  • Copy kode HTML di bawah ini kemudian paste di bawah kode tadi






  • <a expr:href='data:post.url'>Read More......</a>



    </b:if>





  • klik tombol bertuliskan Save Template



  • Selesai.








Cara Posting Artikel




  • Klik menu Posting




  • Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi, yakni :







  • <div class="fullpost">




    </div>






  • Tulisankan artikel yang ingin tampak pada blog sebelum kode :






  • <div class="fullpost">






  • Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode :






  • </div>





  • Klik tombol bertuliskan PUBLISH POST




  • Klik tulisan Open New Window untuk melihat hasil dari postingan kita,
    kemudian lihat apakah hasilnya sukses atau tidak. Jika tidak, mungkin ada bagian yang terlewatkan. Coba lihat kembali langkah diatas




  • Selamat mencoba !




Get Paid To Promote, Get Paid To Popup, Get Paid Display Banner