Hello guys,In previous post we had talked about how to add featured post gadget in blogger template,Today in this article we are going to teach you how to increase and decrease image size in blogger official featured widget.This widget is very good for blogger to show or highlight the best post in blog or website.But there is a problem with image size from the post.There is four image size possibilities you can use for image size.
- Small Image- 200 x 133 pixels
- Medium Image- 320 x 213 pixels
- Large Image- 400 x 267 pixels
- X-Large Image- 640 x 427 pixels
- Original Size Image- Default Size
Recommended : How To Add Featured Posts Widget In Blogger Template
The problem is if you implement featured post widget in homepage it show different size,so today we are going to solve this problem by using javascript.To grab this trick just follow the steps mentioned below.
installation steps:
Step 1: Go to Blogger Dashboard >> Layout >> Add a Gadgets. And Add "Featured Post" (If you already Installed it skip to the next step)Step 2: Now Click on Template >> Edit HTML, now find this code "FeaturedPost1" and you will see this code.
<b:widget id='FeaturedPost1' locked='false' title='Featured post' type='FeaturedPost'>Step 3:Now replace the above code from <b:widget...</b:widget> with the following below code.
<b:includable id='main'>
<!-- Only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<b:include name='content' />
<b:include name='quickedit' />
</b:includable>
<b:includable id='content'>
<div class='post-summary'>
<b:if cond='data:showPostTitle and data:postTitle != ""'>
<h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
</b:if>
<p>
<data:postSummary/>
</p>
<b:if cond='data:showFirstImage and data:postFirstImage != ""'>
<img class='image' expr:src='data:postFirstImage' />
</b:if>
</div>
<style type='text/css'>
.image {
width: 100%;
}
</style>
</b:includable>
</b:widget>
<b:widget id='FeaturedPost1' locked='false' title='Featured post' type='FeaturedPost'>Now Save your template,Done !
<b:includable id='main'>
<!-- Only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<b:include name='content' />
<b:include name='quickedit' />
</b:includable>
<b:includable id='content'>
<div class='post-summary'>
<b:if cond='data:showPostTitle and data:postTitle != ""'>
<h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
</b:if>
<p>
<data:postSummary/>
</p>
<b:if cond='data:showFirstImage and data:postFirstImage != ""'>
<img class='image' expr:src='data:postFirstImage' />
<script>
// path: The image url
// replacement: The replacement string
function replaceSize(path, replacement) {
var parts = path.split('/'); // break the string to an array
parts[7] = replacement; // this is the path segment to replace
return parts.join('/'); // glue the array back into a string
}
document.getElementById("FeaturedPost1").getElementsByTagName("img")[0].src = replaceSize('<data:postFirstImage/>', 's1600');
</script>
</b:if>
</div>
<style type='text/css'>
.image {
width: 100%;
}
</style>
</b:includable>
</b:widget>
We hope this article helped you to learn How To Increase And Decrease Image Size In Blogger Official Featured Post gadget.If you liked this article please Join us on Facebook,Twitter,Google Plus.
Post a Comment