Blog Design 101: In Post Tips & Tricks for Better Photos

Alright loves, it's time for the last installment of the "Blog Design 101" series! So far we've talked about creating your own header, installing your own "about me" widget, and creating clickable social media icons. This last one is just going to be an all encompassing post about how to tweak tiny little things about your posts with simple bits of code! Let's get started!

Now, I think it's safe to say that photos are probably the most important element to a blog. They're what draws a reader in. In other words they're the "catch"! Being the most important part, means that our photos need to be as top notch as we can make them, right? Right. Now, my biggest pet peeve when visiting a blog is seeing photos that are bunch of different widths and heights. I just think it looks unprofessional and messy. It just irritates me to see some photos be portrait and others be landscape. It looks odd. Not to mention that having photos of all random different sizes slows down the download speed, and I don't know about you guys, but if photos are taking too long to download I just move on. If we're getting technical, you could just fix this by editing all of your photos down to the same size...but that would take forever! AND, sometimes, they still won't post at the same height and width. Lucky for you all there's a quick fix to this! Just by copying and pasting in the simple code I'm about to give you into the CSS of your blog you can tell blogger to automatically resize all of your photos to the EXACT width and height that you want! How stellar, right? You'll never have to worry about resizing again because blogger will do all the work for you! Now, to install this just head over to Template>Customize>Advanced>Add CSS and paste in the following code,

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

The highlighted areas are the areas you'll want to change to fit your blog. The first number is the number of pixels wide that you would like your photos to be. Anywhere between 700-900 is a good standard size. I like to keep mine at 740 because it's the width that works best with the rest of my blog. Now, the second highlighted part, is your height. I like to have mine set to "auto" because it allows the photo to be it's natural height and doesn't compress it into a size that will distort the photo. Feel free to play around with it, though, and find what works best for YOU. However, I would still recommend setting it to auto.

Now, have any of you ever noticed that annoying little drop shadow that is put around your photos in blogger? I know, I sure did. This is what I'm talking about.

It's kind of hard to see in this photo of my faux blog, but those of you who have noticed it on your own blogs will know what I'm talking about. Anyway, to get rid of it just go ahead and enter the code I'm about to give you below the Resize Code you just entered in.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

Now, onto the last item of business! Have any of you ever noticed that Blogger auto-enhances some your photos? I noticed this a little while ago and I was suuuuper bugged by it. I mean, if I wanted my photos auto-enhanced I woulda gosh dang dunit myself. And now I got all hill billy on you all. See what irritation does to me?? ;) Anyway, Dana explains how to turn this off better than I ever could so head on over to this post!

Oh, and I lied! There's actually one last thing! I know so many of you out there are constantly wondering how to center your tabs, I mean, I was one of the wonder-ers myself once upon a time! Anyway, as an added bonus, here is the code you need to install into your CSS to take care of that in a jiffy!

 .PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
body { text-align: justify; }

I hope this Blog Design series was helpful, it sure was fun to put together! Let me know if there's anything else design related that you've been a hankerin' to learn and I'll see if I can put together another tutorial!

Much love!