Default NoImage Thumbnail Auto Readmore Blogspot

By Unknown

Wednesday, August 15, 2012

Banyak dari template blogspot yang menggunakan auto readmore dan thumbnail pada blogspot dengan versi javascript karena dengan kode javascript ini dapat dengan mudah mengatur ukuran gambar dan banyaknya karakter kata.

Namun sepertinya ada yang masih kurang dari script tersebut yaitu, tidak disertakan dengan default gambar; maka apabila seorang penulis artikel memposting tanpa gambar, hanya tulisan sajalah yang tampil sehingga terlihat kurang menarik.

Agar tampilan artikel tanpa gambar itu terlihat lebih menarik, maka dapat dilakukan sedikit modifikasi atau penambahan pada javascript codes.

Untuk membuat Default NoImage Thumbnail Auto Readmore Blogger, kode yang dipergunakan adalah:

Temukan ]]></b:skin> dan letakkan kode ini dibawahnya:

<script type='text/javascript'>summary_noimg=250;summary_img=250;img_thumb_height=250;img_thumb_width=250;img_thumb_nosrc=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNyW7RRAw1ni9ObZURnd2VuFisVIJDIwzvjK6jRyraUfbWG0WCS1iF75lWjwqQx3dxoeWRN4V40UFEE6a1C6u7Q-HGM1lfi0SqdMRvQ-GpsdDZKscsT5KDJSn96t_d94dG3x8ybkIo4IjN/s1600/Muslim-Blog-Default-Thumbnail.jpg&quot;;</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;
  // this block of code is used to add default thumbnail to post without images 
  if(img.length<=1) {
   imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';
   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>

Dan replace <data:post.body/> dengan:

<b:if cond='data:blog.pageType != "static_page"'>
 <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:right'>
   <a expr:href='data:post.url'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi89PCOeHHaEhsGk0p_jvtggpqHPqDj7qAWh2YY3wJoTg5dUu7lopzpp3preLJ3JJo1Hv7Bpc_Lty31zPF_huq7duiOcFmjBh9XP_kVlXeQQSIdFITAT4sYBBR_dk-_QFD-rJCSglaP_rw/' style='border-style:none;'/> 
    <!-- 
      THE IMG ABOVE IS A "READ MORE" IMAGE, 
      REPLACE THE "SRC" IMAGE 
      OR JUST USE PLAIN TEXT
    -->
   </a>
  </span>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

Sumber: Ajibanda.Com

Share :

Facebook Twitter Google+