Selamat Datang di blognya Ummi Hana!

Senin, 02 April 2012

Membuat Read More / Baca Selanjutnya pada Blog

Postingan pada blog seringkali panjang sekali sehingga membuat blog kita menjadi tidak simpel. Untuk membuat tampilan postingan blog kelihatan lebih ringkas, maka biasanya para blogger memakai fitur read more atau baca selanjutnya..

Nah, kali ini saya ingin membagi ilmu yang saya dapet dari blognya Mas Ahmad Khoirul Azmi. Berikut ini langkah-langkahnya :
1. Masuk ke akun blog kita.
2. Pilih Rancangan --> Edit HTML. Untuk lebih amannya kita download dulu template kita agar jika ada kesalahan kita masih punya backup-annya.
3. Cari tulisan </head>. Agar lebih cepat gunakan Ctrl+F.
4. Masukkan script berikut sebelum </head>
 
    <script type='text/javascript'>
    var thumbnail_mode = &quot;float&quot; ;
    summary_noimg = 400;
    summary_img = 300;
    img_thumb_height = 100;
    img_thumb_width = 100;
    </script>
    <script src='https://sites.google.com/site/bukarahasiahost/azmeereadmore/azmee-readmore.js' type='text/javascript'/>

keterangan :
summary_noimg = 400; adalah banyaknya karakter yang ditampilkan ketika tidak ada gambar di postingan anda. Anda bisa mengubah jumlahnya sesuai selera anda.
summary_img = 300; adalah banyaknya karakter yang ditampilkan ketika terdapat gambar di postingan anda. Anda bisa mengubah jumlahnya sesuai selera anda.
img_thumb_height = 100; adalah tinggi gambar thumbnail. Anda bisa mengubah jumlahnya sesuai selera anda.
img_thumb_width = 100; adalah lebar gambar thumbnail. Anda bisa mengubah jumlahnya sesuai selera anda. 

5. Lanjutkan dengan mencari <data:post.body/> 
6. Lalu ganti <data:post.body/> dengan script berikut :

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    <b:else/>
    <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>
   <div style='clear: both;'/><span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>
    </b:if>

keterangan :
padding-top:5px, ganti nilainya untuk membuat jarak dengan tulisan di atas readmore.
float: right, ganti right dengan left jika ingin read more muncul di sebelah kiri.
Anda bisa mengganti Read more dengan kata-kata lain misalnya "baca selanjutnya", "Read the rest of this entry", "Lanjut gan..", "Monggo dilanjut", atau seperti punya saya "Lanjutin bacanya.."
Tapi untuk amannya tinggalkan begitu saja. 

7. Untuk memastikan hasilnya, jangan dulu di-save. Gunakan preview untuk melihat hasilnya.
8. Setelah yakin, silahkan di-save.
Hasilnya..akan seperti punya saya...^_^ Silahkan mencoba.. ^_^


4 komentar:

  1. Kalo pas bikin postingan juga bisa langsung, Fer. Kan ada yang icon kaya kertas sobek jadi dua tuh. Kalo di klik tar tulisannya bisa muncul sebagian aja. Trus juga bisa sesuka hati mau berapa paragraf yang kelihatan di postingan (sebelum klik read more).

    BalasHapus
  2. Aku pernah coba juga Mil.. Tapi itu kan harus dilakukan setiap kita bikin postingan..
    Kalo yang kayak punyaku gini dah otomatis setiap kita bikin postngan akan terpotong dengan read more..

    BalasHapus
    Balasan
    1. mbak, terimakasih. sudah saya coba, alhamdulillah bisa :)

      Hapus
    2. @roel: sama-sama.. senang bisa membantu..^_^

      Hapus