Increase Image Size In Blogger Official Featured Post Widget

0
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.
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.
Hello guys,In previous post we had talked about how to add featured post gadget in blogger templ...
SUMMARY

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.

You Might Also Like:

We hope this article helped you to learn Increase Image Size In Blogger Official Featured Post Widget. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Increase Image Size In Blogger Official Featured Post Widget" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand