Sunday, 24 February 2013

7 LANGKAH MUDAH MEMBUAT READMORE ATAU BACA SELENGKAPNYA

Tags

 
 Assalamu'alaikum Sahabat,

Kaifalhal? semoga semuanya sehat, Aamiin. nah sahabat kali ini saya akan berbagi tentang bagaimana membuat readmore atau baca selengkapnya. Jika template bawaan sahabat belum ada fitur Read more atau Baca selengkapnya tidah usah bingung tambahkan saja Script di bawah ini:

berikut caranya :

1. Masuk Ke DASBOR
2. Klik  TEMPLATE 
3. Klik Edit HTML.
4. Centang "Expand Template Widget"
5. Cari kode </head>  untuk mempermudah pencarian tekan CTRL+F

Masukan kode ini pas di atas kode </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>


6. cari kode :  <data:post.body/>

GANTI KODE  <data:post.body/> dengan kode 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>Read more</b> &#187;&#187;&#160;&#160; </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>
7. Terakhir Save Template Sahabat dan Lihat Hasilnya :)

#Kata Read more warna merah dapat anda ganti dengan kata-kata lain, misalnya : "Baca Selengkapnya..." seperti di blog yang sedang sahabat kunjungi ini.

salam 


Trik ini saya dapat dari sahabat : http://wan-soe.blogspot.com


Pijakilah Setiap yang Kau Baca dengan Komentar Manismu. (blogsastra.com)



EmoticonEmoticon