| Entertainment, Technology, Guides, Internet, News, Job Vacancy, Blog Tutorial

Tuesday, June 04, 2013

Adding Shadow Border to Your Blog Post Images

How to add Blog Post Images Shadow Border
   ABCNetspace.com Another blog tutorial using CSS to improve your blog appearance. Today's blog tutorial will shows you how to add border and shadow to your blog post images.

Your blog will looks more beautiful with shadow border around your blog post images. You can do this by applying CSS 3 code to your blogger template.

This is the result of applying CSS 3 border image code in your blogger template :

How to add Blog Post Images Shadow Border

Beautiful shadow border right? Make sure you already backup your current template before modifying it, click here to see tutorial how to backup and restore blogger template. To add image shadow border to your blog post images, you need to :
  1. Go to your blog Template setting > Edit HTML
  2. Find .post img code in your blog template, you can find it using Find feature (hotkey : Ctrl + F)
  3. The code could be different for certain blog templates, it could be .post-body img, .post image, .post img table.tr-caption-container, etc. Just find code related to post and image. The code is located between <b:skin> and </b:skin> tag.
  4. Replace the code under .post img

    How to add Blog Post Images Shadow Border

    with this CSS code :


  5. Save template and done.
Now, you have shadow border around your blog post images. Feel free to leave a comment, if you have any question.

0 comments:

Post a Comment

 

ABCNetspace | Entertainment, Technology, Guides, Internet, News, Job Vacancy, Blog Tutorial