Blogger is one of the most used blog platforms around the world and every person knows the reason behind its success. The reason of blogger can be describe in one word i.e. Google. Yes, Google the king of search engines owns Blogger that's why blogger is the most flexible and famous blog platform. Google has released many cool features for Blogger users in 2012 like Google Plus Mentioning System and Google + Followers widgets.
But as we know nothing in this world is perfect. Everything in internet or in the world has some side effects. So today I got a cool trick for you to remove a common problem in Blogger.
Why to Add Read More widget in Blogger With Thumbnail
A problem in blogger is that sometimes it shows the whole post on the main page of blogger instead of a short summary and a jump link. This problem mostly occurs when someone changes his blog's template. It is very difficult to summarize posts in blogger in such conditions but by using this widget you don't have to locate summary and picture for thumbnail. You just have to publish the post and the widget will automatically select thumbnail and summary for your post and creates a jump link.
How to Add Read More Widget in Blogger With Thumbnail
It is very easy to add Read more widget in blogger. First of all backup your template then follow the steps given below.
1. Go to Blogger Dashboard >> Template >> Edit HTML.
2. Check the Expand widget box.
3. Find </head> in the template and replace it with the code given below.
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript' src='http://mobi2android.com/readmore.js' ></script>
</head>
var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript' src='http://mobi2android.com/readmore.js' ></script>
</head>
In the code given above change the highlighted values as required.
4. Now find <data:post.body/> in template and replace it with the following code.
4. Now find <data:post.body/> in template and replace it with the following code.
<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 style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span>
</b:if>
</b:if>
<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 style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span>
</b:if>
</b:if>
5. Finally save your template and that's all.
0 comments:
Post a Comment