Most of the bloggers installed Mybloggertricks template for their blog and customized well according to their requirement. BlogTariff.com now discovered and developed Mybloggertricks template readmore option script code into automatic converting customized summary with defined thumbnail with easy installation. Blog owners don’t need to work hard for adding this advanced script code for their blogger blog. Let’s begin the tutorials to modify the readmore script to advanced automatic ‘Continue reading’ alternative.
Step One
Go to Blogger and Sign into your Blogger
Select ‘Template’ from Blogger Dashboard
Now before you experiment this technique back up your template if any thing goes wrong you can reuse it again.
Now click on ‘Edit HTML’ link Tab
Search for code
</head>
After finding code copy the below code and paste above to </head>
<!--BlogTariff.com Readmore Scripts and Styles Starts-->
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
.post-footer, .feed-links {display:none}
</b:if>
</style>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 300;
summary_img = 300;
img_thumb_height = 80;
img_thumb_width = 110;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"....."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0 10px 2px 0;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('#Label1 li').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script>
<!-- BlogTariff.com Readmore Scripts and Styles Ends-->
Step Two
Now after pasting the above code search for
<div class='post-body entry-content'><data:post.body/>
After finding code copy the below code and replace with <data:post.body/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style='float:right;padding:0px 0 0 0;font:normal 12px Arial;'>
<span class='rmlink'><a expr:href='data:post.url'><b>Continue Reading</b></a></span>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
Customization:
Adjust your required thumbnail by changing the value as high lighted in RED COLOR
Change Continue reading with Read more or preserve the same
To add your designed Readmore image button replace Continue Reading word with the below code
<img src="Insert Image URL here" />as highlighted in BLUE COLOR
That’s it you’ve done, now ‘Save your Template’ and preview
If you experience any type of problem don’t forget to bring to us by commenting.
Author’s Note:
Don’t forget to subscribe to us, Like our Facebook page and Follow on Twitter
Post a Comment Gmail ID Facebook
Do not Try to Add Spam Comments