Sunday, June 30, 2013

How to make Auto Read More with Thumbnail

Indeed the panang article looks very neat on the home page of your blog even more so if the content of the article certainly choose a lot of this paragraph will eliminate ekstetika value the blog in the eyes of the visitor. for that I give advice to my friend to use the auto readmore on your blog as I apply the homepage of this blog, what my friend see this blog on the homepage? interesting and neat right.

moreover, I love wearing this auto readmore can save time loading blog and look neat because it is set number of words and image size

7 powerful tips speed up loading blog.

A glimpse of auto readmore

as I have explained the function of readmore above, this auto read more. intention of this auto is automatically read more posts on the homepage autoreadmore make arrangements premises number and size of the width and height of the image, so much easier right: D so do not have to use again the old way (jump break). most auto read more I have come across do not use tags that resulted penkondisian posting on the page / pages readmore still formed, but not with this autoreamore because auto readmore tag has been made ​​based upon the conditioning that will not appear on halama page / page but only on pages A blog homepage.
  • login keblogger
  •  select the template -> edit html
  •  check expand widget template
  •  look for the code </ head> to facilitate use ctrl + f
  •  copy and paste the following code just below the above code
<!-- Automatic read more script Start -->
<script type='text/javascript'>
 summary_noimg = 430;
 summary_img = 340;
 img_thumb_height = 150;
 img_thumb_width = 150;
 img_thumb_nosrc = &quot;http://3.bp.blogspot.com/-TSC-t4b1XvQ/UHWqOo4keDI/AAAAAAAAATo/DgshIsz1IBs/s1600/default.png&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>
<!-- Automatic read more script End -->
NOTE :
  • summary_noimg = 430; was the number of words in the article that does not have a picture
  • summary_img = 340; opposite of summary_noimg, summary_img is the number of words in the article that has a picture.
  • img_thumb_height = 150; was setting the height of the image to auto readmore
  • img_thumb_width = 150; was the setting of the size of the image width to auto readmore
  • img_thumb_nosrc = is the replacement image on the article does not have an image 
  • <data:post.body/> find the code there is usually more than one therefore <data:post.body/> second search code and replace with the following code
<!-- Automatic read more script Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'><div style="text-align: right;"><img border='0' src='http://i1307.photobucket.com/albums/s597/depermana/bluish_zps515fdacf.png (blue)'/></div></a>
</b:if>
</b:if>
<!-- Automatic read more script End -->
Statement.
code red: thumbnail layout read more RIGHT: LEFT Right: Left
 
color coded blue: icon read more, maybe my friend would like to replace it with a buddy icon had.

 
Thank you'r review this artikel blog. Thanks regard...

Blogger

Author: Sendi Karlita Location: Pangkalpinang, Bangka Belitung

Article How to make Auto Read More with Thumbnail, Published by Sendi Karlita on the day Sunday, June 30, 2013. Hopefully this article can add your insights. Sendi Karlita a is a writer who wants to be successful in the virtual world. Try, and keep trying. May God give consent. regards

0 comments:

Post a Comment

Enter your email address:

Delivered by FeedBurner

 

© 2013 BLOG AMAZONE ZONA - Designed by Mukund | ToS | Privacy Policy | Sitemap

About Us | Contact Us | Write For Us