Laman

  • HOME
  • LOMBA BLOG
  • ARTIKEL
  • TUTORIAL
  • JUAL SUPERGREENFOOD

Cara Mudah Membuat Read More Otomatis di Blogspot

Moocen Susan | Selasa, Juli 02, 2013 |
Menurut saran seorang temanku untuk membuat line break di setiap postingan blogku agar page view-nya bisa nambah banyak, membuatku tergugah (#halah..hehe) – terpacu, untuk mencari tahu cara membuat read more (baca selengkapnya…) di postinganku itu. Setelah browsing sana-sini aku malah tambah bingung karena ini ada cara manual dan cara otomatis serta banyak alternatif cara. Kalau  milih manual pasti capek karena musti edit satu-satu, jadi cari cara otomatis, but… ups… ketemu lagi sama edit template… jujur kalau masalah edit template musti super hati-hati. Masalahnya kalau salah kode, bisa kacau semuanya. Tapi memang kalau ga kepepet ga belajar dan ga bisa bikin tutorial gini buat bantuin temen kan? Hehe… ada manfaatnya juga dibuat kepepet. Oke, kog jadi malah curhat ya, langsung aja deh ibu-ibu simak tutorial sederhana saya dibawah ini :
  1. Masuk ke www.blogger.com
  2. Ketik email dan kata sandi Anda → MASUK 
  3. Klik “TEMPLATE” 
  4. Klik tombol "Cadangkan/ Pulihkan" di pojok kanan atas
     
  5. Unduh template lengkap → setelah selesai mengunduh lalu tutup/close 
  6. Klik “EDIT HTML” 
  7. Copy kode ini   </head> (tekan Ctrl+C)
  8. <script type='text/javascript'>
    var thumbnail_mode = &quot;float&quot; ;
    summary_noimg = 250;
    summary_img = 220;
    img_thumb_height = 120;
    img_thumb_width = 220;
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");
    for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].
    substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.
    length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.
    substring(0,a-1); return b+" [...]"}function createSummaryAndThumb(d){
    
    var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");
    var e=summary_noimg;if(b.length>=1){a='<span style="float:left; 
    padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width
    +'px"height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"
    
    +removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c}; 
    //]]>
    </script>
  9. Taruh kursor di dalam kotak “edit html” tadi. Bisa di belakang salah satu kode script → tekan Ctrl+F sehingga keluar kolom kecil untuk search kode → paste (Ctrl+V) kode </head>   → tekan Enter di keyboard Anda 
  10. Setelah ketemu kode </head>  letakkan/paste kode (no.8) di atas kode </head> 
    Ketr.No.8-10
  11. Copy kode ini <data:post.body/> dengan cara tekan Ctrl+C,  lalu cari di dalam kotak "edit html" seperti langkah no.9 . Setelah ketemu, ternyata kode tersebut tidak hanya ada 1 tapi ada 3 tempat, untuk mengetahuinya bisa tekan Enter di keyboard Anda dengan tetap menaruh kursor di samping kode itu dalam kotak search.
  12. Perhatikan nomor disamping kotak edit html itu untuk mengetahui perbedaan nomor  kode yang awal dan terakhir yang sama. Disinilah rumitnya karena Anda harus coba-coba dan berhati-hati dalam mengganti kode. Pakai kode 1, 2 atau yang ke-3? Karena masing-masing template bawaan blogger beda-beda. Kalau saya pakai yang ke-2 (enter kode yang ke 2) → Delete/ hapus kode  <data:post.body/> lalu ganti dengan kode (No.13) dibawah ini : (blok kode dibawah ini dengan cara tekan Ctrl+A→ copy kode tekan Ctrl+C). 
  13. <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb
    (&quot;summary<data:post.id/>&quot;);</script>
    <span class='rmlink' style='float:left'><b>Baca Selengkapnya</b> 
    &#8594; <a expr:href='data:post.url'><data:post.title/></a></span>
    </b:if></b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if> 
  14. Paste kode (no.13) → (Ctrl+V) untuk mengganti kode  <data:post.body/> 
    Ketr.no.11-14
  15. Klik “PRATINJAU TEMPLATE” untuk melihat hasilnya apakah tampilan blog Anda sudah menampilkan read more/ baca  selengkapnya? Cek juga judul artikel Anda. 
  16. Jika belum berhasil, klik Edit HTML tadi lalu hapus script yang baru saja Anda tambahkan terakhir tadi, lalu ganti lagi dengan kode semula <data:post.body/> dan coba gunakan kode <data:post.body/> yang ke 3/terakhir.  Ulangi lagi dengan cara : Delete kode  <data:post.body/> lalu ganti dengan kode yang sama dengan tadi. Jangan buru-buru disimpan tapi cek dulu dengan cara klik "PRATINJAU TEMPLATE" seperti tadi.


  • Jika sudah benar maka Anda boleh klik "Simpan/ Save template" → LIHAT BLOG 



Keterangan : 
Untuk mengatur panjang teks atau gambar yang ingin Anda tampilkan :
summary_noimg = 250; banyaknya karakter di postingan tanpa gambar
summary_img =220;     banyaknya karakter di postingan + gambar
img_thumb_height = 120; tinggi gambar
img_thumb_width = 220;  lebar gambar
Kata Read More bisa juga diganti dengan Baca selengkapnya, dll

27 komentar:

  1. Hihihi, kodenya njlimet ya, Mba. . .
    Kalau di Wordpress manual biasanya. Gak otomatis. .. :)

    BalasHapus
    Balasan
    1. iya njlimet nih haha... gpp deh buat tantangan :)

      Hapus
  2. Kalau saya suka manual Mbak, toch yang diedit paling2 cuma beberapa postingan terakhir saja. Postingan lama kan tidak muncul di awal.

    Kalau yang otomatis mutusnya kalimat semaunya mesin sehingga kadang berasa nggak sreg...

    Salam!

    BalasHapus
    Balasan
    1. Oh begitu ya...ok, nevermind..:) salam kenal kembali

      Hapus
  3. Aku pakenya manual mbak...ribed pake yg otomatis hehe

    BalasHapus
    Balasan
    1. Ribetnya kan cuma sekali... hehe... it's ok mas yang penting nyaman saja mau pake yang manual or otomatis :) thanks ya sdh mampir

      Hapus
  4. woww... emang bener2 njlimet..btw sukses deh :)

    BalasHapus
    Balasan
    1. iya...njlimet plus ketir2 kalo salah naruh kode script di template....:(

      Hapus
  5. wah jadi teringat pas belajar ngeBlog dulu, tapi tidak ada kepuasan kalo keringat tidak bercucuran, Semangat belajar!!!
    thanks atas sharenya

    BalasHapus
    Balasan
    1. Hehe..betul betul pak Samsul.... skrg berarti Anda sudah ahli ngeblog dong? hehe...boleh nih share juga :)

      Hapus
  6. makasih tipsnya, langsung dicuba

    BalasHapus
    Balasan
    1. Silakan dicoba gan Pencerah.... :)

      Hapus
  7. Aq manual mbak, kadang suka lupa, tp lebih gampang :)

    BalasHapus
    Balasan
    1. Oke, gpp cr yang gampang aja..soalnya kemrn aku udah terlanjur banyak postingan males edit satu2

      Hapus
  8. pas banget nih postingannya, kemarin aku kesulitan membuat readmore otomatis. nanti aku coba kalau ada kesulitan boleh tanya ya :)

    BalasHapus
  9. akhirnya berhasil juga ya mba ^^

    BalasHapus
    Balasan
    1. Ya mbak Shinta setelah tanya tanya:)

      Hapus
  10. kalo mengatur banyaknya karakter yg tampil gmn ya ???

    BalasHapus
    Balasan
    1. http://katongilang.blogspot.com/2012/12/cara-mengganti-jumlah-kata-pada-read.html baca ini mas...

      Hapus
  11. wuaa,,,, senengnyaa... dah lama ga mengunjungi blog ini tambah kereeeen (y)

    BalasHapus
  12. aku udah berXXcoba Mbak, tapi gak bisa-bisa, apa mungkin karna saya masih gaptek ya...?

    BalasHapus
    Balasan
    1. mgk ada bentrok script/ templatenya ga cocok, pake readmore manual aja yang di dalam dashboard postingan klik aja icon insert jump break

      Hapus
  13. terimakasih banyak sob... sangat membantu

    BalasHapus
  14. Mb Susan, seneng buka blog tutorialnya...akhirnya bisa ngedandanin blog...hehehe

    BalasHapus

Terima kasih sudah berkunjung. Silakan tuliskan komentar Anda di bawah ini. Komentar Anda sangat bermanfaat dan sangat saya hargai atau jika ada pertanyaan silakan tinggalkan pesan di livechat saya (sidebar kiri bawah)
Perhatian: saya akan menghapus otomatis komentar yang ada link hidupnya :D

Related Posts Plugin for WordPress, Blogger...