Auto Read More With Zoom Effect For Blogger. Tonight I want to share about tutorial Auto Read More or Jump Break (post summary for Blogger homepage). This is important for bloggers in designing their blog more neat and clean. Visitors will get your post summary at homepage. This will show title of post, short summary with a number of characters and thumbnail post. There are two ways in applying this jump break or auto read more. First, adding jump break manually. It means you should click jump break icon on your post entry. but, it's not enough giving best result for me. I suggest you to add the post jump break automatically. Second, you must put some script on your HTML template to make it work automatically. If you interest to add this one automatically, please follow the tutorial below. First, Go to HTML Template and looking for </head> tag, use ctrl F to make easy. After finding it, put the code below before or above </head> tag.
<!--Auto Read More Blogokay-->
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9; text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:150px;width:200px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:150px;width:200px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with image, no -without image
summary_noimg = 300; //letters without image
summary_img = 250; //letters with image
img_thumb_height = 150;
img_thumb_width = 200;
</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;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>
<!--Auto Read More Blogokay-->
You have been successfully adding javascript code for your Auto Read More. By adding the code above will display :
- Title of post (your post title will appear above Thumbnail)
- Thumbnail (it will be taken from first image on your post)
- A number of characters (you can customize based on your style)
To make sure you like or not about the "Auto Read More" style, I have added the image below as a demo. What do you think about the style? if you are interested to add the code below. I am sure you Blog design will be more awesome.
I will complete the Demo of the script, the result like animated below. I hope you like about this view, it is really zoom effect when your cursor into image.
Next step, you have to looking for <data:post.body/> find the second code. Then replace <data:post.body/> with the code below.
<!-- Auto read more Blog okay-->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<div class='read-more'>
<a expr:href='data:post.url'>Read More »</a>
</div>
</b:if>
</b:if>
<!-- Auto read more Blog okay--> For customization, you can change Read More button by your own words. Finally, save your Template and look the result.
If you still confuse or have any questions about tutorial "Auto Read More With Zoom Effect For Blogger" use comment box below. I will try to help you as fast as I can.
Coment: