Senin, 05 Maret 2012

Cara Membuat Read More Otomatis pada Blogspot

Cara membuat read more pada blog dengan menambahkan java script sangatlah mudah. Untuk anda pengguna blogspot atau blog dari blogger bersyukurlah anda karena dalam memberika read more di blogspot dapat disetting secara otomatis sehingga anda tidak usah membuat read more pada setiap postingan, akan tetapi  untuk pengguna wordpress anda kurang beruntung karena tidak bisa diberi read more secara otomatis sehingga harus menerapkan read more pada setiap postingan.

Read more adalah suatu script yang ditambahkan pada blo yang berfungsi untuk memotong panjangnya posting karena jika suatu posting yang kita publish itu terlalu panjang biasanya pengunung merasa bosan dan tidak terlihat professional.

Dan dengan read more ini jika si pengunjung ingin membaca artikel anda dengan lengkap tinggal klik read more secara otomatis akan terlihat semua artikle tadi dengan lengkap.

Langkah - langkah Membuat Read More Otomatis Di Blogspot :
  1. Login ke blog anda.
  2. Masuk ke Template > Klik Edit HTML > Klik Lanjutkan > Centang Expand Template Widget 
  3. Lalu cari kode </head> dan untuk mempermudah pencarian gunakanlah Ctrl + F
  4. Copy Kode di bawah ini kemudian paste tepat di bawah </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

     5.  Selanjutnya cari kode <data:post.body/> atau <p> <data:post.body/></p> 
        (Gunakan Ctrl + F untuk mempermudah pencarian). Jika sudah ketemu hapus kode
        tersebut dan ganti dengan kode script di bawah ini :
<b:if cond='data:blog.pageType != &quot;item&quot;'><div expr:id='quot;summary&quot; + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summaryquot;summary<data:post.id/>&quot;)</script><span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
      6.  Finish dan Simpan template kemudian tenggok hasilnya.

Keterangan :

Semua script tentang Cara Membuat Read More Otomatis Di Blogspot diatas yang hanya bisa dirubah hanyalah yang berwarna merah saja. Dan di bawah ini saya menjelaskan sedikit keterangan tentang script diatas : 
  • summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf 
  • summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar 
  • img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan 
  • img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
  • Anda juga bisa mengubah Icon read more http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif silahkan diganti URL icon yang anda inginkan. Atau anda ingin mengubah Icon Read more tersebut menjadi tulisan saja misalnya " >> Read more ", maka anda tinggal menghapus / mengganti kode <img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.


    Semoga posting ini bermanfaat bagi yang membacanya . .
    Terima Kasih . .  

    Tidak ada komentar:

    Posting Komentar