Search This Blog

26 Jan 2014

How to Resize All Images Automatically in Blogger

Tutorial [教程] • 26 JANUARY 2014
I was so happy to find out this tutorial from Mybloggerlab from now onwards, I don't have to manually edit my photos , it automatically resize the width for me. Instead of 500px, you can change to 600px ... etc. But remember the Height put it as :auto.


Sometimes images of large magnitude flow out of the content this not only disappoint your readers, but also affect your online reputations.  Blogger provides basic options for resizing images, but this not a practical approach and does not fit the blogs designs well.  Fortunately, a straightforward CSS tweak makes it possible to automatically modify each and every image on your site. In this article, we will show you How to Resize All Images in Blogger?

Resizing pictures one-by-one manually is acceptable, but what you would do, if your site has thousands of photos and screenshots. Will you still edit them manually? Even if you decided to do so it would take months or even more than that. Therefore, it is essential to resize them manually through a straightforward CSS coding. Through this approach, you can also revert the size of images back to their original size.

The First thing you need to do is to go to Blogger.com >> your site >> Template >> Edit HTML. Now within the new Blogger HTML Editor search for the ]]></b:skin> tag and just above it paste the following CSS coding. (Quick Tip: If you are unable to find the skin tag, then first click anywhere on the HTML Editor and Press CTRL+F to operate the built in search option connected to the HTML Editor).

.post-body img {width: 500px!important;height: auto!important; }

Now change the values of Width and height, according to your needs. You can even add a border to your images through (border: 1px solid #d2d2d2) a modest border CSS command. After customizing, press the “Save Template” button and that’s all.

19 comments:

Template developed by Confluent Forms LLC; more resources at BlogXpertise