#nav a{display:block} #nav .b a,#nav .b a:visited{color:#20c} #nav .i{color:#a90a08;font-weight:bold} .csb,.ss{background:url( http://i879.photobucket.com/albums/ab351/bloggerblogimage/pagenavi/nav_logo7.png ) no-repeat 0 0;height:26px;display:block} .ss{background-position:0 -88px;position:absolute;left:0;top:0} .cps{height:18px;overflow:hidden;width:114px} .mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px} #nav td{padding:0;text-align:center}
Diberdayakan oleh Blogger.
RSS

Cara Membuat Read More Otomatis

Sabtu, Desember 10, 2011 | Label:

Baiklah saat ini saya akan membahas tentang cara membuat readmore otomatis,  Keuntungan dari readmore otomatis adalah pada saat memposting artikel, maka  artikel anda langsung terpotong otomatis tanpa menggunakan kode <div  class="fullpost"> ataupun <span class="fullpost">, dan keuntungan  lainnya adalah gambar dari artikel pertama anda akan muncul di samping  poastingan anda.

Sebelum  anda mencoba trik ini, ada baiknya anda membackup template anda terlebih dahulu,  caranya :
1. Klik menu Design
2. Pilih menu Edit HTML
3. Klik Download  Full Template

Langkah - langkah Membuat Readmore otomatis sebagai  berikut :
1. Pergi ke menu Design, lalu klik Edit HTML.
2. Centang "  Expand Widget Template ".
2. Lalu cari </head>, Tekan CTRL+F untuk  memudahkan pencarian.
3. Copy kode dibawah ini dengan tepat dibawah kode  </head> :



Copas




<script type='text/javascript'>
var  thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img =  250;
img_thumb_height = 120;
img_thumb_width =  120;
</script>


<script  type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore  link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit  http://en.vietwebguide.com to get more cool  hacks
********************************************/
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>


4. Masih pada menu Edit Html  cari lagi kode berikut : <data:post.body/>
ingat, gunakan CTRL+F untuk  memudahkan pencarian.

5. Apabila telah dicari ganti kode  <data:post.body/> tersebut dengan kode dibawah ini :



Copas




<b:if  cond='data:blog.pageType != "item"'>
<div expr:id='"summary" +  data:post.id'><data:post.body/></div>
<script  type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span  class='rmlink' style='float:left'><a expr:href='data:post.url'>READ  MORE -  <data:post.title/></a></span>
</b:if>
<b:if  cond='data:blog.pageType ==  &quot;item&quot;'><data:post.body/></b:if>


6. Klik  Save Template dan lihat hasilnya,

Selamat Mencoba...

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Widget for blogger by Allfine - BERBAGI INFO TENTANG APA SAJA

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
Related Posts Plugin for WordPress, Blogger... Ngobrol Yuk !