Banner Stuff...

Those of us who are sellers on Etsy will use our shop banners as the banner on our blogs. A problem with this is when our chosen blog template has a banner size which differs from the size of our shop banners. Adjusting the size of your banner to fit into the dimensions that your blog template allows for is the easiest remedy, and to do this, the first thing you have to know is the dimensions of your template banner space.

Go into your Blogger dashboard, and choose "Layout". Your page elements window will open, and click on the edit link for your banner. The pop up will show your banner, and in small print near the bottom it will tell you that the banner will be shrunk to a certain pixel width (my banner is 660px wide, as an example). The problem with shrinking a graphic is that it sometimes will lose clarity, especially where fonts are concerned. The best way to solve this is to crop your banner to the desired dimensions rather than having Blogger shrink it down automatically.

My original shop banner in Etsy is 760px wide so considerable changes were needed to fit into the 660px width that my blog template calls for!

Open your photo-editing program (ie, Photoshop), and open your banner into it. Now click on File and choose New, and in the window that pops up, type in the dimensions that you need for your blog banner. The new canvas will be exactly the size needed.

In the navigation bar, choose Select, and then All. The outer edges of the new canvas will be selected. You can then transfer this edge selection to your banner with the rectangular marquee tool, to crop it to the exact dimensions needed for your blog banner. Center the selection outline so that all the elements in your banner are included. When it's right where you want it, choose Image from your navigation bar, then "Crop".

Save your new blog banner to your computer and upload it into Blogger as your banner image. Done!

If you don't have a photo-editing program that allows for good cropping, there are online image croppers. A really good one is: here. If there are fonts on your banner, just entering the width and height dimensions that you want your banner to be will result in the whole image being shrunk down or enlarged to those dimensions. The result will be a distortion in your fonts, and in some cases, the image as well. In this case it's best to use the drag mouse feature rather than typing in the dimensions. As you drag your mouse on the image, watch the dimensions change until width and height sizes are where you want them. When it's just right, choose "crop selection" and your image will be cropped to those dimensions without any shrinking or enlarging of the original.

But wait, it still doesn't fit!

When I had cropped my Etsy banner for the particular template I chose for my blog, the image, though exactly 660px wide, was still overlapping the double outline that surrounds the banner. Why? Because the double outlining built into this template is using part of the 660px width. I'm assuming that it's a particular problem with just this template because of the double border, and that other templates won't have this quirk. If you have the same template as mine, and you've had this problem, you may have to crop your banner image to be slightly smaller than the 660px wide that the template calls for. For this Blogger template, the size of your banner should be 648px wide by 87px high to fit perfectly.

Also keep in mind that your particular banner may need some moving around of fonts and images to fit into the smaller blog banner dimensions without losing anything vital when it's cropped! When I cropped my original Etsy banner for my blog, I found that my Mardi logo text seemed too large in the smaller banner and I had to lower the font size accordingly.

Still having problems?

Email your banner to me: mardi{at}mardistudio{dot}com ...I'd be happy to fix it for you!