20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

Increase Image Size In Blogger Official Featured Post Widget

Learn to increase image size to add in homepage,featured post gadget tool image problem solved,trick to adjust the image size of blogger featured widget.
Increase image size in Blogger Official Featured Post Widget
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
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'>
    <b:includable id='main'>
        <!-- Only display title if it's non-empty -->
        <b:if cond='data:title != &quot;&quot;'>
            <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 != &quot;&quot;'>
                <h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
            </b:if>
            <p>
                <data:postSummary/>
            </p>
            <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
                <img class='image' expr:src='data:postFirstImage' />
            </b:if>
        </div>
        <style type='text/css'>
            .image {
                width: 100%;
            }
        </style>
    </b:includable>
</b:widget>
Step 3:Now replace the above code from  <b:widget...</b:widget> with the following below code.
<b:widget id='FeaturedPost1' locked='false' title='Featured post' type='FeaturedPost'>
    <b:includable id='main'>
        <!-- Only display title if it's non-empty -->
        <b:if cond='data:title != &quot;&quot;'>
            <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 != &quot;&quot;'>
                <h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
            </b:if>
            <p>
                <data:postSummary/>
            </p>
            <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
                <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>
Now Save your template,Done !
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