Auto Read More

Wednesday, April 7, 2010 1 comments
read more As we know, bloggers have support read more. But still we have to divide the posts that will appear first and which will appear whole. Read more automatic advantage is you no longer need to manually divide the posts read more will work automatically according to the sentence fragment height, which we previously had on the Edit HTML settings.

And once again I explained, that I've placed the code read more automated in this template. But if you want to come along put on another blog, then please follow the tutorial below.

Log in to Blogger, then on the Edit HTML page, click the Expand Widget Templates. Look for the code </ head> and put the following code before the code </ head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 300; img_thumb_height = 100; 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>

Search code <data:post.body/> or <p><data:post.body/></ p>, then delete the code and replace with the following code :
<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'><br/><b>Read More … </b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

and the Save Template.


Description:
  1. summary_noimg = 300 -> high for posting without a picture.
  2. summary_img = 300 -> to higher posts with pictures.
  3. img_thumb_height = 100 -> high-image.
  4. img_thumb_width = 120 -> width of the image.
  5. Read More ... -> you can replace with Read Full Story or whatever you want.

Read more >>

List Style

0 comments

Ini adalah contoh list style pada fialova template. Saya memakai square pada list style-nya.

 

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.

Read more >>

Blockquote and Link

2 comments
Blockquote : 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Link :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est


Read more >>

recent posts

About Me

My photo
Just Blogging and create templates.

News From My Blog

  • Why is SEO Important? - For those of you who have read the article about using SEO or SEO for business purposes, of course you are curious how to improve your knowledge for this ...
    3 years ago