Blogger Tips and Design Portfolio from Lightway Web Services, Inc.
HomeBlogger TipsDesign TipsWeb HostingDomain Name RegistrationDesign PortfolioAbout This BlogContact

Tuesday, March 20, 2012

Customizing Images in Blogger Posts

There is a quick easy way to add some flair to images in your Blogger posts using some CSS (Custom Style Sheets).  Most of what Blogger templates use revolve around CSS and if you want to make changes to the HTML of your blog template, you'll need to use some CSS.

To start, you will want to find the "Edit HTML" option through the Template menu. From here, you will want to scroll down to find the CSS section for Posts. In this section, depending upon your template, you may have a section of CSS starting with the following code:

.post img {
}

This code will contain the different styles for the images that appear in blog posts.  If you don't see this code, you can create this in an empty section of the code under Posts in the "Edit HTML".  Just find an empty line, create a couple of spaces by pressing "Enter", and then paste this code. Once you have this code, you can add a border to your image or create a background color to start. Here are some examples of code you can use to enhance your image.



1.  Adding a thin dark grey border to your images.

.post img {
  padding:1px;
  border:1px solid #333333;
}

2.  Increase the border size, spacing, and add a background color to the image.

.post img {
  padding:2px;
  border:2px solid #333333;
  background-color:#982E3F;
}

3. Change the border to a 3D border like a picture frame and increase the border again.

.post img {
  padding:3px;
  border-left:4px solid #555555;
  border-top:4px solid #555555;
  border-right:4px solid #000000;
  border-bottom:4px solid #000000;
  background-color:#982E3F;
}



These are just examples of course, so you can change the colors and pixel width to fit your desire style.  You can also add other CSS styles to enhance the image to your liking.
Posted by Brian Kraft at 12:28 PM
Labels: BlogTips

No comments:

Post a Comment

Newer Post Older Post Home
Subscribe to: Post Comments (Atom)

Popular Posts

  • Custom Navigation Tabs for Blogger Menu
  • Using the "Float" Command in CSS
  • Adding the Facebook Social Plugin
  • Adjusting Blog Widths
  • Using a Custom Domain or Subdomain for Blogger address
  • Creating the Blog Header
  • Ever Care Pool and Spa
  • Creating a Favicon
  • Oxnard Lemon Company
  • Coastal California Blueberry Farms, LLC.

Facebook

Followers

Subscribe To Blog

Posts
Atom
Posts
Comments
Atom
Comments