Iklan

Cara Membuat READ MORE OTOMATIS di Blogspot

Cara Membuat READ MORE OTOMATIS di Blogspot

BLOGINGPASURUAN akan membagi tips bagaimana cara membuat auto read more , Auto read more atau baca selengkapnya fungsi sebenernya sich untuk memotong artikel agar tidak panjang ( contohnya pada template bawa’an blogspot ) teknik ini kesannya adalah efisiensi dan mempermudah pengunjung melihat semua posting Blog Anda.

Kalau anda menggunakan template dari situs dowload template selain bawaan blogspot, bisa dikatakan hampir semuanya sudah menggunakan read more otomatis . Tutorial ini mungkin dikhususkan untuk Anda yang mau memodifikasi template bawaan blogspot.

Cara Membuat Readmore Otomatis di Blogger

1. Login ke Blogger lalu klik Template
2. Klik tombol Cadangkan / Pulihkan yang ada di pojok kanan  untuk pencegahan jika terjadi kesalahan dan Anda bingung bagaimana membetulkannya ( fungsi menu ini adalah backup template )
3. Kemudian klik tombol Edit HTML.
4. cari kode </head>
5. Setelah ketemu kode </head> , maka letakkan kode berikut diatas </head>

CSS
<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>

6. Kemudian setelah itu  cari kode <data:post.body/> biasanya anda temui kode lebih dari  satu. sehingga kita harus coba-coba, tapi mulailah dari <data:post.body/> yang paling bawah.

Jika sudah ketemu yang paling bawah, ganti kode tersebut dengan script ini:

HTML

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

7. Kemudian Klik Pratinjau Template dulu ( jangan langsung save ).Jika ketika di Pratinjau sudah terpasang dengan benar klik tombol Save Template.

Jika Anda ingin mengatur seberapa panjang teks yang di tampilkan atau seberapa besar gambar yang dimuat berikut ini keterangannya:

summary_noimg = 250;  adalah banyaknya karakter yang ditampilkan ketika postingan anda tidak ada gambar
summary_img = 220; adalah banyaknya karakter yang ditampilkan ketika postingan atau pada artikel anda terdapat gambar.
img_thumb_height = 120; adalah tinggi gambar thumbnail
img_thumb_width = 220; adalah lebar gambar thumbnail

Anda bisa juga mengganti read more dengan kata-kata lain ( baca selengkapnya )

Demikian artikel Cara Memasang Read More Pada Artikel di Blog. Semoga bermanfaat….



Next
Prev Post
Previous
Next Post

18 comments:

  1. makasih om.... sangat membantu bagi blogger pemula seperti saya... kapan-kapan mampir ke blog saya ya ????
    jaya selalu !!!!!

    ReplyDelete
  2. Terimakasih infonya Gan (y)
    Ini yang sedang saya cari-cari
    http://grosirobatjellygmat.com/
    http://jamutradisionalmujarab.com/

    ReplyDelete
  3. Izin share ka, terimakasih :)
    http://goo.gl/21T1Mx
    http://goo.gl/mgBCnM
    http://goo.gl/zxbefd

    ReplyDelete
  4. sepertinya ini yang yang paling cocok di praktekkan

    ReplyDelete
  5. Makasih gan buat infonya, ini sangat membatu saya yang pemula ini

    mampir juga ke blog saya dukunban.blogspot.com

    ReplyDelete
  6. Replies
    1. itu petunjuknya sudah jelas bro.. silahkan ikuti saja. ntar kalau ada masalah silahkan tulis di kotak komentar ini lagi

      Delete
  7. ya ampun, aku ngotak atik blog untuk buat read more di postingan, selalu gagal. penempatan kode terakhir itu yang keliru sampai nemu postingan ini. Ternyata -nya pakai yang terakhir, baru bisa. hufff
    terima kasih, ini bermanfaat bagi blogger pemula sepertiku!

    ReplyDelete
  8. Kalau pake hp gmana gan..

    ReplyDelete
  9. Info yang bermanfaat
    jangan lupa juga untuk kunjungi www.smartkiosku.com
    terima kasih..

    ReplyDelete
  10. Terima kasih, akan saya terapkan di blog saya http://www.pontendik.com/ mohon doa, semoga berhasil (maklum saya blogger pemula)

    ReplyDelete
  11. Terima kasih bos, work 100%.........

    ReplyDelete
  12. sangat membantu artikelnya..ijin copy yah gan..buat sya pasang di blog saya..trims dan salam kenal.

    ReplyDelete
  13. kenapa tombol baca selengkapnya nggak mau ketindis?mohon bantuannya

    ReplyDelete
  14. makasih bang atas infonya. jangan lupa mampir ke blog saya, sukma31cronous.blogspot.com

    ReplyDelete
  15. mantap gan. jangan lupa singga ke kapalbekas.blogspot.com

    ReplyDelete