Cara Membuat Read More Otomatis dan Manual

Apa itu read more ?
Pasti dari kalian udah gak asing lagi sama yang namanya READ MORE otomatis.

readmore adalah penggalan dari sebuah kalimat yang nantinya akan diarahkan kehalaman yang sebenarnya. selain berguna untuk memotong sebuah kalimat, read more berguna untuk merapikan halaman depan blog anda dan berguna untuk meningkatkan SEO.

Sebenarnya READMORE ada dua pilihan, yaitu secara manual dan otomatis. Pada kesempatan kali ini saya akan memberi tahukan cara membuat ReadMore manual dan otomatis.

ReadMore Manual
Untuk cara manual ini pasti sangatlah mudah karena sudah disediakan oleh blogspot, caranya adalah kamu hanya harus memindahkan kursor ditempat yang kamu ingin potong lalu klik gambar yang dilingkari. lalu klik PUBLIKASIKAN



ReadMore Otomatis

nah gimana ?? kali cara yang manual pasti mudah tetapi kamu harus melaukan itu setiap kali kamu posting, pasti capek kan?? nah sekarang silahkan dicermati dan dipahami cara membuat ReadMore Otomatis yang satu ini.

LANGKAH 1 :
  • silahkan buka blog kamu lalu pilih TEMPLATE >> dan pilih EDIT HTML >> lalu cari kode ini </head>,untuk mempermudah gunakan CTRL+F
  • jika sudah ketemu kode </head> lalu copy kode dibawah dan letakan diatas kode </head> dan Klik SIMPAN
<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>


LANGKAH 2 :
  • cari kode <data:post.body/>, jika kamu menemukan 3 s.d 4 kode, maka kamu pilih yang ke-2
  • jika sudah ketemu, lalu ganti kode <data:post.body/> dengan kode dibawah.
  • SIMPAN
<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>



Keterangan :

  1. summary_noimg = 250; berguna untuk menampilkan seberapa banyak karakter huruf ketika tidak ada gambar
  2. summary_img = 220; berguna untuk menampilan seberapa banyak karakter huruf ketika menggunakan gambar
  3. img_thumb_height = 120; untuk mengatur tinggi gambar
  4. img_thumb_width = 120; untuk mengatur lebar gambar
  5. Baca Selengkapnya = kamu bisa ganti kata kata ini sesuai selera kamu
nah, jika kamu masih merasa kesulitan kamu bisa bertanya melalui komentar !!!
ingat ya blog ini dilindungi oleh DMCA, jadi janagn sembarangan Copy Paste

2 comments:

Subscribe to: Post Comments (Atom)