Cara membuat read more otomatis

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

assalamualaikum.wr.wb. Pada kesempatan kali ini saya akan memberikan script read more otomatis. Mungkin anda belum memakai read more atau pernah mencoba namun gagal? kali ini saya akan memberikan 2 script read more otomatis jika cara ke-1 gagal gunakan cara ke-2. Kelebihan read more otomatis :

-Simple
-Setiap post yang di publish akan langsung dipotong dengan tombol Read more
- Mempercepat loading blog

Berikut cara membuat read more otomatis Pertama :

• Login ke blogger
• Klik Menu Template
• Pilih Edit HTML
• Lalu cari kode </head> : ( untuk mempermudah pencarian Gunakan CTRL + F )
• Lalu masukkan Script di bawah ini tepat di atas </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 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>

• Kemudian cari Script <data:post.body/> lalu Ganti script <data:post.body/> dengan 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;summary<data:post.id/>&quot;); </script> <span class='rmlink' style='float:right;padding-top:20px;'> <a expr:href='data:post.url'> <b> Readmore</b> &#187;&#187;&#160;&#160; <data:post.title/></a> </span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> </b:if>

• Kemudian save template selesai, jika cara diatas tidak berhasil gunakan cara ke-2

Cara kedua sebenarnya hampir mirip dengan cara yang diatas tinggal mengganti script diatas </head> dengan script ini

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 450; summary_img = 350; img_thumb_height = 100; img_thumb_width = 120; </script>

 <script src='http://readmore-otomatis-js.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

• Lalu ganti <data:post.body/> dengan script 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 class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'>[ Baca Selengkapnya...]</a>

</span>

</b:if>

• Lalu save template anda selesai

NB : 

• summary_noimg = 250; : Jumlah karakter yang ditampilkan di posting tanpa adanya gambar, anda bisa menggantinya jumlah karakter dengan mengubah angka 250
• summary_img = 250; : Jumlah karakter yang ditampilkan di posting dengan gambar, anda bisa menggantinya jumlah karakter dengan mengubah angka 250 
• [ Baca Selengkapnya...] : tulisan Baca selengkapnya anda bisa menggantinya misal "Read More"

Sekian post yang saya berikan semoga berhasil.

| Supported? |

Artikel Terkait Tutorial Blogspot