How To Add Colored frame on all Blogger Images

How To Add Colored frame on all Blogger Images

5
data:blog.title
image border

Bloggers always try  to make their blog unique by adding different design. There are many ways to add design into your blog, but often we can make our blog attractive by using simple trick. Generally we use border on blogger post image to make it attractive so I have planned to make border as colored frame. Image with frame make it different from blog background.  Suppose If you have added a white image with white background blog then you image may not be visible.  So if you want to make you blog image attractive then you must use frame on every post image. But it is not possible to add image border manually to every post. So I am going to share a trick where you can easily apply image border automatically by adding this magic code. And I have used RGB color instead of Hex color to make it distinctive. After adding the code your image will be within a ash color frame by default and whenever  you just mouse  over on them your image border frame will be change the color.  Using this trick your blog won't get slower or affect on other widget so you can use it easily. Just follow the below simple steps to add color frame on your blog image.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  

Step 3 Now Find this code ]]></b:skin> by Pressing  Ctrl + F

Step 4 Paste the below code  Before/above ]]></b:skin> and Save the templates. 


/* Image Frame By www.bloggerspice.com*/
div.post-body.entry-content{
margin-top:35px;
font-size:15px;
font-family:'Calibri';
color:#444444;
}
div.post-body img{
border: 10px double #D3D3D3;
max-width:500px;
max-height:auto;
margin-top:10px;
}
div.post-body img:hover{
border: 10px double rgb(10,218,243);
max-width:500px;
max-height:auto;
margin-top:10px;
}

Customization 


  • Alter D3D3D3 to change the image default frame color
  • Alter 10,218,243 this to change the hover color.

You can Get the Color Code from Color Picker. But to get the RGB color please use Photoshop software.
How To Add Colored frame on all Blogger Images
4 Stars stars - "How To Add Colored frame on all Blogger Images " Bloggers always try  to make their blog unique by adding different design. There are many ways...

Post a Comment

Brother i want the border like you ..............please say me the script for image border

add the below code before b:skin

.post img {
padding: 8px;
background: #ffffff;
border: 1px solid #cccccc;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

hey bro not working ......above code it is not like your's and one thing brother i have asked you before about the border for my footer...please help fast

bro before ]] this or b:skin ......b:skin i'm not getting it and i have to placed only this above code or whole ....i want the hover effect like yours....thanks

yeh bro right b:skin full code won't show in comment body. So follow the above tutorial and use the below code instead of tutorials code

.post img {
padding: 8px;
background: #ffffff;
border: 1px solid #cccccc;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

And for hover effect I will make a tutorial soon.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *