Kamis, 21 Juni 2012

Cara Membuat Read More di Blog


Assalamu'Allaikum Wr. Wb

Back MuT nyeee ..
kali ni Kite Bahas Cara nye Buat Read More di Blog kite, Ente" Pratiin care nye dengan bener ye , ni Cara dah Ane Plajarin / Praktekin Sendiri, aLL HAsil SukSes , kLo ada yg salah , Ente Cek" Sendiri deh , kemon Kite Blajarin Bersame

Gni Care nye :

  • Login ke blogger dengan ID Ente.
  • Pilih Rancangan atau Tata Letak.
  • Pilih Edit HTML.
  • Ente Centang tulisan "expand template widget".
  • Trus Ente cari kode </head> :   untuk mempermudah pencarian tekan F3.
  • Trus Ente masukkan code di bawah ini tepat di atas  </head>     ( Inget Tepat di Atas nye )

<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 Ente  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> readmore</b> &#187;&#187;&#160;&#160; </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

  • Kemudian Save Template.
NB    :        Read More nye

var thumbnail_mode = "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;
summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;
img_thumb_height = 120;: Tinggi thumbnail dalam ukuran pixel;
img_thumb_width = 120;: Lebar thumbnail dalam ukuran pixel;
READMORE-: Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” dan apabila anda tidak ingin menampilkan judul dibelakang Readmore .

Nah , Ntu care nye Ane juga boleh blajar Di Mari , Makasih ane ucapin buat Tutor nye skrng di Blog ane Ada Read More nyee . Hahaaaay . and Smoga bermanfaat buat nyang baca di Mari hehehhehe

2 komentar: