Show Mobile Navigation
,

Add Borders to the Images in Blogger Post

Hemant Verma - 4:02 PM

When we upload OR add any image in blogger, shows a very simple without and borders but when we add the borders in our images then our team also think that we should also give a post about the borders for the images and then we create a new border style for images in blogger. This border style includes the bottom standing shadow below of image and little round corner as you can see in live demo.





Add Border in Images

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML > Proceed > Expand Widget Templates
  • Press Ctrl + F and search the code shown below. 
]]></b:skin>

  •  Paste below code just above it.
.post-body img {
padding: 4px;
border: 1px solid #AAA;
background-color: #F0F0F0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 15px 10px -12px black;
-moz-box-shadow: 0 15px 10px -12px black;
box-shadow: 0 15px 10px -12px black;
}

  • Save your template and you are done.



If any Problem Comes,  Ask in Comments



3 comments:

  1. thanks! i wanted to give my pics a rounded border so i changed the code to just be:

    }
    .post-body img {
    border-radius: 10px;
    }

    ReplyDelete
  2. Thanks For That...!!
    It's awesome ..........!!

    ReplyDelete

You may use these HTML tags and attributes: <a href="" title=""> </a> <b> </b><strong> </strong>

 



Make Your Blog Like a Pro
About | Contact | Affiliates | Privacy Policy | TOS