Cara membuat read more/baca selengkapnya di Blog

Mungkin kata atau istilah readmore ini masih asing buat teman-teman yang masih baru berkecimpung di dunia blogging. Dan walaupun tutorial cara membuat readmore sudah banyak di tulis oleh sobat-sobat blogger yang lain tetapi sayangnya tutorial yang di suguhkan terkadang tidak mudah untuk dimengerti dan malah membuat bingung. Tidak dipungkiri memang si empunya blog ini dulu ada kesulitan untuk memasang readmore. Untuk alasan yang demikian maka tidak ada salahnya saya membuat artikel ini sebagai pelengkap untuk mempermudah sobat blogger yang masih baru menggeluti dunia blogging umumnya dan untuk daftar baca'an pribadi jika suatu saat saya melupakannya khususnya. Readmore adalah suatu pemotongan kalimat pada suatu postingan. Readmore biasanya digunakan untuk menandai bahwa suatu kalimat dalam suatu postingan masih
mempunyai kelanjutan. Kegunaan readmore adalah untuk mempersingkat halaman posting yang panjang. Makna readmore ini meluas dengan sebutan yang sering kita lihat di dunia maya dengan kata-kata seperti next, continue reading atau juga baca selengkapnya, dll. Readmore setahu si empunya blog ada 2 tipe

1. Readmore otomatis, dan
2. Readmore manual

Namun pada kesempatan kali ini saya akan membagi tutorial cara membuat readmore otomatis saja , untuk yang manualnya akan saya posting di lain kesempatan.

• Login dulu ke blogger masing-masing
• Klik Template

• Klik Lanjutkan

Akan ada tampilan seperti gambar di bawah ini

• Centanglah Expand Template Widget (lihat gambar di atas)
• Carilah kode </head> kemudian letakan kode di bawah ini tepat di atas kode </head> (Saran: untuk melakukan pencarian silahkan tekan tombol Ctrl+F pada Keyboard)

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div> ' + removeHtmlTag(div.innerHTML,summ) + '</div> '; div.innerHTML = summary; } //]]> </script>

• Selanjutnya carilah kode <data:post.body/>, dan ganti kode <data:post.body/> dengan kode di bawah ini

<b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='rmlink' style='float:right;padding-top:20px;'> <a expr:href='data:post.url'> <b> readmore</b> »»   </a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/> </b:if>

• Kemudian save template

Keterangan :

summary_noimg = 430 adalah jumlah karakter yang akan di tampilkan tanpa gambar

summary_img = 340 adalah jumlah karakter yang akan di tampilkan dengan gambar

img_thumb_height = 100 adalah tinggi gambar dalam ukuran pixel

img_thumb_width = 120 adalah lebar gambar dalam ukuran pixel

Silahkan sesuiakan dengan keinginan.

Selesai