Cara Buat Menu Read More Pada Halaman Blog

DI BANYAK CARA - Modifikasi template menurut saya memang diperlukan selain untuk keperluan fitur juga untuk meringkas beberapa tampilan, termasuk pada halaman. Kali ini saya akan bahas cara buat menu read more pada halaman blog agar tampilan pada halaman blog lebih ringkas juga lebih enak tentunya untuk dilihat.

Di beberapa template standart bawaan blogger memang belum terdapat menu read more, beda dengan template dinamis yang menyediakan banyak fitur-fitur terbaru. Untuk menambahkan menu read more pada halaman blog bisa dilakukan dengan dua cara, cara pertama sangat mudah sudah di sediakan oleh pihak blogger pada menu entri baru yaitu "Insert Jump Break", menu tersebut tersedia pada saat sedang menulis posting dengan bentuk icon kertas sobek, berikut gambarnya.

Untuk menggunakan fitur tersebut kita hanya perlu memilah di bagian mana pada paragraf yang akan dibuat menu read more dengan cara meletakan kursor kemudian pilih menu "Insert Jump Break" maka secara otomatis pada tampilan halaman postingan akan menampilkan menu read more.

Pada contoh gambar diatas setelah menggunakan "Insert Jump Break" maka halaman antar paragraf yang dipilih akan terbelah, cara ini memang mudah tetapi harus dilakukan secara manual setiap sedang menulis artikel.
Cara kedua untuk buat menu read more dengan cara merubah pada template blog, ikuti langkah sebagai berikut.

1. Backup terlebih dahulu template untuk memudahkan jika terjadi error
2. Pada dasbor blogger pilih menu tema lalu pilih edit HTML
3. Cari kode  </head>  (gunakan Ctrl+F untuk memudahkan mencari kode tersebut)
4. Salin script di bawah ini kemudian letakan tepat di atas kode </head>


<script type='text/javascript'>var thumbnail_mode = &quot;float&quot; ;summary_noimg = 150;summary_img = 150;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>


5. Selanjutnya cari kode  <data:post.body/>  (gunakan Ctrl+F untuk memudahkan mencari kode tersebut)
6. Hapus dan ganti kode tersebut dengan script dibawah 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;summary<data:post.id/>&quot;);</script><span style='float:right'><a expr:href='data:post.url'>Read More..</a></span> <b:else/><data:post.body/></b:if>


7. Jika terdapat beberapa kode  <data:post.body/>  pilihlah yang kedua
8. kemudian pratinjau template sebelum menyimpan
9. jika menu read more sudah ada pada saat pratinjau silahkan simpan

Demikian modifikasi tampilan blog yaitu menampilkan menu read more/selamjutnya pada postingan di halaman blog, semoga artikel kali ini bermanfaaat.